H5音频和视频相关

2019-07-05  本文已影响0人  Maxine708

微信环境下安卓是不能自动播放的,ios 可以引入微信的 api 资源监听WeixinJSBridgeReady执行播放。

html代码

写两套,一个 ios 显示,一个安卓显示

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
<video id='video' class="videoios" autoplay controls="controls" poster="http://goodyear-2019.oss-cn-hangzhou.aliyuncs.com/img/video.jpg" src='https://goodyear-2019.oss-cn-hangzhou.aliyuncs.com/clearthewayforyourworldC/dist/audio/1561465653847836.mp4' x5-video-orientation='portraint' webkit-playsinline playsinline x5-video-player-type='h5' x5-video-player-fullscreen='true'></video>
<video height="" class="videoadr" x5-playsinline="" playsinline="" webkit-playsinline="true"
                x-webkit-airplay="allow" style="object-fit:fill"
                poster="http://goodyear-2019.oss-cn-hangzhou.aliyuncs.com/img/video.jpg" autoplay="autoplay" id="video"
                controls="controls" preload="auto" muted="muted">
                <source
                    src="https://goodyear-2019.oss-cn-hangzhou.aliyuncs.com/clearthewayforyourworldC/dist/audio/1561465653847836.mp4"
                    type="video/mp4">
                </source>
            </video>

js 代码

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
    $(".videoios").show();
    $(".videoadr").hide();
    // alert("苹果环境")
} else {
    $(".videoios").hide();
    $(".videoadr").show();
    // alert("非苹果环境")
}

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
  
    //微信环境视频自动播放
        document.addEventListener("WeixinJSBridgeReady", function () {
            document.getElementById('video').play();
            videoElement2.muted = false;
        })
    //我公司的微信分享监测代码 自动播放要写在上面 别写在里面
    WeiXincontrol.ready(function () {
        wx_userinfo = WeiXincontrol.getUserinfo();
        tar_info.tar_userinfo = [wx_userinfo];
        shareControl.tarinit(tar_info);
        if (getUrlPramp('tar_channel')) {
            wx_share.link = `${Constant.wx_link}?tar_channel=${getUrlPramp('tar_channel')}`;
        }
        shareControl.wxready(wx_share);
        //处理涉及 token 的代码
    });

} else {
    //非微信环境

}

苹果手机可以自动播放
安卓手机浏览器环境可以
固特异自动播放视频带抽奖的完整版H5 地址链接

另外一种用JSMpeg方案的自动播放

上一篇 下一篇

猜你喜欢

热点阅读