vue 视频播放

<template>

<div>

<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>