文章记录TcPlayer.js接入vue
在public/index.html中引用
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
function showPlayer(url) {
var player = new TcPlayer('video', {
"m3u8": url, //请替换成实际可用的播放地址
"flv":url, //flv格式地址
"autoplay": true, //iOS 下 safari 浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
"live": true, //必选,设置视频是否为直播类型,将决定是否渲染时间轴等控件,以及区分点直播的处理逻辑 示例: true
"width": '100%', //视频的显示宽度,请尽量使用视频分辨率宽度
"videoFullscreen": 'auto',
"fullscreen": true,
"wording": {
2032: "请求视频失败,请检查网络",
2048: "请求文件失败,可能是网络错误或者跨域问题"
},
"listener": function(e) { //监听事件
if (e.type == "fullscreen") { //视频播放全屏可切换横屏
if (e.detail.isFullscreen == true) {
plus.screen.unlockOrientation("landscape-primary"); //横屏 mui写法
} else if (e.detail.isFullscreen == false) {
plus.screen.lockOrientation("portrait-primary");//强制竖屏 mui写法
}
}
}
});
}
如若想监听是否有直播
listener: function(msg) {
setTimeout(function(){
if(msg.src.playState == 'IDLE'){ //未开播
console.log('未直播----IDLE');
}else if(msg.src.playState == 'PLAYING'){ //开播(播放中)
// console.log('有推流----PLAYING');
}else if(msg.src.playState == 'STOP'){ //未直播
console.log('暂停' + '----' +'STOP')
}
},2000)
}
注意:player.destroy(); 及时销毁直播的DOM