移动端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