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();

});

巴特西

Wechat 微信端正确播放audio、video的姿势

在开发中，我们会遇到的问题

对应的解决方案

audio、video在Android和IOS系统上的兼容性

video播放完成后，跳出浏览器广告

最新文章

热门文章