html5 -audio-移動端如何自動播放
阿新 • • 發佈:2018-09-03
sta bsp 進行 tro roi 媒體 add 放音 頁面
最近在做一些活動類頁面或者類似於易企秀類型的輕應用經常遇到關於audio標簽的應用,對於audio相關的常用知識點以及一些相關的問題如下:
<audio id="audios" src="xxxx.mp3" autoplay controls="controls"> 您的瀏覽器不支持 audio 標簽。 </audio> 不支持audio元素的瀏覽器會顯示標簽內文字 audio相關屬性: src:音頻地址 autoplay:音頻加載完畢後自動播放。 controls:顯示播放控制條。 loop:播放完畢後會重復播放。 preload: auto 預加載音頻視頻。metadata 只預加載音頻視頻元數據。 有autoplay時此屬性無效。 js控制媒體 play() 播放 pause() 暫停 load() 重新加載 相關事件: oncanplay//在用戶可以開始播放視頻/音頻(audio/video)時觸發(頁面加載完畢) onerror //在音頻/視頻(audio/video)加載發生錯誤時觸發 ontimeupdate //在視頻/音頻(audio/video)當前的播放位置發送改變時觸發 event.currentTime onended //在視頻/音頻(audio/video)播放結束時觸發 微信端和手機不能支持自動播放問題 原因是:android ios 內部原因 為了節省流量,規定不自動播放音頻視頻 解決方法://--創建頁面監聽,等待微信端頁面加載完畢 觸發音頻播放 document.addEventListener(‘WeixinJSBridgeReady‘, function() { document.getElementById(‘audios‘).play() }) //--創建觸摸監聽,當瀏覽器打開頁面時,觸摸屏幕觸發事件,進行音頻播放 document.addEventListener(‘touchstart‘, function() { document.getElementById(‘audios‘).play() })
html5 -audio-移動端如何自動播放