微信公众号网页 H5 video 标签自动播放

微信公众号网页 H5 video 标签自动播放

环境：微信公众号网页
需求：H5 video 标签自动播放视频

video 标签：

<video
	class="video-el"
    muted
    controls
    autoplay
    :src="videoUrl"
    :poster="posterUrl"
>
	对不起，您的浏览器不支持嵌入式视频！
</video>

方案一：

document.addEventListener(
	'touchstart',
	(() => {
		const videoEl = document.querySelector('.video-el')
		videoEl.play()
	})()
)

方案二：
WeixinJSBridge 方法引自 weixin-js-sdk 包

if (window.WeixinJSBridge) {
	videoPlay()
} else {
	document.addEventListener(
		'WeixinJSBridgeReady',
	    () => {
	      videoPlay()
	    },
	    false
	)
}

function videoPlay() {
	WeixinJSBridge.invoke('getNetworkType', {}, function() {
		const videoEl = document.querySelector('.video-el')
        videoEl.play()
	})
}

问题描述

在项目中不管使用方案一还是方案二，都出现了兼容性问题，初步预估为个人代码习惯导致 (refs 在 ios 端使用问题)。

解决方案

由于时间问题，索性在 Android 端使用方案一，ios 端使用方案二。

判断方式如下：

const u = navigator.userAgent
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios端