微信H5自动播放音乐，视频解决方案

最新推荐文章于 2024-07-12 16:06:10 发布

king-w

最新推荐文章于 2024-07-12 16:06:10 发布

阅读量1.3w

点赞数 3

分类专栏：常用知识文章标签：微信H5开发微信H5视频自动播放微信H5音乐自动播放微信H5视频音乐同时自动播放

本文链接：https://blog.csdn.net/qq_33401924/article/details/80389870

版权

微信H5开发中遇到视频和音乐自动播放的挑战。本文介绍了一种适用于安卓和苹果设备的方法，利用WeixinJSBridge接口实现自动播放，并提供控制音量的选项。在安卓系统中，由于限制，可能需要用户交互来触发自动播放。

摘要由CSDN通过智能技术生成

微信的视频和音乐的自动播放问题一直都很让人很头疼，结合自身项目，最终写了一个在安卓苹果测试都好用的方法。

项目需求：

H5中插播两段视频，要求能自动播放
需要有背景音乐，能自动播放
能控制音乐和视频的声音静音

在微信中需要用到WeixinJSBridge这个接口，具体的可以百度了解一下，这个是微信游览器自带的接口API。

1.定义视频的自动播放事件

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

        return false;
    }