h5頁面使用音頻/視頻播放的經驗

// 錯誤寫法
$("video").play()
$("audio").play()
// 正確寫法播放視頻
$("video")[0].play()
$("audio")[0].play()

真的是**too young too naive~**本以爲這些音視頻的使用就到這了，沒想到後來還是遇到了坑。
第一個就是音頻播放audio.play(),在ios中不生效，那沒bgm，我的東家能樂意嗎？我自己都不樂意是吧，那就找吧，在網上找到都不可以，恰好有個同學跟我說了一個方法，就是將audio.play()放在wx.ready()中，果然可以，但是現在就是有個問題就是，bgm可能要等你的wx.config()配置成功之後，纔會悠揚又不失突然的傳進你的耳朵，那怎麼辦呢？我也不知道呢，哪位大神，若見過其他的解決方案，我先在這給您作揖了，跪求告知啊！！！！
第二個：就是視頻了，這個video的兼容性問題呀，真的是讓人頭大！我的解決方案是Android和ios各來一套煎餅果子，誰也不搶誰的。代碼如下：

var u = navigator.userAgent, app = navigator.appVersion
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isAndroid) {
	// alert("isAndroid");
	$(".videobox").append('<video id="mainvideo" class="andVideo" autoplay width="100%" x5-playsinline="" webkit-playsinline="" preload="auto"></video>')
	// 安卓的這個解決方案是有弊端的，就是 畢竟是放大的，那邊邊角角自然是hidden掉的，如果視頻邊角很重要，還是要另尋他法呀！
}
if (isIOS) {
	// alert("isIOS");
	$(".videobox").append('<video style="width:100%; height:100%; object-fit:fill" class="video iosVideo" autoplay="autoplay"  x5-playsinline playsinline webkit-playsinline x5-video-player-fullscreen="true"></video>')

}

video{  
	width: 100%;
    height: 100%; 
}  
video.andVideo::-webkit-media-controls-fullscreen-button {  
    display: none;  
}  
video.andVideo::-webkit-media-controls-play-button {  
    background: red;  
}  
video.andVideo::-webkit-media-controls-play-button {display: none}  
video.andVideo::-webkit-media-controls-timeline {display: none}  
video.andVideo::-webkit-media-controls-current-time-display{}  
video.andVideo::-webkit-media-controls-time-remaining-display {}  
video.andVideo::-webkit-media-controls-time-remaining-display {}  
video.andVideo::-webkit-media-controls-mute-button {}  
video.andVideo::-webkit-media-controls-toggle-closed-captions-button {}  
video.andVideo::-webkit-media-controls-volume-slider {}  
video.andVideo::-internal-media-controls-download-button {  
    display:none;  
}  
video.andVideo::-webkit-media-controls-enclosure {  
    overflow:hidden;  
}  
video.andVideo::-webkit-media-controls-panel {  
    width: calc(100% + 30px);  
}  
video.andVideo::-webkit-media-controls{
    display:none !important;
}
.video{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	display: block;
}

以上代碼，在Android中的顯示效果是，還在微信框框裏面，又可以全屏播放；在ios裏面就是全屏播放了，至此。
還有個疑問哦，這個video標籤上的衆多屬性，哪位大神比較清楚，麻煩給我指條路啊~
新手代碼粗鄙，還請多多指教~