具体可参考云点播官方文档
(1).在页面中引入文件
在合适的地方引入播放器样式文件与脚本文件:
<link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频,需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<!--播放器脚本文件-->
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
如果在域名限制区域,可以引入以下链接:
<link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频,需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<!--播放器脚本文件-->
<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
暂不支持 VUE React 等框架的模块加载方式,可以通过 script 全局引入相关脚本的方式进行使用。
(2)放置播放器容器
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
(3)初始化:注意,这里需要加密,后台需返回相应参数
init(){
const video = this.detail.video
const params = {
business: this.business,
fileId: video.qcloud_file_id,
url: video.qcloud_url,
}
const result = await QcloudUgcvideoWebview(params); //此处为请求后台接口
if (result.code === 0 && result.data) {
this.player = TCPlayer('player-container-id', {
fileID: video.qcloud_file_id, // 请传入需要播放的视频filID 必须
appID: result.data.appId, // 请传入点播账号的appID 必须
t: result.data.t,
us: result.data.us,
sign: result.data.sign,
})
}
}
(4)这里有个问题,如果我进入这个页面,初始化后,去其他页面,然后再进视频页面,初始化会有问题,所以离开页面的时候需要销毁掉video
this.player.dispose()