移动端H5 audio/video 标签遇到的一些问题总结

写在开头

  由于需求的不断完善，最近着手的 移动端 代码中需要加入音效和背景视频，第一反应就是audio，做完demo之后测试发现在 safari 浏览器中没有得到想要的效果，经过查阅资料发现很多前辈都遇见过这个坑，为了总结在这里做个笔记，也说一说我自己的代码中实际的问题和解决办法~

audio标签的问题

主要是safari浏览器中的一些限制；
1.每次只能播放一个音频。
意思就是说我在播放一个音频的时候，不能同时播放另一个音频，代码中没有这种需求，真实性有待考证。
2.不支持 preload 和 autoplay
safari中会忽略掉这两个属性，只有用户主动做出动作允许才会加载和自动播放，这个用户动作包括一些点击或者touchstart等等事件，也由于这个问题导致了页面做了很大改动。

解决办法

诱导用户进行一次页面的点击；通过touchstart事件和touchend事件触发音频播放；PC端的chrome浏览器也不能自动播放音频，也可以参考诱导用户触发click事件，然后再使用play方法播放。

document.addEventListener('touchstart',() => {
	//获取audio标签dom元素
	let bgm = document.querySelector('#bgm');
	bgm.laod();
})
document.addEventListener('touchend',() => {
	//获取audio标签dom元素
	let bgm = document.querySelector('#bgm');
	bgm.play();
})

video标签的问题

当初想使用video标签在移动端做背景视频播放，但video标签在各手机浏览器里兼容性不一（安卓的QQ浏览器竟然会将视频全屏播放。。ios的safari则不会自动播放，尽管加了autoplay）
所以移动端最好不要用背景视频，实在想达到效果可以用gif图代替
后来我发现在video标签上使用 webkit-playsinline=“true” playsinline 这两个属性可以让safari自动播放视频，其他浏览器没有测试过

 <video id="bgv" loop="loop" webkit-playsinline="true" playsinline muted class="bgv CC" autoplay poster="http://static.biligame.kr/girlcafegun/gw/h5/images/page1/bg1.jpg">
	<source src="./bgSrc.mp4" type="audio/mp4">
</video> 

audio和video标签的事件监听

audio和video都有共同的三个监听播放状态的事件，分别是play，pause，ended，可以在事件回调中执行一些操作，比如更改播放按钮的状态图片等等

document.querySelector('#bgm').addEventListener('play',() => {
        this.bgmOn = true;
  });
  document.querySelector('#bgm').addEventListener('pause',() => {
        this.bgmOn = false;
  });
  document.querySelector('#bgm').addEventListener('ended',() => {
        this.bgmOn = false;
  });