VUEの下でビデオプロジェクトを再生

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>

• 取り付けられました

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