Wechat 微信端正確播放audio、video的姿勢


在開發微信項目時,有在項目中播放音頻(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();
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM