vue通过腾讯Web（H5）播放器，实现直播点播

官档：https://cloud.tencent.com/document/product/454/7503

index.html 引入

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

不管直播点播，页面都是这个容器

<div id="tcplayer"></div>

1、直播

直播的展现挺简单的，把直播路径放进去就行了，但实现过程中，测试拉流推流挺麻烦的

tcpPlay() {var player = new TcPlayer('tcplayer', {"m3u8": this.anchor.pullUrl,   "autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的//"poster": this.anchor.cover,"width": '1110',       //480视频的显示宽度，请尽量使用视频分辨率宽度"height": '800',       //320视频的显示高度，请尽量使用视频分辨率高度"wording": {2: "未直播",2032: "未直播",  //"请求视频失败，请检查网络",2048: "未直播"   // "请求m3u8文件失败，可能是网络错误或者跨域问题"}});
},

效果

2、点播

项目中，这里的视频，只能试看10分钟，需要做一个播放到10分钟的拦截处理，暂停播放、提醒开通VIP之类的

兼容IE ：“flv” 也加上地址

tcpPlay(){let that = this,breakTime = 60*10             var player =  new TcPlayer('tcpplay', {"m3u8":  this.currentItem.url,"flv": this.currentItem.url, //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址"autoplay" : false,          //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的//"poster" : "http:          //www.test.com/myimage.jpg","width" :  '100%',           //480视频的显示宽度，请尽量使用视频分辨率宽度"height" : '560',            //320视频的显示高度，请尽量使用视频分辨率高度//"controls":"none",         //禁用拖拽"wording": {2:"",2032: "未直播",          //"请求视频失败，请检查网络",2048:"未直播"            //"请求m3u8文件失败，可能是网络错误或者跨域问题"},listener(msg){if(player.currentTime() > breakTime){     //播放，且超过10分钟，暂停且提示！                             player.pause()that.tipVisible = true}}})
}

效果这样

vue通过腾讯Web（H5）播放器，实现直播点播相关推荐

8K播放网络全终端播放器H5播放器网页直播/点播播放器EasyPlayer和vlc播放RTSP流地址不兼容问题排查解决
背景介绍 EasyPlayer实现了对遵循标准流媒体码流协议进行实时播放以及码流录制,在流的播放速度以及画质的解码显示上均做了大量深度的优化.支持Windows(支持多窗口.包含ActiveX,npA ...
免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题
免费视频直播.点播H5播放器SkeyeWebPlayer使用常见问题 1.用常见问题--配置iframe允许自动播放和全屏 SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可 ...
免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能
免费视频直播.点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能,最终效果如图所示: SkeyeWebPlayer播放器如何在vue-baidu ...
网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布，支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
支持H.265网页播放的H5播放器EasyPlayer.js发布了
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
熊猫TV直播H5播放器架构探索
本文来自熊猫TV音视频技术专家姜雨晴在LiveVideoStackCon 2017上的分享,并有LiveVideoStack整理成文.当下,打造一款播放器已经有比较好的开源实现,但熊猫TV为什么还要自 ...
flash和H5播放器
flash和H5 flash播放器缺点是需要在客户机安装Adobe Flash Player播放器,优点是flflash播放器已经很成熟了,并且浏览器对flflash支持也很好. H5播放器基于 ...
H5播放器内置播放视频（兼容绝大多数安卓和ios）
关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...
web音乐播放器总结
web音乐播放器总结前言项目暂时告一段落,胸中有股炽热之气望喷涌而出!忍不住吐槽,为什么程序员要加班啊,为什么产品下达deadline,就得把这生死剑架在程序员的脖子上.卧槽,听说程序员在国外是叫 ...
一个简洁的高自定义的H5播放器
问题:移动端的某些展示页面,经常遇到需要嵌入一个短视频的情况(其实还是某程序媛遇到的情况),通常这个视频上只有一个自定义的播放或者暂停按钮,样式简洁,如下图: 为了完成上述需求,写了一个非常简洁的H5 ...

vue通过腾讯Web（H5）播放器，实现直播点播

vue通过腾讯Web（H5）播放器，实现直播点播相关推荐

最新文章

热门文章

vue通过腾讯Web（H5）播放器 ，实现直播点播

vue通过腾讯Web（H5）播放器 ，实现直播点播相关推荐

最新文章

热门文章

vue通过腾讯Web（H5）播放器，实现直播点播

vue通过腾讯Web（H5）播放器，实现直播点播相关推荐