Wechat 微信端正确播放audiovideo的姿势

Posted 狂奔的小马扎

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Wechat 微信端正确播放audiovideo的姿势相关的知识,希望对你有一定的参考价值。

在开发微信项目时,有在项目中播放音频(audio)和视频(video)的需求;

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

  • audio、video在androidios系统上的兼容性;
  • 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 微信端正确播放audiovideo的姿势的主要内容,如果未能解决你的问题,请参考以下文章

ios为了用户隐私安全,禁止自动播放音频文件的解决办法(微信端)

在微信端使用video标签,播放结束会出现QQ浏览器推荐视频的解决办法(vue)

html 微信webview小窗播放视频解决方案,演示地址https://luke.cdc.im/wechat-inline-video/

LArea 微信端 地址选择

微信公众号消息回复

H5音乐播放方案