美文网首页
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音频和视频相关

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

  • iOS - 视频和音频相关

    注:本文采用了第三方框架 Masonry 和 ReactiveCocoa,请自行导入 相关素材 第一.视频 第二....

  • h5音频和视频

    标签 audio video source 视频容器 容器文件,类似于压缩了一组文件--音频轨道--视频轨道--元...

  • iOS Camera开发指南

    AVFoundation 该框架框架包含视频相关的APIs和音频相关的APIs。 针对音频及视频,其主要提供的功能...

  • H5视频&音频

    视/音频的发展 标签的作用是在HTML页面中嵌入多媒体元素 标签的作用是在HTML页面中嵌入多媒体元素 问题:...

  • 关于H5(3)

    H5里音视频小例子: 1:视频:video(css) 2:video (js控制) 3:文件拖拽 4:音频:audio

  • H5视频与音频

    声明: 学习资源来源于 HTML 5 视频,本人只是学习一下. H5是HTML、XHTML以及HTML DOM的新...

  • 音频如何只保留播放按钮?

    众所周知,h5有视频(video)和音频(audio)两种标签。 标签的书写形式很简单,那如何只保留播放和暂停按钮...

  • 音频和视频

    首先,我们要理解两个概念:容器(container)和编解码器(codec)。1.视频容器音频文件或视频文件,都只...

  • HTML5新增相关标签的和属性

    总结一下今天学习的h5新增标签和属性 今天一共学了流、图标、响应式图像、音频视频、列表、h5超链接 定义流: 流表...

网友评论

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

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