腾讯云文档：
https://cloud.tencent.com/document/product/881/20207
- Step1. 引入初始化脚本
nuxt中不能直接引用js，需要npm run build打包后，在dist目录中找到index.html，在<head></head>中加上js
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>;
- Step2. 在 HTML 中放置容器
<div class="v_wra"><div id="id_test_video" style="width:100%; height:10rem;"></div></div>
- Step3. 对接视频播放
var player = new TcPlayer("id_test_video", {
"m3u8": this.liveInfo.m3u8,
"flv": this.liveInfo.flv,
"autoplay": true,
"x5_playsinline": true, //不加这个的话，部分Android点击视频会全屏播放
// "live": true, //直播模式，Android点击视频会全屏播放
"volume": "1",
"poster": "/images/poster-1.jpg",
"width": "1280", //视频的显示宽度，请尽量使用视频分辨率宽度
"height": "640" //视频的显示高度，请尽量使用视频分辨率高度
});
记得加上css自适应
<style>
.vcp-player,
.vcp-player video {
width: 100%!important;
height: 10rem!important;
}
</style>
vue中也尝试同样实现，不过最后页面会报错TcPlayer not defined. 就算了吧。
网友评论