vue播放mu38视频兼容谷歌ie等浏览器
- <template>
- <div id="id_test_video" style="width:100%; height:auto;"></div>
- </template>
- <script>
- export default {
- data() {
- return {
- }
- },
- mounted(){
- this.play();
- },
- methods: {
- play(){
- var player = new TcPlayer("id_test_video", {
- "m3u8":"http://weblive.hebtv.com/live/hbws_bq/index.m3u8",
- "autoplay" :true,
- "poster": '', // 封面
- "width" : "1280",//视频的显示宽度,请尽量使用视频分辨率宽度
- "height" : "720"//视频的显示高度,请尽量使用视频分辨率高度
- });
- }
- }
- };
- </script>
- <style>
- </style>
- // 如果需要清除dom 可以在div上加ref处理;this.$refs.xx.innerHtml = '';多次调用在paly()方法下面写上这句;
文档地址参考:https://cloud.tencent.com/document/product/454/7503;
引入方式 https://www.npmjs.com/package/tcplayer;或index.html引入
vue播放mu38视频兼容谷歌ie等浏览器的更多相关文章
- 页面中插入视频兼容ie8以上的浏览器
有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...
- 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
- html5结合flash实现视频文件在所有主流浏览器兼容播放
来源:http://blog.csdn.net/freshlover/article/details/7535785/ 由于html5的出现,让网页中的视频.音频有了更加便捷的实现方式.但是video ...
- vue播放video插件vue-video-player实现hls, rtmp播放全过程
1.安装插件 1 npm install vue-video-player -S 2.配置插件 在main.js里添加 1 import VideoPlayer from 'vue-video-pla ...
- 开源播放器 ijkplayer (一) :使用Ijkplayer播放直播视频
1.ijkplayer 编码 IjkPlayer支持硬解码和软解码. 软解码时不会旋转视频角度这时需要你通过onInfo的what == IMediaPlayer.MEDIA_INFO_VIDEO_R ...
- Android 使用PLDroidPlayer播放网络视频 依据视频角度自己主动旋转
近期由于项目需求 .须要播放网络视频 .于是乎 研究了一番 ,说说我遇到的那些坑 如今市面上有几个比較主流好用的第三方框架 Vitamio ( 体积比較大,有商业化风险 github:https:// ...
- [转] Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- Android 播放在线视频
首先开启电脑上的tomcat,将视频文件放在Tomcat 7.0\webapps\ROOT中 不用修改代码,直接输入地址即可,运行如下: 播放在线视频,必须要求手机支持当前的格式,才可以播放 播放的原 ...
- Android Multimedia框架总结(二)MediaPlayer框架及播放网络视频案例
前言:前面一篇我们介绍MediaPlayer相关方法,有人说,没有实际例子,看得不是很明白,今天在分析MediaPlayer时,顺带一个播放网络视频例子.可以自行试试.今天分析的都是下几篇介绍各个模块 ...
随机推荐
- 玩转Spring--消失的事务@Transactional
消失的事务 端午节前,组内在讨论一个问题: 一个没有加@Transactional注解的方法,去调用一个加了@Transactional的方法,会不会产生事务? 文字苍白,还是用代码说话. 先写一个@ ...
- alpha冲刺事后诸葛亮(团队)
alpha冲刺事后诸葛亮(团队) 课程名称:软件工程1916|W(福州大学) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标:完成Alpha冲刺的事后诸葛亮 团队队员 队员学号 ...
- jmeter对接口测试入参进行MD5加密的5种方式
在使用jmeter做测试的过程中,经常需要对请求的入参进行加密,下面列举几种常用的方法,以登录请求密码需要MD5加密为例. 虽然可以先把参数化的明文密码都先md5加密,而不是在登录前先执行加密,但是实 ...
- react native 开发问题分类
链接.编译.部署.运行: 一.语法问题:编译问题 二.链接问题: yarn add react-navigation react-native link react-navigation 三.部署问题 ...
- Numpy | 11 迭代数组
NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 实例1:使用 arange() 函数创建一个 2x3 ...
- A1139 | 玩成模拟题的DFS
考试的时候有思路了,但是没写完.这题起码要40min写,思路太诡异了. 刚刚写了一段,只过了一个case,得了18分,还行.明日再战. #include <stdio.h> #includ ...
- cf1173 D. Nauuo and Circle
链接 [cf]http://codeforces.com/contest/1175/problem/F) 思路 当1在1的位置做dp[i]为i的子树所有的方案. 一条性质是i的子树所占圆上的位置一定一 ...
- Zookeeper——一致性协议:Zab协议
Reference: https://www.jianshu.com/p/2bceacd60b8a 什么是Zab协议 Zab 协议的作用 Zab 协议原理 Zab 协议核心 Zab 协议内容 原子广播 ...
- shell for循环输出目录下的文件名
test.sh文件: #!/bin/bash for file in `ls`;do echo $file done 输出 bogon:test macname$ chmod +x test.sh b ...
- 5G 融合计费系统架构设计与实现(一)
5G 融合计费系统架构设计与实现(一) 随着5G商用临近,5G的各个子系统也在加紧研发调试,本人有兴全程参与5G中的融合计费系统(CCS)的设计.开发.联调工作.接下来将用几篇文章介绍我们在CCS实现 ...