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

<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>

案例背景
在一个大的banner背景图下，pc短时应用视频作为背景，挪动端不播放且不展现视频。
惯例操作
video标签，增加自动播放属性。
成果
video标签无奈自动播放
起因
经典的video不能自动播放
解决
video标签增加静音属性muted
后果
视频能够播放，but点击刷新后依然不能播放（初始化了）
再解决
判断以后视频是否加载实现，如果加载实现可播放了，那么应用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()}
```
终于解决。