vue-video-player 手机端使用postcss-pxtorem自适应大小-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue-video-player 手机端使用postcss-pxtorem自适应大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。
<template>
  <div class='videomp4' @dblclick="clickFun()">
    <video-player class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                  @pause="onPlayerPause($event)"
                  @play="onPlayerPlay($event)"
                  @ended="onPlayerEnded($event)"
                  @timeupdate="onPlayerTimeupdate($event)"
                  @dblclick="clickFun()"
                  @canplay="onPlayerCanplay($event)"
    >
    </video-player>
<!--    <video-player options=""></video-player>-->
    <div class="tilt" @click="onPlayerClick"></div>
  </div>
</template>

<script>
// import 'video.js/dist/video-js.css'
//
// import  videoPlayer  from 'vue-video-player'

export default {
  name: "videoPlayerChild",
  components:{

  },

  data() {
    return {
      poster: '',
      isPlay: false,
      playerOptions: {
        // playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false,  // 如果为true,浏览器准备好时开始回放
        muted: false,     // 默认情况下将会消除任何音频。
        loop: false,      // 是否视频一结束就重新开始。
        playsinline: false,
        progressBar: 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: this.$store.state.drug.video // url地址
          // src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D' // url地址
        }],
        poster: '',  // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,           // 当前时间和持续时间的分隔符
          durationDisplay: true,       // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true       // 是否显示全屏按钮
        }
      }
    }
  },
  computed:{
    player () { return this.$refs.videoPlayer.player },
    playsinline () {
      let ua = navigator.userAgent.toLocaleLowerCase()
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null)
      { return false }
      else {
        // ios端
        return true
      }
    }
  },
  methods: {
    onPlayerTimeupdate(player) {
      // this.onUpdateAspectRatio();
      //判断移动端还是pc端
      if ("cordova" in window) {
        if (player.player_.isFullscreen_ == true) {
          screen.orientation.lock('landscape');
        } else {
          screen.orientation.lock('portrait');
        }
      }
    },
    onPlayerCanplay (player) {
      var ua = navigator.userAgent.toLocaleLowerCase()
      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 {
        $('body').find('video').attr('webkit-playsinline', 'true').attr('playsinline', 'true')
      }
    },

    onUpdateAspectRatio(){
      const pin = this.$getViewportSize()
      this.playerOptions.aspectRatio =
          pin.width+
          ':' +
          pin.height;
    },
    onPlayerPause($event) {
      console.log("暂停了.....")
      this.isPlay = false;
    },
    onPlayerPlay($event) {
      console.log("播放了.....")
      this.isPlay = true;
    },
    onPlayerEnded($event) {},
    // 暂停
    stopVieo(){
      console.log("暂停视频")
      this.$refs.videoPlayer.player.pause();
      this.isPlay = false;
    },
    onPlayerClick() {
      if (this.isPlay) {
        this.$refs.videoPlayer.player.pause();
        this.isPlay = false;
      } else {
        this.$refs.videoPlayer.player.play();
        this.isPlay = true;
      }
    },

    clickFun(){
      var clickid = 1;
      var timer = null;
      function a() {
        console.log('点击');
      }
      function b() {
        console.log('双击');
      }
      let startTime = new Date().getTime();

      if(clickid === 1) {
        clickid++;
        timer = setTimeout(function () {
          a(); // 单击事件触发
          clickid = 1;
        }, 300)
      }

      if(clickid === 2) {
        clickid ++ ;
      } else {
        var endTime = new Date().getTime();
        if ((endTime - startTime) < 300) {
          b(); // 双击事件
          clickid = 1;
          clearTimeout(timer);
        }
      }
    }
  },
  created() {
    // this.playerOptions.sources[0].src = this.url;
    // var vm = this;
    //页面初始获取高宽比，使播放器铺满窗口（视频还保持元尺寸，所以会出现黑边，这也是个问题），如果不需要铺满去电这个即可。使用fluid: true使用原视频的大小
    // const pin = this.$getViewportSize()
    // // this.width = pin.width
    // // this.height = pin.height
    // vm.playerOptions.aspectRatio =
    //     pin.width+
    //     ':' +
    //     pin.height;
    // console.log(vm.playerOptions.aspectRatio);
    // console.log(document.body.clientWidth);
    // console.log(document.body.clientHeight);
    this.onUpdateAspectRatio()
  },
  watch: {
    url(val){
      console.log("视屏地址")
      this.playerOptions.sources[0].src = val;
    }
  }
}
</script>

<style lang="scss" scoped>

.videomp4{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  /*object-fit: fill;*/
}

.tilt {
  width: 540px;
  height: 960px;
  opacity: 1;
  position: absolute;
  top: 480px;
  left: 270px;
  z-index: 9;
}

.video /*可不设置*/{
   margin: 48px 0;
}

::v-deep .video-js .vjs-control-bar{
  height: 140px;
}

.vjs-poster {
  background-color: #aaaaaa00;
}

/*播放按钮设置成宽高一致，圆形，居中*/
.vjs-custom-skin > .video-js .vjs-big-play-button {
  outline: none;
  border: none;
  width: 66px;
  height: 66px !important;
  background-color: rgba(0,0,0,0) !important;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: '';
  width: 66px;
  height: 66px;
  /*background: url('../assets/icon_stop@2x.png') no-repeat;*/
  background-size: 100% 100%;
}

/*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time{
  order:3 !important;
}

/* 进度条下面的播放按钮 */
::v-deep .vjs-custom-skin > .video-js .vjs-control-bar .vjs-play-control {
  margin: 0;
  line-height: 20px;
  height: 94px;
  padding: 50px 0 24px 0;
}

::v-deep .vjs-custom-skin > .video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder:before {
  position: absolute;
  font-size: 20px;
  top: 10px;
  left: 24px;
  width: 20px;
  height: 20px;
}

/** 时间组件 */
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-time-control {
  margin: 0;
  line-height: 20px;
  height: 94px;
  padding: 50px 0 24px 0;
  min-width: auto;
}

/* 时间-左 */
::v-deep .video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
  display: none;
  top: 16px;
  left: 72px;
}

 video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
  min-width: 32px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
  margin: 0 0 0 24px !important;
}

/* 下面控件的时间分割线 */
::v-deep .vjs-time-divider {
  display: none;
  line-height: 72px;
  top: 4px;
  left: 100.8px;
  //left: 106.8px;
  position: relative;
}

.vjs-custom-skin > .video-js .vjs-control-bar .vjs-time-divider {
  min-width: 6px;
  margin: 0 8px !important;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255,255,255,0.2);
  line-height: 20px;
}
/* 时间-右 */
::v-deep .video-js .vjs-duration, .vjs-no-flex .vjs-duration {
  display: none;
  top: 16px;
  left: 120px;
}

.video-js .vjs-duration, .vjs-no-flex .vjs-duration {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
}
.video-js .vjs-control-bar {
  height: 94px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%)
}
/*进度条单独放置一行*/
::v-deep .vjs-custom-skin > .video-js .vjs-progress-control.vjs-control{
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 68px;
  width: 100%;
  height: 2px;
  padding: 0 24px;
}
/*进度条 ⚪*/
::v-deep .vjs-custom-skin > .video-js .vjs-play-progress:before {
  top: -16px;
}


::v-deep .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before, .video-js .vjs-control:focus {
  text-shadow: 0em 0em 1em rgba(0,0,0,.1);
}

/* 进度条背景轨道 */
.video-js .vjs-slider{
  border-radius: 1em;
  background-color: rgba(255,255,255,0.2);
}
/* 加载进度条背景色 */
.video-js .vjs-load-progress {
  background: rgba(255,255,255,0.1);
}
/* 进度条进度 */
.vjs-custom-skin > .video-js .vjs-play-progress, .vjs-custom-skin > .video-js .vjs-volume-level{

  border-radius: 1px;
  background: #FFFFFF;
}

/*鼠标进入播放器后，播放按钮颜色会变*/
.video-js:hover .vjs-big-play-button, .vjs-custom-skin>.video-js .vjs-big-play-button:active, .vjs-custom-skin>.video-js .vjs-big-play-button:focus{
  background-color: rgba(0,0,0,0) !important;
}

/*control bar*/
.video-js .vjs-control-bar{
  background-color: rgba(0,0,0,0.2) !important;
}

/*点击按钮时不显示蓝色边框*/
.video-js .vjs-control-bar button{
  outline: none;
}
::v-deep .vjs-volume-panel .vjs-control .vjs-volume-panel-horizontal {
  width: 0;
  display: none;
}
/** 隐藏倍速 */
::v-deep .vjs-custom-skin > .video-js .vjs-control-bar .vjs-playback-rate {
  display: none;
}
/** 音量按钮 */
::v-deep .video-js .vjs-volume-panel {
  /* display: none; */
  position: absolute;
  right: 96px;
  //bottom: 24px;
  top: 10px;
  width: 20px;
  height: 20px;
}
.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: rgba(255,255,255,0.9);
}
.video-js .vjs-volume-bar {
  margin: 8px 16px 8px 0;
}
.video-js .vjs-volume-level {
  left: -21px;
}
/* 全屏组件 */
::v-deep .vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control {
  position: absolute;
  right: 48px;
  //bottom: 24px;
  top:10px;
  width: 20px;
  height: 20px;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .vjs-button > .vjs-icon-placeholder:before {
  text-align: right;
}
/* 全屏按钮图标 */
::v-deep .vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: '';
  width: 20px;
  height: 20px;
  /*background: url('../assets/icon_full@2x.png') no-repeat;*/
  background-size: 100% 100%;
}
/* 全屏播放后隐藏自定义全屏图标 */
.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
  /*background: url('');*/
  line-height: 20px;
  margin-right: 10px;
}

@media screen and ( min-width: 600px) {
  ::v-deep .video-js .vjs-control-bar{
    height: 120px;
  }

  ::v-deep .vjs-custom-skin > .video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder:before {
    position: absolute;
    font-size: 20px;
    top: 20px;
    left: 24px;
    width: 20px;
    height: 20px;
  }


  ::v-deep .video-js .vjs-control-bar{
    height: 130px;
  }

  /*进度条 ⚪*/
  ::v-deep .vjs-custom-skin > .video-js .vjs-play-progress:before {
    top: -8px;
  }

  .tilt {
    width: 540px;
    height: 960px;
    opacity: 1;
    position: absolute;
    top: 20px;
    left: 270px;
    z-index: 9;
  }
}

</style>