解决原生H5 video视频无法在微信内置游览器和其他游览器中自动播放视频的问题

在需要自动播放视频的地方调用即可

//html
     <video id="videoref" style="width: 100%;height: 100%;" controls autoplay="true" loop playsinline
              preload="metadata"
              src="https://xxx/xxx.mp4"
              poster="./photo/xxx.jpg"></video>

//js
 function playVideo() {
		let video = document.getElementById('videoref');
		if (window.WeixinJSBridge) {
		    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
		        video.play()
		    }, false);
		} else {
		    document.addEventListener("WeixinJSBridgeReady", function () {
		        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
		            video.play()
		        });
		    }, false);
		}
}

逐行解释
if (window.WeixinJSBridge):
检查全局对象 window 中是否存在名为 WeixinJSBridge 的属性。这是微信内置浏览器提供的一个 JavaScript 桥接对象，用于与微信客户端进行交互。如果这个对象存在，意味着微信 JS-SDK 已经加载完毕并且可以使用。
WeixinJSBridge.invoke(‘getNetworkType’, {}, function (e) { … }, false);:
如果 WeixinJSBridge 存在，则调用其 invoke 方法来执行微信提供的特定功能。这里调用的是 ‘getNetworkType’ API，用来获取当前设备的网络类型（如 Wi-Fi、2G/3G/4G 等）。
第二个参数是一个空对象 {}，表示没有传递额外的数据给该 API。
第三个参数是一个回调函数，当 API 调用完成后会执行这个函数，并传入响应数据 e。
最后一个参数 false 表示不使用异步方式调用 API（尽管这里的参数实际上并不影响调用方式，因为 invoke 方法总是异步的）。
else:
如果 WeixinJSBridge 不存在，则进入这个分支。这通常发生在页面加载时微信 JS-SDK 尚未准备好。
document.addEventListener(“WeixinJSBridgeReady”, function () { … }, false);:
添加一个事件监听器，监听名为 “WeixinJSBridgeReady” 的事件。这个事件会在微信 JS-SDK 加载完成并准备好之后触发。
当这个事件被触发时，执行回调函数中的代码。
WeixinJSBridge.invoke(‘getNetworkType’, {}, function (e) { … });:
回调函数内部再次调用了 WeixinJSBridge.invoke(‘getNetworkType’, …), 这次是在确认微信 JS-SDK 已经准备好的情况下调用的。
内部逻辑与前面相同：尝试获取网络类型并在成功后播放视频。
总结
这段代码的主要目的是确保视频只在微信 JS-SDK 准备好并且获取了网络类型信息之后才开始播放。它通过检查 WeixinJSBridge 是否存在来判断 SDK 是否已经加载。如果已经加载，则直接调用 getNetworkType 并播放视频；如果没有加载，则等待 WeixinJSBridgeReady 事件后再执行相同的逻辑。

这种做法有助于避免在微信环境中由于 SDK 未准备好而导致的视频播放失败问题。