zoukankan      html  css  js  c++  java
  • 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();
    });
  • 相关阅读:
    tcl中指定随机数种子
    redis的三种连接方式
    js代码统计table中某一列的值
    CRF从HMM的演进
    SVM中的一些问题
    bert损失函数
    SQL 注入笔记
    20200818 千锤百炼软工人第四十四天
    20200816 千锤百炼软工人第四十三天
    20200816 千锤百炼软工人第四十二天
  • 原文地址:https://www.cnblogs.com/minigrasshopper/p/8064771.html
Copyright © 2011-2022 走看看