美文网首页
H5音频和视频相关

H5音频和视频相关

作者: Maxine708 | 来源:发表于2019-07-05 15:16 被阅读0次

    微信环境下安卓是不能自动播放的,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方案的自动播放

    相关文章

      网友评论

          本文标题:H5音频和视频相关

          本文链接:https://www.haomeiwen.com/subject/kmtmsftx.html