视频播放器插件 vue-video-player

git项目地址：https://github.com/surmon-china/vue-video-player

1. 安装：npm install vue-video-player --save

2. 在main.js 或所需要插件的vue引入 前者是全局的  后者是按需使用（局部的）

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

   我是将 vue-video-player再封装了一层 方便 我在其它vue直接组件化使用 component/Video-player/index.vue 内容如下

3. <template>
     <div class="video-container-wrap">
       <div class="player" >
         <video-player
           ref="videoPlayer"
           :playsinline="false"
           :options="playerOptions"
           class="video-player vjs-custom-skin"
           @play="onPlayerPlay($event)"
           @pause="onPlayerPause($event)"
           @statechanged="playerStateChanged($event)"
         ></video-player>
       </div>
     </div>
   </template>
   <script>
   import { videoPlayer } from 'vue-video-player'
   import 'video.js/dist/video-js.css'
   export default {
     components: {
       videoPlayer
     },
     props: {
       videoUrl: { type: String, default: '' },
       state: { type: Boolean, default: false },
       poster: { type: String, default: '' },
       playType: { type: String, default: 'video/mp4' }
     },
     data() {
       return {
         playerOptions: {
           autoplay: false, // 如果true,浏览器准备好时开始回放。
           muted: false, // 默认情况下将会消除任何音频。
           loop: false, // 导致视频一结束就重新开始。
           preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
           language: 'en',
           aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
           fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
           sources: [
             {
               type: this.playType,
               src: this.videoUrl // 你的m3u8地址（必填）
             }
           ],
           poster: this.poster,
           width: document.documentElement.clientWidth,
           notSupportedMessage: this.$t('esell.noPlay') // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
         }
       }
     },
     computed: {
       player() {
         return this.$refs.videoPlayer.player
       }
     },
     watch: {
       // 更改视频源 videoUrl从弹出框组件传值
       videoUrl(val, oldVal) {
         if (val === oldVal) {
           return
         }
         if (val !== '') {
           this.playerOptions.sources[0].src = val
         }
       },
   
       // 弹出框关闭后暂停 否则一直在播放 state从弹出框组件传值
       state(val, oldVal) {
         if (val === oldVal) {
           return
         }
         this.$refs.videoPlayer.player.pause()
       },
       poster(val, oldVal) {
         // 检测它的变化，来改变视频封面
         if (val === oldVal) {
           return
         }
         this.playerOptions.poster = val
       }
     },
     methods: {
       onPlayerPlay(player) {},
       onPlayerPause(player) {},
       playerStateChanged(player) {}
     }
   }
   </script>
   <style lang="scss">
   .video-container-wrap {
     .player {
       .video-js .vjs-big-play-button {
         /*
         播放按钮换成圆形
        */
         height: 2em;
         width: 2em;
         line-height: 2em;
         border-radius: 1em;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
       }
     }
   }
   </style>
   

   4.配置数据说明

   playerOptions : {
       playbackRates: [0.7, 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: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
         src: "" //url地址
       }],
       poster: "../../static/images/test.jpg", //你的封面地址
       // width: document.documentElement.clientWidth, //播放器宽度
       notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
       controlBar: {
         timeDivider: true,
         durationDisplay: true,
         remainingTimeDisplay: false,
         fullscreenToggle: true  //全屏按钮
       }
   }

   5.使用

4.      <player 
           :video-url.sync="videoUrl"
           :state.sync="videoState"
           :poster.sync="poster"
           :play-type.sync="playType"></player>
   
   
   
   import player from '@/components/Video-player'

   6.效果