关于前端:浏览器视频播放相关问题

<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()
   }

   终于解决。