console
new Vue({
el: '#vueapp',
data() {
return {
video: null,
videoSrc: 'http://120.196.232.43:8088/rrs03.hw.gmcc.net/PLTV/651/224/3221226698/1.m3u8'
}
},
mounted() {
this.initVideo()
},
beforeDestroy() {
this.video.pause();
this.video.dispose();
},
computed: {
},
methods: {
initVideo() {
if (this.video) {
this.video.pause();
this.video.dispose();
}
this.video = videojs(
"my-video",
{
language: 'zh-CN',
autoplay: 'muted',
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
},
function() {
if (this.videoSrc) {
this.play();
}
}
);
}
}
})
<div id="vueapp">
<video
id="my-video"
class="video-js vjs-default-skin"
controls
preload="auto"
width="500px"
>
<source :src="videoSrc" type="application/x-mpegURL" />
</video>
</div>