2021-05-07

vue中使用视频播放插件vue-video-player：

 此次项目中主要使用到在微信浏览器和普通浏览器使用视频播放，项目中主要解决的问题是：ios手机微信浏览器自动全屏播放视频 、播放完进度条无法重置、手机播放视频脱离文档流

1. npm install vue-video-player --save

2. html引入使用：

   1、引用：

   //main.js 与 组件中都要引用
   import { videoPlayer } from 'vue-video-player';
   import 'video.js/dist/video-js.css';
   

   2、注册组件：

    components: {
           videoPlayer,
       },

   3、使用组件：

    

   <video-player
                   class="video-player vjs-custom-skin"
                   ref="videoPlayer"
                   airplay="allow"
                   x-webkit-airplay="true"
                   webkit-playsinline="true"
                   :options="playerOptions"
                   :playsinline='playsinline'
                   @canplay="onPlayerCanplay($event)"
                   @ended="onPlayEnded($event)"
                   :events="events"
               >
               </video-player>

    

3. 播放器相关配置：

     //播放器相关参数
               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: 'video/mp4', // 类型
                           src: '', // url地址
                       },
                       {
                           type: 'video/ogg',
                       },
                   ],
                   poster: '', // 封面地址
                   notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
   
                   controlBar: {
                       timeDivider: true, // 当前时间和持续时间的分隔符
                       durationDisplay: true, // 显示持续时间
                       remainingTimeDisplay: false, // 是否显示剩余时间功能
                       fullscreenToggle: true, // 是否显示全屏按钮
                   },
               },
               events:['fullscreenchange']
           };

4. 视频播放结束视频播放结束将播放进度置为初始  @ended

    /*html*/
    <video-player
                   class="video-player vjs-custom-skin"
                   ref="videoPlayer"
                   airplay="allow"
                   x-webkit-airplay="true"
                   webkit-playsinline="true"
                   :options="playerOptions"
                   :playsinline='playsinline'
                   @canplay="onPlayerCanplay($event)"
                   @ended="onPlayEnded($event)"
                   :events="events"
               > 
   
   
   method
   //视频播放结束监听
           onPlayEnded(player){
              this.playerOptions={...this.playerOptions}//视频播放结束将播放进度置为初始
              console.log('player',player)
           },

    

5. 视频可播放对5内核和ios处理

    onPlayerCanplay(player) {
               console.log('player',player.state)
               var ua = navigator.userAgent.toLocaleLowerCase();
               if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                   // x5内核
                   let video = document.getElementsByTagName('video')[0];
                   console.log('video', video);
                   video.setAttribute('x5-video-player-type', 'h5'); // 声明启用同层H5播放器，控制网页内部同层播放，可以在视频上方显示html元素。
                   video.setAttribute('x5-video-orientation', 'landscape|portrait'); // 播放器支持的方向--跟随手机自动旋转，此属性只在声明了x5-video-player-type=”h5”情况下生效
                   // video.setAttribute('x5-video-player-fullscreen', 'true'); // 进入全屏通知
               } else {
                   // ios端
                   let video = document.getElementsByTagName('video')[0];
                   console.log('video', video);
                   video.setAttribute('webkit-playsinline', 'true'); //设置ios在微信中内联播放视频 ios9
                   video.setAttribute('playsinline', 'true'); //设置ios在微信中内联播放视频 ios10/ios11
               }
           },

    

6. 全部代码实现：

   <template>
       <div class="video-content" v-if="videoConfig.show">
           <div class="video-player-content">
               <video-player
                   class="video-player vjs-custom-skin"
                   ref="videoPlayer"
                   airplay="allow"
                   x-webkit-airplay="true"
                   webkit-playsinline="true"
                   :options="playerOptions"
                   :playsinline='playsinline'
                   @canplay="onPlayerCanplay($event)"
                   @ended="onPlayEnded($event)"
                   :events="events"
               >
               </video-player>
           </div>
       </div>
   </template>
   
   <script>
   //main.js 与 组件中都要引用
   import { videoPlayer } from 'vue-video-player';
   import 'video.js/dist/video-js.css';
   
   export default {
       name: 'VideoContent',
       props: {
           //播放源地址参数
           videoConfig: {
               type: Object,
               default: {},
           },
       },
       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: 'video/mp4', // 类型
                           src: '', // url地址
                       },
                       {
                           type: 'video/ogg',
                       },
                   ],
                   poster: '', // 封面地址
                   notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
   
                   controlBar: {
                       timeDivider: true, // 当前时间和持续时间的分隔符
                       durationDisplay: true, // 显示持续时间
                       remainingTimeDisplay: false, // 是否显示剩余时间功能
                       fullscreenToggle: true, // 是否显示全屏按钮
                   },
               },
               events:['fullscreenchange']
           };
       },
       components: {
           videoPlayer,
       },
       computed: {
           playsinline() {
               let ua = navigator.userAgent.toLocaleLowerCase();
               // x5内核
               if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                   // x5内核
                   return false;
               } else {
                   // ios端
                   return true;
               }
           },
       },
       mounted() {
           this.changeVideoSrc();
       },
       watch:{
          "videoConfig.show":function(newval){
              if(newval){
               this.playerOptions.sources[0]['src'] = this.videoConfig.src[0];
               this.playerOptions.poster = this.videoConfig.poster; 
              }
          }
       },
       methods: {
           //响应式改变播放源地址
           changeVideoSrc() {
               this.playerOptions.sources[0]['src'] = this.videoConfig.src[0];
               this.playerOptions.poster = this.videoConfig.poster; 
               // 'https://www.runoob.com/try/demo_source/movie.ogg'; 
               // 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
           },
           onPlayerCanplay(player) {
               console.log('player',player.state)
               var ua = navigator.userAgent.toLocaleLowerCase();
               if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                   // x5内核
                   let video = document.getElementsByTagName('video')[0];
                   console.log('video', video);
                   video.setAttribute('x5-video-player-type', 'h5'); // 声明启用同层H5播放器，控制网页内部同层播放，可以在视频上方显示html元素。
                   video.setAttribute('x5-video-orientation', 'landscape|portrait'); // 播放器支持的方向--跟随手机自动旋转，此属性只在声明了x5-video-player-type=”h5”情况下生效
                   // video.setAttribute('x5-video-player-fullscreen', 'true'); // 进入全屏通知
               } else {
                   // ios端
                   let video = document.getElementsByTagName('video')[0];
                   console.log('video', video);
                   video.setAttribute('webkit-playsinline', 'true'); //设置ios在微信中内联播放视频 ios9
                   video.setAttribute('playsinline', 'true'); //设置ios在微信中内联播放视频 ios10/ios11
               }
           },
           //视频播放结束监听
           onPlayEnded(player){
              this.playerOptions={...this.playerOptions}//视频播放结束将播放
              console.log('player',player)
           },
          onPlayerFullScreenchange (player) {
              console.log('player',player)
    }
           
       },
   };
   </script>
   
   <style scoped>
   .video-content{
       /* margin-top: 13px; */
       padding-top: 13px;
   }
   .video-player-content {
       position: relative;
   }
   /* .vjs-custom-skin{
     position: relative;
     height: 15rem;
   } */
   /deep/.video-js .vjs-big-play-button {
       top: 50%;
       left: 50%;
       margin-left: -1.5rem;
       margin-top: -1.5rem !important;
       height: 3rem !important;
       width: 3rem;
       border-radius: 1.5rem;
   }
   /deep/.video-js .vjs-big-play-button .vjs-icon-placeholder:before{
       top: -12px !important;
   }
   /deep/ .video-js .vjs-tech {
       top: 0px;
       left: 0px;
   }
   /* /deep/ .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3{
    position: relative;
    height: 230px;
   } */
   /*
    */
   /deep/ .video-js.vjs-fluid,
   .video-js.vjs-16-9,
   .video-js.vjs-4-3 {
       width: 100%;
       max-width: 100%;
       height: 100%;
       max-height: 100%;
   }
   /deep/ .vjs-poster{
       background-size: 100% auto;
   }
   </style>
   

    

7.