HTML5页面音视频在微信和app下自动播放的实现办法

2019-09-08 郑州网站建设  

现在大部分的H5页面都有实现播放背景音乐,播放视频功能。那如何实现自动播放呢?

纯H5页面在移动端中是无法实现自动播放,手机端浏览器大部分是禁用video和audio的autoplay功能并且,很多移动浏览器也不支持首次js调用play办法进行播放(只有用户手动点播放后暂停,然后用代码进行play可以)。

这样做主要是为了防止不必要的自动播放浪费流量。

以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放

XML/HTML Code复制内容到剪贴板

function autoPlayMusic() {   

    /* 自动播放音乐效果,解决浏览器或者APP自动播放问题 */   

    function musicInBrowserHandler() {   

        musicPlay(true);   

        document.body.removeEventListener('touchstart', musicInBrowserHandler);   

    }   

    document.body.addEventListener('touchstart', musicInBrowserHandler);   

    /* 自动播放音乐效果,解决微信自动播放问题 */   

    function musicInWeixinHandler() {   

        musicPlay(true);   

        document.addEventListener("WeixinJSBridgeReady", function () {   

            musicPlay(true);   

        }, false);   

        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);   

    }   

    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);   

}   

function musicPlay(isPlay) {   

    var media = document.getElementById('myMusic');   

    if (isPlay && media.paused) {   

        media.play();   

    }   

    if (!isPlay && !media.paused) {   

        media.pause();   

    }   


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1352.html转载请标明出处,谢谢合作!
标签:
  • 实现
  • 页面
  • 现在
  • H5
  • HTML5App
  • 大部分
  • 都有