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>

标签：视频,vue,false,src,hls,video,播放,true,videojs
来源： https://www.cnblogs.com/flyShare/p/14745790.html