vue工程下播放视频

Posted 2020-12-01 wuxiaoshi

vue工程下播放视频

• 安装插件

  npm install --save video.js
  npm install --save videojs-contrib-hls

• 导入css

  import 'video.js/dist/video-js.css'

• 导入js

  import videojs from 'video.js'
  import 'videojs-contrib-hls

• 指定播放容器

  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
   <source src="http://xxx/1.m3u8" type="application/x-mpegURL">
  </video>

• 在mounted上

  videojs('my-video', {
       bigPlayButton: false,
       textTrackDisplay: false,
       posterImage: true,
       errorDisplay: false,
       controlBar: true
      }, 
      function () {
        this.play()
    }
  )