浏览器视频播放相关问题

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

    终于解决。

你可能感兴趣的:(前端,javascript,html5)