vue 视频播放

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