video autoplay仿主流视频网站实现预览播放

video的autoplay失效

video作为html页面中的视频播放控件，基于保护手机端流量或者打扰用户的原因，在未产生某些有效交互前（click，keydown算，mousevoer/enter不算）等事件，某些浏览器上禁止有autoplay自动播放视频。但是对于禁止声音的muted属性video标签则可以。（未足够交互拒绝播放有声音的视频是浏览器规范，普遍无解决方案，只有设计引导）

自动播放

如图所示，是主流视频网站的鼠标移入的出发自动预览视频效果，因为鼠标mouseover不属于有效交互，所以早期是无法实现移上去自动播放，设置autoplay也不行。需要解决的是鼠标移入自动播放，提高体验。用户体验是产生交互移上去显示声音自动播放，无则显示静音图标提示点击。

鼠标移入自动播放

解决步骤：

1.设置muted属性实现自动播放

<video v-if="i==2" autoplay="autoplay" loop src="xx"></video>
//js
video.muted=true;//开启静音为了自动播放

2.监控页面click或者keydown等有效交互(滚动肯定触发按键或者鼠标click），存在开启声音正常播放,提高体验。

//监听事件 click/keydown
  document.querySelector("body").onclick = () => {
        doucment.querySelectorAll('video').forEach((ele)=>{
          ele.muted=false;//存在有效交互关闭静音，提升体验。
      })
  document.querySelector("body").onkeydown = () => {
        doucment.querySelectorAll('video').forEach((ele)=>{
          ele.muted=false;
      })
  };

3实际使用环境大多为无效交互，需要先设置静音状态。

提示静音引导点击

//绑定图标切换关闭/开启事件
volumeSwitch(type) {
      //确定当前的video静音属性，每个都是单独存在的通过key查找
      let preVideo = document.querySelectorAll(".pre-video")[this.preIndex];
      if (i == ''open) {
        // 开启声音
        preVideo.querySelector(".el-icon-check").style.display = "block";
        preVideo.querySelector(".el-icon-close").style.display = "none";
        preVideo.querySelector("video").muted = false;
      } else {
        // 关闭声音
        preVideo.querySelector(".el-icon-check").style.display = "none";
        preVideo.querySelector(".el-icon-close").style.display = "block";
        preVideo.querySelector("video").muted = true;
      }
    }

备注：autoplay自动播放失效根本原因在于无有效交互前的浏览器安全策略，隐私策略或许之前防止移动端自动播放视频大流量。本质上有声音video暂无解决，可以通过设计引导。