一. 引入tcplayer
在index.html页面引入script标签（适合传统项目）
script标签在如下网址查找
https://cloud.tencent.com/document/product/881/20207#.E5.AF.B9.E6.8E.A5.E6.94.BB.E7.95.A5下载tcplayer，放入vue项目中，在需要的页面直接引入或者在mian.js中引入。（在vue项目中推荐这种用法）
下载tcplayer.js地址如下
https://cloud.tencent.com/document/product/881/20207#es-module
下载后放入vue项目common文件夹下，若只在一个页面中使用可在使用的页面引入tcplayer，在最近的项目中我需要在多个页面使用tcplayer播放视频，监控和直播，而且有不同的需求，故在main.js中引用，方式如下
import { TcPlayer } from './common/TcPlayer-module-2.3.3'
Vue.prototype.TcPlayer = TcPlayer
二、将tcplayer封装成组件
- 只有一个视频播放时
<template>
<div
class="player"
:style="'width:' + widthHeigt[0] + '%' + 'height:' + widthHeigt[1] + '%'"
>
<div class="video" id="tcplayer" ref="tcplayer"></div>
</div>
</template>
<script>
// import { TcPlayer } from '../common/TcPlayer-module-2.3.3'
export default {
name: "TcPlayer",
components: {},
props: {
widthHeigt: {
type: Array,
default: () => {
return [300, 100];
}
},
playVideo: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
player: ""
};
},
created() {},
watch: {
playVideo: function(newVal) {
this.play();
}
},
mounted() {
this.play();
},
methods: {
play() {
let dom = document.getElementById("tcplayer");
// let dom = this.$refs.tcplayer;
// console.log(dom);
while (dom.hasChildNodes()) {
//当div下还存在子节点时 循环继续
dom.removeChild(dom.firstChild);
// this.player.destroy();
}
// console.log(JSON.stringify(this.playVideo));
let objectString = JSON.stringify(this.playVideo);
if (objectString != "{}") {
this.player = new this.TcPlayer("tcplayer", {
m3u8_sd: this.playVideo.m3u8_sd, //请替换成实际可用的播放地址
m3u8_hd: this.playVideo.m3u8_hd,
// flv_sd: this.playVideo.flv_sd, //请替换成实际可用的播放地址
// flv_hd: this.playVideo.flv_hd, //请替换成实际可用的播放地址
autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
// poster: "http://www.test.com/myimage.jpg",
flash: false,
h5_flv: true,
width: this.widthHeigt[0] + "%", //视频的显示宽度，请尽量使用视频分辨率宽度
height: this.widthHeigt[1] + "%", //视频的显示高度，请尽量使用视频分辨率高度
live: true,
volume: 0,
clarity: "sd",
wording: {
2: "摄像头连接网络不稳定",
1002: "摄像头连接网络不稳定，请切换清晰度"
}
});
}
}
},
destroyed() {
// 页面销毁，同时也销毁 TcPlayer
this.player.destroy();
}
};
</script>
<style lang="scss" scoped>
.player {
width: 100%;
height: 100%;
::v-deep .video {
width: 100%;
height: 100%;
.vcp-player {
width: 100%;
height: 100%;
video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
}
}
</style>
- 有多个视频播放时
<template>
<div
class="player"
:style="'width:' + widthHeigt[0] + '%;' + 'height:' + widthHeigt[1] + '%;'"
>
<div class="video" :id="'tcplayer' + index" ref="tcplayer"></div>
</div>
</template>
<script>
// import { TcPlayer } from '../common/TcPlayer-module-2.3.3'
export default {
name: "TcPlayerUnit",
components: {},
props: {
widthHeigt: {
type: Array,
default: () => {
return [300, 100];
}
},
playVideo: {
type: Object,
default: () => {
return {};
}
},
index: {
type: Number,
default: {
return: 0
}
}
},
data() {
return {
player: ""
};
},
created() {},
mounted() {
this.play();
},
watch: {
playVideo: function(newVal) {
// console.log(newVal);
this.play();
}
},
methods: {
play() {
let dom = document.getElementById("tcplayer" + this.index);
while (dom.hasChildNodes()) {
// 当存在子节点时 销毁视频
this.player.destroy();
}
// console.log(dom);
// console.log("tcplayer" + this.index);
this.player = new this.TcPlayer("tcplayer" + this.index, {
m3u8_sd: this.playVideo.m3u8_sd, //请替换成实际可用的播放地址
m3u8_hd: this.playVideo.m3u8_hd,
// flv_sd: this.playVideo.flv_sd, //请替换成实际可用的播放地址
// flv_hd: this.playVideo.flv_hd, //请替换成实际可用的播放地址
autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
// poster: "http://www.test.com/myimage.jpg",
flash: false,
h5_flv: true,
width: this.widthHeigt[0] + "%", //视频的显示宽度，请尽量使用视频分辨率宽度
height: this.widthHeigt[1] + "%", //视频的显示高度，请尽量使用视频分辨率高度
live: true,
volume: 0,
clarity: "sd",
controls: "none",
wording: {
2: "摄像头连接网络不稳定",
1002: "摄像头连接网络不稳定，请切换清晰度"
}
});
}
},
destroyed() {
// 页面销毁，同时也销毁 TcPlayer
this.player.destroy();
}
};
</script>
<style lang="scss" scoped>
.player {
::v-deep .video {
width: 100%;
height: 100%;
.vcp-player {
width: 100%;
height: 100%;
video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
}
}
</style>
三、引用组件
- 引用 TcPlayer 组件
<tc-player
ref="tcplayer"
:playVideo="playVideo"
:widthHeigt="[100, 100]"
></tc-player>
- 引用 TcPlayerUnit 组件
<tc-player-unit
:ref="'tcplayer' + index"
:index="index"
:playVideo="item"
:widthHeigt="[100, 100]"
></tc-player-unit>
【参考文章】
Web 视频播放器概述
