video 自动播放并带声音以及置顶

video 标签

<video
  v-if="item.type==2"
  webkit-playsinline="true"
  playsinline="true"
  x-webkit-airplay="true"
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint"
  style="object-fit:fill"
  preload="auto"
  muted="true"
  :src="pathUrl+'cms/'+item.content"
  class="avatar"
  controls="controls"
  loop="loop"
  id="movieVideo"
  @loadeddata="playVideo"
  controlsList=" nodownload noplaybackrate "
  ref="editVideo">您的浏览器不支持视频播放
</video>

功能1：基于浏览器会把video置顶处理

webkit-playsinline="true"
playsinline="true"
 x-webkit-airplay="true"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
style="object-fit:fill"
preload="auto"

功能2：去掉控件部分功能（如：三个点，下载等）

controlsList=" nodownload noplaybackrate "

功能3：视频加载完成后执行方法（这个执行就能放开声音，声音播放得交互才能播放）

 @loadeddata="playVideo"

    playVideo(){
      let vide = document.getElementById("movieVideo")
      vide.muted=false;
      vide.play();
    }

最后点击播放暂停我使用的是遮罩层来实现（我就把代码贴下）

  <i :style="{height:videoBox.boixHeight+ 'px', top:videoBox.top + '%'}" ></i>

data中字段

videoBox:{
    boixHeight:window.screen.height,
    top:50,
},

videEditVideo(){
      let vide = document.getElementById("editVideo")
      if(vide.paused){
        vide.play();
        vide.muted=false;
        this.videoBox.boixHeight=window.screen.height
        this.videoBox.top=50
      }else if(vide.play()){
        vide.pause();
        vide.muted=true;
        this.videoBox.boixHeight=vide.offsetHeight
        this.videoBox.top=40
      }
    }

.smallVideo_video i{width: 100%;position: fixed;opacity: 0;z-index: 1000;transform: translate(-50%, -50%);left: 50%;top: 50%;}

方法绑定在外层