audio与video控件/标签的隐藏，iso/Android下自动全屏播放，短暂黑屏问题

Posted 2021-01-06 敦煌定若远，一信动经年

（一）audio音频标签

<audio src="xxx.mp3"></audio>

（二）video视频标签

<video src="xxx.mp4"></video>

（三）使用video代替audio

　　　　(1) 有时候audio标签被屏蔽，不能被浏览器解释通过，可以选择使用video来代替：

<video src="xxx.mp3"></video>

　　　　(2) 若想要将音乐作为bgm自动、循环播放，可以这样设置：

<video src="xxx.mp3" autoplay loop controls></video>

　　　　(3) 隐藏播放控件、隐藏整个标签，可以这样设置：

<video src="xxx.mp3" autoplay loop  style="display: none;"></video>　　
//去掉controls属性，并添加display:none;样式

　　　　(4)  隐藏iso/android下自动全屏播放时的控件，可以在css中这样设置：

 video::-webkit-media-controls{
　　display:none !important;
}

　　　　(5) iso/Android下自动全屏播放，短暂黑屏问题，可以这样处理：

<video src="xxx.mp3" autoplay loop webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow" style="display: none;"></video>