美文网首页
H5:设置video自动播放

H5:设置video自动播放

作者: 蝴蝶结199007 | 来源:发表于2021-01-26 12:40 被阅读0次

    HTML:

    <video id="myVideo" src="" poster="" autoplay muted preload controls="controls" webkit-playsinline="webkit-playsinline" playsinline>
      <!--<source type="video/mp4" src="" >-->
    </video>
    

    注意这里的 muted ,如果不加的话,在普通的浏览器当中是不会自动播放的,但是存在缺陷,自动播放的话会默认静音。

    在之前的项目里,我这里的界面是用web-view嵌套在微信小程序使用的,所以就将 muted 去掉了,然后通过微信的 WeixinJSBridgeReady 方法来唤起video的自动播放,可以实现有声播放。
    JS:

    autoPlayAudio("myVideo");
      
      function autoPlayAudio(id) {
            var video = document.getElementById(id);//video标签id=media
    
            if (window.WeixinJSBridge) {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    video.load();
                    video.play();
                }, false);
            } else {
                document.addEventListener("WeixinJSBridgeReady", function () {
                    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                        video.load();
                        video.play();
                    });
                }, false);
            }
            video.load();
            video.play();
    
            return false;
        }
    

    相关文章

      网友评论

          本文标题:H5:设置video自动播放

          本文链接:https://www.haomeiwen.com/subject/xlqezktx.html