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();
});
上一篇:redis 启动停止脚本


下一篇:android SDK manager 快速更新【转】