<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引入

<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基础语法12 内置模块 json,pickle,collections,openpyxl模块

    json模块 json模块: 是一个序列化模块. json: 是一个 “第三方” 的特殊数据格式. 可以将python数据类型 ----> json数据格式 ----> 字符串 ----& ...

  2. 瀑布流插件|jquery.masonry|使用demo

    Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...

  3. vscode代码折叠方法

    最近换用了vscode代码编辑器,在查看c源码的时候想折叠所有区域的代码,不知道快捷键是哪一个?查看了使用说明,快捷键如下: 1. 折叠所有区域代码的快捷: ctrl + k      ctrl + ...

  4. 使用VSCode开发Flutter

    前言 为什么使用VSCode? flutter官方推荐的编辑器有IDEA/Android Studio和VSCode, 之前开发Flutter用的IDEA, 不过IDEA始终比较重,于是换用VSCod ...

  5. swift函数式编程之compose

    func a(en:String) -> String { return en + "a"; } func b(en:String) -> String { retur ...

  6. 主语,that和which

    但除了名词以外还可以用代词.动名词.不定式短语,名词性从句.名词短语.表距离的地点副词短语等做主语. 1.名词作主语. The child is my daughter. 2.代词做主语. He al ...

  7. [Java] Spring boot 的maven设置阿里云仓库

    Spring boot 的maven设置阿里云仓库 打开根目录下的 pom.xml 文件,在对应为止出加入如下 红色 代码: <build> <plugins> <plu ...

  8. python开发面试问题

    python语法以及其他基础部分 可变与不可变类型: 浅拷贝与深拷贝的实现方式.区别:deepcopy如果你来设计,如何实现: __new__() 与 __init__()的区别: 你知道几种设计模式 ...

  9. ffmpeg结合SDL编写播放器(一)

    ffmpeg 工具是一个高效快速的命令行工具,进行视音频不同格式之间的转换. ffmpeg命令行 ffmpeg可以读取任意数量的输入“文件”(可以是常规文件,管道,网络流,抓取设备等)读取,由 -i ...

  10. GoCN每日新闻(2019-11-04)

    GoCN每日新闻(2019-11-04) GoCN每日新闻(2019-11-04)   1. Go中垃圾收集器是如何标记内存的 https://medium.com/a-journey-with-go ...