<template>
<div>
<video
id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered box"
controls
preload="none"
>
<source src="" type="application/x-mpegURL">
</video>
<el-button @click="checkVideoFirst">開始播放</el-button>
<el-button @click="checkVideo">點擊切換到CCTV3</el-button>
</div>
</template>
<script>
/* eslint-disable */
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
name: 'Video',
data () {
return {
}
},
methods:{
checkVideo() {
var myPlayer = videojs("my-video", {bigPlayButton: true,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true,
});
myPlayer.src([
{
type: "application/x-mpegURL",
src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" //CCTV3頻道
}
]);
myPlayer.play();
},
checkVideoFirst(){
var first = videojs("my-video",{
bigPlayButton: true,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true,
});
first.src([
{
type: "application/x-mpegURL",
src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" //CCTV3頻道
}
]);
first.play();
}
}
}
</script>
<style scoped>
.box {
width: 600px;
height: 600px;
border: 20px solid;
}
</style>