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

60次阅读

共计 801 个字符，预计需要花费 3 分钟才能阅读完成。

<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()}
```
终于解决。