在开发微信项目时，有在项目中播放音频（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(); });