在開發微信項目時,有在項目中播放音頻(audio)和視頻(video)的需求;
在開發中,我們會遇到的問題
- audio、video在Android和IOS系統上的兼容性;
- video播放完成后,跳出瀏覽器廣告(audio不存在);
對應的解決方案
html代碼:
<audio id="audio" src="http://q.letwx.com/app/touchtotouch-build/resource/happy.mp3" loop="loop" preload></audio> <video id="video" src="http://gf.letwx.com/app/gfyoungcard-build/video/show.mp4" preload x5-video-player-type="h5" control></video>
x5-video-player-type="h5":解決video在IOS設備上的黑屏問題
audio、video在Android和IOS系統上的兼容性
// audio音頻 var audio = document.getElementById("audio"); if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { // IOS WeixinJSBridge.invoke('getNetworkType', {}, function (res) { audio.play(); }); }else{ // Android audio.play(); } // video視頻 var video= document.getElementById("video"); if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { // IOS WeixinJSBridge.invoke('getNetworkType', {}, function (res) { video.play(); }); }else{ // Android video.play(); }
video播放完成后,跳出瀏覽器廣告
$("#video").on('ended', function(){ $(this).remove(); });