微信H5同层播放器以及视频自动播放

iOS之前已经解决了视频播放默认全屏，且浮在页面最顶端的问题

playsinline

webkit-playsinline

这样就可以在视频之上进行一些操作，实现诸如弹幕、自定义播放控件等的效果。
但是安卓端却一直迟迟没有一种比较完美的解决方案，直到腾讯规范了H5同层播放器。
在安卓端启用H5同层播放器也是十分的简单：

x5-video-player-type="h5"

同时也可根据项目需要选择是否开启全屏的同层播放器：

x5-video-player-fullscreen="true"

有的时候因为视频的尺寸问题，设置全屏以后横向或者纵向会留有空边，此时再配合css属性：

object-fit:fill

这个属性是设置替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

另外近期有一种很流行的H5模式：一进入页面是一段很酷炫的视频，视频播放完毕后会有一个页面，上面承载一些业务需求的模块。这种H5大多数需要用到视频自动播放的功能，同样的，在iOS端已经有很多种hack方法解决（各种事件监听），网上有很多方法，这里记录了目前可用的两种。

第一种：使用微信的wx.ready事件，首先要引入一个js文件

<script src=" https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
页面里部署js代码：

function autoPlayAudio() {wx.config({// 配置信息, 即使不正确也能使用 wx.readydebug: false,appId: '',timestamp: 1,nonceStr: '',signature: '',jsApiList: []});wx.ready(function() {document.getElementById('media').play();//video标签id=media});
}
autoPlayAudio();

第二种:监听WeixinJSBridgeReady事件

var ua = navigator.userAgent;
var vi = document.getElementById('media'); document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {if (ua.indexOf("iPhone") > 0) {vi.play();} else if (ua.indexOf("Android") > 0) {vi.play();if (vi.currentTime === 0) {alert('1');//这里的定时器你可以不需要，也可以变成你需要的事件，而且也不一定在这个位置，主要是里面的playvi.play();}}
});

然而不幸的是，安卓端目前还没有稳定可用的视频自动播放方案，所以在设计时需考虑添加一个播放按钮，或者将播放事件绑定在touchstart上来近似的达到想要的效果。

微信H5同层播放器以及视频自动播放相关推荐

关于微信H5页面开发中音乐不自动播放的解决方法
我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...
H.265视频流媒体EasyPlayer播放器无法禁用自动播放的问题修复
H.265视频流媒体播放器EasyPlayer是TSINGSEE青犀视频推出的一款开放性和功能性都十分强大的播放器.EasyPlayer不仅支持RTSP.RTMP.HTTP.HLS.UDP.RTP.F ...
HTML5播放器：视频分段播放
2019独角兽企业重金招聘Python工程师标准>>> 本来想试试能不能越过Vip验证关卡,直接获取到视频资源地址的,但是发现拿到的地址只有几分钟的,或者十几分钟的! 想着这应该是视 ...
西瓜播放器xgplayer设置自动播放
前言: 用西瓜播放器xgplayer做rtsp直播流的播放,想要在页面加载时自动播放. 设置autoplay:ture,muted:ture,嘿没有成功! 在网上找了半天,设置手动触发play.pla ...
videojs 播放 hls 流视频自动播放(autoplay + muted)
1.它没有之前 rtmp转流视频不能隐藏标签和离开页面会报错这个不会 2.自动播放无效解决 autoplay+autoplay 代码 <!DOCTYPE html> <ht ...
解决手机微信浏览器视频自动播放和默认全屏问题
1.早期因为带宽和流量的因素,移动端浏览器禁止视频自动播放,现在现在流量便宜了.手机硬件越来越好了,部分可支持了 2.在移动端浏览器, video 在用户点击播放或者通过API video.play( ...
iOS 微信音视频自动播放原生接口WeixinJSBridge API(一些整理小技巧)
原文链接1:https://www.w3ctech.com/topic/1165 原文链接2:https://www.cnblogs.com/jasonduan/p/5635048.html 做一下整 ...
Android WebView加载H5音视频自动播放、关闭Activity停止播放
在Android加载H5,实现H5中的音视频自动播放在Activity中添加代码: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELL ...
android朋友圈自动播放,微信安卓7.0.5内测新版功能朋友圈视频自动播放关闭设置...
微信安卓7.0.5内测新版功能.微信又迎来了新的版本,虽然这次是小版本的更新,不过带来的新功能却挺好用的,一起来看看吧.这个版本的微信尚处于内测阶段想要尝鲜的用户还需要等等. 微信视频动态增强图片秒 ...

微信H5同层播放器以及视频自动播放

微信H5同层播放器以及视频自动播放相关推荐

最新文章

热门文章