1. <template>
  2. <div id="id_test_video" style="width:100%; height:auto;"></div>
  3. </template>
  4.  
  5. <script>
  6. export default {
  7. data() {
  8. return {
  9.  
  10. }
  11. },
  12. mounted(){
  13. this.play();
  14. },
  15. methods: {
  16. play(){
  17. var player = new TcPlayer("id_test_video", {
  18. "m3u8":"http://weblive.hebtv.com/live/hbws_bq/index.m3u8",
  19. "autoplay" :true,
  20. "poster": '', // 封面
  21. "width" : "1280",//视频的显示宽度,请尽量使用视频分辨率宽度
  22. "height" : "720"//视频的显示高度,请尽量使用视频分辨率高度
  23. });
  24. }
  25. }
  26. };
  27. </script>
  28.  
  29. <style>
  30.  
  31. </style>
  32.  
  33. // 如果需要清除dom 可以在div上加ref处理;this.$refs.xx.innerHtml = '';多次调用在paly()方法下面写上这句;

文档地址参考:https://cloud.tencent.com/document/product/454/7503

引入方式 https://www.npmjs.com/package/tcplayer;或index.html引入

<script src="http://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer.js" charset="utf-8"></script>

vue播放mu38视频兼容谷歌ie等浏览器的更多相关文章

  1. 页面中插入视频兼容ie8以上的浏览器

    有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...

  2. 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  3. html5结合flash实现视频文件在所有主流浏览器兼容播放

    来源:http://blog.csdn.net/freshlover/article/details/7535785/ 由于html5的出现,让网页中的视频.音频有了更加便捷的实现方式.但是video ...

  4. 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 ...

  5. 开源播放器 ijkplayer (一) :使用Ijkplayer播放直播视频

    1.ijkplayer 编码 IjkPlayer支持硬解码和软解码. 软解码时不会旋转视频角度这时需要你通过onInfo的what == IMediaPlayer.MEDIA_INFO_VIDEO_R ...

  6. Android 使用PLDroidPlayer播放网络视频 依据视频角度自己主动旋转

    近期由于项目需求 .须要播放网络视频 .于是乎 研究了一番 ,说说我遇到的那些坑 如今市面上有几个比較主流好用的第三方框架 Vitamio ( 体积比較大,有商业化风险 github:https:// ...

  7. [转] Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

  8. Android 播放在线视频

    首先开启电脑上的tomcat,将视频文件放在Tomcat 7.0\webapps\ROOT中 不用修改代码,直接输入地址即可,运行如下: 播放在线视频,必须要求手机支持当前的格式,才可以播放 播放的原 ...

  9. Android Multimedia框架总结(二)MediaPlayer框架及播放网络视频案例

    前言:前面一篇我们介绍MediaPlayer相关方法,有人说,没有实际例子,看得不是很明白,今天在分析MediaPlayer时,顺带一个播放网络视频例子.可以自行试试.今天分析的都是下几篇介绍各个模块 ...

随机推荐

  1. python中的raw string的使用

    背景 我们经常需要使用raw string,在应用过程中,比如要使字符串中带一些转义字符或者其他的一些符号,我们就需要保持我们的字符成为raw string. 实例 输入 s = 'fadfafa\n ...

  2. post Cache

    http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5 POST The POST method is used to request ...

  3. Ad-hoc--拉丁文--for this purpose only

    Ad-hoc这个词来源于拉丁语,在百度上解释为“for this purpose only”, 在wiki上解释为“for this”,其中文在wiki上被解释成包含“特设的.特定目的的(地).即席的 ...

  4. C++传递不定参函数

    定义不定参数函数,要用到下面这些宏: va_start(ap, farg): 初始化一个va_list变量ap,farg是第一个形参 va_arg(ap, type): 获取(下)一个type类型的参 ...

  5. Trie Service

    Description Build tries from a list of <word, freq> pairs. Save top 10 for each node. Example ...

  6. 简述tcp三次握手

    第一次握手:建立连接时,客户端向服务端发送SYN(同步序列编号),其中包含客户端的初始序号seq(序列号)=x,并进入SYN_SENT(请求连接)状态,等待服务器确认. 第二次握手:服务器收到请求后, ...

  7. poj2398 Toy Storage 计算几何,叉积,二分

    poj2398 Toy Storage 链接 poj 题目大意 这道题的大概意思是先输入6个数字:n,m,x1,y1,x2,y2.n代表卡片的数量,卡片竖直(或倾斜)放置在盒内,可把盒子分为n+1块区 ...

  8. 【luoguP2986】[USACO10MAR]伟大的奶牛聚集Great Cow Gathering

    题目链接 先把\(1\)作为根求每个子树的\(size\),算出把\(1\)作为集会点的代价,不难发现把集会点移动到\(u\)的儿子\(v\)上后的代价为原代价-\(v\)的\(size\)*边权+( ...

  9. nginx之rewrite及防盗链

    rewrite示例-自动跳转https 示例1:自动把首页的http转化成https location / { root /data/nginx/pc/html; index index.html; ...

  10. 使用charles对jmeter进行抓包