https://www.npmjs.com/package/v-tcplayer
<div>
<VTcPlayer ref="tcPlayer" :options="options" @load="onLoad" @play="onPlay" />
<V-TcPlayer :options="options" elmId="globalTcPlayer" />
</div>
export default {
data () {
options: {
hlsUrl: 'https://lib.baomitu.com/hls.js/0.8.9/hls.min.js', // 0.0.5增加
width: 800,
height: 450,
m3u8: 'http://1251203672.vod2.myqcloud.com/43464984vodtransgzp1251203672/957853b25285890790261970276/v.f230.m3u8',//动态渲染数据时候<VTcPlayer v-if="isshow" ref="tcPlayer" :options="options" @load="onLoad" @play="onPlay" />
},
isshow:false //加载完成数据后，再绑定为true
},
components: {
VTcPlayer, //组件
},
computed: {
player () {
// tcPlayer实例
return this.$refs.tcPlayer.vTcPlayer
},
},
method: {
play () {
this.player.play()
},
getCurrentTime () {
this.player.currentTime()
},
loadNewVideo (url) {
this.player.load(url)
},
},
}
参数说明
options可传入TcPlayer所有参数，事件监听参数listener推荐不传，通过@event方式绑定。 若页面内有多个视频，需传参数elmId