vueにvideoプラグインを使用したvue-video-playerの例

一、プラグインのインストール

npm install vue-video-player --save

二、プラグインの設定
main.jsにグローバルプラグインを設定します。

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

三、プラグインの使用
vueコンポーネントのプログラムは以下の通りです。

<template>
  <!--          -->
  <div class="input_video">
  <video-player class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
  ></video-player>
  </div>
</template>
<script>
  export default {
    name : 'BusImg',
    data () {
      return {
        //     
        playerOptions : {
          playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //        
          autoplay : false, //  true,           。
          muted : false, //              。
          loop : false, //           。
          preload : 'auto', //       <video>                 。auto         ,        （       ）
          language : 'zh-CN',
          aspectRatio : '16:9', //           ，                 。          -           （  "16:9" "4:3"）
          fluid : true, //  true ，Video.js player       。    ，             。
          sources : [ {
            type : "",
            src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url  
          } ],
          poster : "", //      
          // width: document.documentElement.clientWidth,
          notSupportedMessage : '        ，     ', //    Video.js               。
          controlBar : {
            timeDivider : true,//             
            durationDisplay : true,//      
            remainingTimeDisplay : false,//          
            fullscreenToggle : true //    
          }
        }
      }
    }
  }
</script>
<style>
  .input_video{
    width: 400px;
    height: 400px;
    margin: 0 auto;

  }
</style>

四、結果
結果は図の通りです。

vue-video-playerのnpmコミュニティアドレス：https://www.npmjs.com/package/vue-video-player
以上がvideoプラグインvue-video-playerの使用例の詳細です。vueについてはvideoプラグインを使用しています。他の関連記事に注目してください。