使用：腾讯云，本文基于VUE2
需求：利用云点播制作视频
文档：https://cloud.tencent.com/document/product/266/58772
demo: https://tcplayer-1306264703.cos.ap-nanjing.myqcloud.com/build/index.html
步骤：
1.在页面中引入文件
(1) 先下载 js 文件，将文件放入到该项目中合适的位置
然后将该 js 文件引入到 .vue文件中。参考文档如下：
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css" rel="stylesheet">
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.2.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js"></script>
(2) 如下所示：
<!--分别将js和css文件引入到 .vue中-->
<script>
import { TCPlayer } from "../../../js/tcplayer.v4.2.1.min"; //路径
</script>
<style scoped>
@import "/static/css/tcplayer.min.css"; //路径
</style>
2.在需要展示播放器的页面位置放置播放器容器
<!--展示页面放在template中，内里用唯一父元素包裹-->
<template>
<div>
<video id="player-container-id" width="100%" height="100%"></video>
</div>
</template>
3.播放器初始化 (通过url地址)
<script>
export default{
data(){
return{
videoId: "", // 视频Id
playUrl: "", //视频地址
TCPlayer: null, //放入全局
}
},
methods:{
init(){
this.getDetail();
},
async getDetail(){
this.initTCPlayer();
}
initTCPlayer() {
this.TCPlayer = TCPlayer("player-container-id", {
plugins: {
ProgressMarker: true, //控制进度条显示
ContextMenu: {
mirror: true,
statistic: true,
},
DynamicWatermark: {
speed: 0.2,
content: " power system ",
},
},
controlBar: {
QualitySwitcherMenuButton: true,
},
autoplay: true,
language: "en",
});
this.TCPlayer.src(this.playUrl);
},
},
destroyed() {
//页面销毁，同时也销毁video.js对象
this.TCPlayer.dispose();
},
}
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/195014.html
