video 属性注意点以及横屏展示

1. h5展示video属性相关属性编写

<div class="video-content">
          <video
            :id="`player${index}`"
            :src="item.toUrl"
            :poster="item.img"
            webkit-playsinline="true"
            x5-playsinline=""
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            playsinline="true"
            preload="auto"
            x-webkit-airplay="allow"
            x5-video-orientation="portrait"
            @click="onChange(index)"
            width="1920"
            height="1080"
          ></video>
        </div>

2.点击横屏按钮操作方法

horizontalBtn(index) {
      var myVideo = document.getElementById(`player${index}`);
      var w = document.documentElement.clientWidth || document.body.clientWidth;
      var h = document.documentElement.clientHeight || document.body.clientHeigth;
      var cha = Math.abs(h - w) / 2;
      myVideo.style.width = h + 'px';
      myVideo.style.height = w + 'px';
      myVideo.style.top = 0;
      myVideo.style.transform = 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)';
      this.horizontalShow = !this.horizontalShow;
    },

3.横屏后点击竖屏

backBtn(index) {
      var myVideo = document.getElementById(`player${index}`);
      myVideo.style.width = '100%';
      myVideo.style.height = '100%';
      myVideo.style.transform = 'translate(-' + 0 + 'px,' + 0 + 'px) rotate(0deg)';
      this.horizontalShow = !this.horizontalShow;
    }