浏览器视频播放相关问题

<div class="videoBg">
    <video id="myVideo" muted  class="video" muted="muted" autoplay="autoplay"  preload="auto"    x5-playsinline="" playsinline="" webkit-playsinline="" >
        <source src="/videoMp4/sysp2020.mp4" type="video/mp4">
    </video>
 </div>

1. 案例背景
   在一个大的banner背景图下，pc短时使用视频作为背景，移动端不播放且不展示视频。
2. 常规操作
   video标签，添加自动播放属性。
3. 效果
   video标签无法自动播放
4. 原因
   经典的video不能自动播放
5. 解决
   video标签添加静音属性muted
6. 结果
   视频可以播放，but点击刷新后仍然不能播放（初始化了）

7. 再解决
   判断当前视频是否加载完成，如果加载完成可播放了，那么使用fadein()将改标签显示出来，达到加载的目的。

   $("#myVideo").on('canplay',function(){
       $(".videoBg").fadeIn();
       $("#myVideo").autoplay=true;
   });

   结果强制刷新的时候可以，别的不行。。。
   再解决：
   查了w3c video标签，看到了视频的就绪状态，于是想到了判断当前视频的就绪状态，如果已就绪或已有缓冲视频，那么就开始播放

   if( document.getElementById("myVideo").readyState == 4 || document.getElementById("myVideo").readyState == 1 ){
       $(".videoBg").fadeIn();
       $("#myVideo").autoplay=true;
       document.getElementById("myVideo").play()
   }

   终于解决。