vue-video-player的使用总结

vue 视频播放

html

<video-player  class="video-player vjs-custom-skin"
                      ref="videoPlayer"
                       :options="playerOptions"
                       :playsinline="playsinline"
                       customEventName="customstatechangedeventname"
                       @play="onPlayerPlay($event)"
                       @pause="onPlayerPause($event)"
                       @canplay="onPlayerCanplay($event)"
                       @ready="playerReadied"
                       @click="outClean($event)">
        </video-player>

script

<script>
    import $ from 'jquery';
    export default {
        name: "VideoDetails",
        data(){
          return{
            content_id:"",
            alumnus_modular_id:"",
            title:"",
            Codetest:"",
            PicTitle:"",
            alumnusName:"",
            alumnusPic:"",
            lookNum:"",
            createTime:"",
            videoDescription:"",
            others:"",
            videoUrl:"",
            showV:false,
            alumnus_id:"",
            secretkey:"",
          // 视频播放
            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 : "application/x-mpegURL",
                src : 'https://belight-test.oss-cn-shanghai.aliyuncs.com/video/17/2019/04/01/14583968955367424.mp4'//url地址
              } ],
              poster : "../../common/img/Loading/background.png", //你的封面地址
              width: document.documentElement.clientWidth,
              notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar : {
                timeDivider : false,//当前时间和持续时间的分隔符
                durationDisplay : true,//显示持续时间
                remainingTimeDisplay : false,//是否显示剩余时间功能
                fullscreenToggle : true  //全屏按钮
              }
            }

          }
        },
    
      computed: {
        player() {
          return this.$refs.videoPlayer.player
        },

        playsinline(){
          var ua = navigator.userAgent.toLocaleLowerCase();
          //x5内核
          if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
            return false
          }else{
            //ios端
            return true
          }
        },

      },
      methods:{
        // 在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调 解决微信自动全屏
        onPlayerCanplay(player) {
          // console.log('player Canplay!', player)
          //解决自动全屏
          var ua = navigator.userAgent.toLocaleLowerCase();
          //x5内核
          if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
            $('body').find('video').attr('x-webkit-airplay',true).attr('x5-playsinline',true).attr('webkit-playsinline',true).attr('playsinline',true)
          }else{
            //ios端
            $('body').find('video').attr('webkit-playsinline',"true").attr('playsinline',"true")
          }
        },
        onPlayerPause(player) {},
        playerReadied(player) {
          setTimeout(()=>{
            this.showVideo ()
          },200)
        },
        onPlayerPlay(player) {
          this.showV=true;
        },
        showVideo () {
          let myPlayer = this.$refs.videoPlayer.player;
          myPlayer.src(this.videoUrl); //根据userType的不同展示不同的视频地址
        },

    
    
    
    }
</script>