一、TencentPlayer播放器的封装
- 由于腾讯云点播的文档提供的播放器sdk的使用方法对于vue并不适用,所以参考官网提供的方法对播放器sdk做一个组件的封装,让vue能方便的使用。
- 新建一个TencentPlayer.vue,作为一个组件引用
// TencentPlayer.vue
<template>
<video
:id='tcPlayerId'
class='tencent-player'
width='1100'
preload='auto'
playsinline
webkit-playsinline
></video>
</template>
<script>
export default {
name: 'TencentPlayer',
data() {
return {
tcPlayerId: 'tcPlayer' + Date.now(),
player: null,
}
},
props: {
options: {
type: Object,
default() {
return {};
},
},
},
watch: {
options: {
handler(newV, oldV) {
this.$nextTick(() => {
this.loadJS();
});
},
immediate: true,
deep: true,
},
},
methods: {
onoptio