微信环境下安卓是不能自动播放的,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 地址链接
网友评论