微信H5视频全屏/不全屏/自动播放等相关问题解决

转载内容。

做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分……

第一步:设置 x5videoplayertype 启用Ｈ5同层播放器

通过video属性“x5videoplayertype”声明启用同层H5播放器
x5videoplayertype支持的值类型：h5

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

注意：这个属性需要在播放前设置好，播放之后设置无效

第二部：设置 x5videoplayerfullscreen 全屏方式

视频播放时将会进入到全屏模式
注：声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听 resize 事件
来实现

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

需要监听窗口大小变化(resize)实现全屏

window.onresize = function(){
test_video.style.width = window.innerWidth + "px";
test_video.style.height = window.innerHeight + "px";
}

第三部：设置 x5videoorientation 播放器横竖屏方向

横屏

<video x5-video-orientation="landscape"/>

竖屏

<video x5-video-orientation="portrait"/>

跟随手机自动旋转

<video x5-video-orientation="landscape|portrait"/>

注: 此属性只在声明了 x5videoplayertype="h5" 情况下生效

第三步：设置playsinline不全屏播放

<video src="xxx.mp4" x5-video-player-type="h5" playsinline webkit-playsinline="true"></video>

第四部：设置 WeixinJSBridgeReady 自动播放

HTML

<video src="xxx.mp4" autoplay x5-video-player-type="h5" />

document.addEventListener("WeixinJSBridgeReady", function() {
document.getElementById('video').play();
}, false);

注意：这个自动播放只能IOS支持，Android就无能为力了，但是也有解，Canvas可解，具体代码可以Google一下，比如:

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

或者一大胸弟写的：

https://www.bbsmax.com/A/ke5jVePV5r/

此致，那个敬礼。

来源：https://www.jianshu.com/p/e03407ef839d

微信H5视频全屏/不全屏/自动播放等相关问题解决相关推荐

关于微信H5页面开发中音乐不自动播放的解决方法
我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...
解决video视频在ios中不能自动播放的问题
视频在 safri 页面不能自动播放的原因: 因为ios中明确的指出等待用户的交互动作后才能播放video,也就是说没有得到用户的action就播放的话会被safri拦截解决方法如下: 因为这个是微 ...
H5 视频Video 元素及常用事件播放暂停初始化设置播放时间禁用下载等
H5 视频Video 元素及常用事件播放暂停初始化设置播放时间常用属性自动播放: autoplay 显示常用工具栏: controls 是否重复播放: loop 视频总长度: durati ...
video 视频在 ios 中不能自动播放的问题
video 视频在 ios 中不能自动播放原因: ios 中明确的指出等待用户的交互动作后才能播放 video,也就是说没有得到用户的 action 就播放的话会被 safri 拦截解决方法: 只 ...
微信小程序进入某一页面自动播放背景音乐
前言:微信小程序进入某一个页面自动播放背景音乐,当退出这个页面时,音乐关闭 wxml代码: <audioloopid="greetings"src="https:/ ...
安卓开发，拼接屏幕、大屏幕、户外广告无人值守循环播放视频，图片。开机自动播放，断电后自动播放，重起后自动播放功能
安卓开发,拼接屏幕.大屏幕.户外广告无人值守循环播放视频,图片.开机自动播放,断电后自动播放,重起后自动播放功能因客户要求,开机自动播放视频,不需要电脑控制,通电自动循环播放视频. 电脑成本太高,最 ...
video在微信和QQ浏览器中不全屏播放解决
最近公司做一个视频活动的HTML5页面,页面并不复杂,但是要求视频播放的时候不全屏.在网上看到好论坛类似的基本问题,以前有申请白名单的,在白名单的视频链接或者腾讯旗下的视频链接是原生播放,否则安卓会被 ...
EasyPlayer.js视频流媒体播放器互联网无插件微信H5直播方案—如何实现倍速播放？
需求分析一般对于一个播放器,应该支持如下几种显示模式: 等比例,最大化区域显示,不裁剪等比例,最大区域显示,裁剪拉伸显示,铺满全屏要实现这几种显示模式,其实只要对播放控件的布局进行些许调整即可 ...
微信H5视频抓娃娃，没你想的那么难，看完你也会
短短两周时间,在线抓娃娃从一个默默赚钱的行业变成了风口行业,从硬件到软件架构.从盈利到投资.从运营到推广,全方位解读都有了.唯独H5抓娃娃(特指移动web.微信抓娃娃),仍然很神秘. H5抓娃娃真的有 ...

微信H5视频全屏/不全屏/自动播放等相关问题解决

第一步:设置 x5videoplayertype 启用Ｈ5同层播放器

第二部：设置 x5videoplayerfullscreen 全屏方式

第三部：设置 x5videoorientation 播放器横竖屏方向

第三步：设置playsinline不全屏播放

第四部：设置 WeixinJSBridgeReady 自动播放

微信H5视频全屏/不全屏/自动播放等相关问题解决相关推荐

最新文章

热门文章

微信H5视频全屏/不全屏/自动播放等相关问题解决

第一步:设置 x5­video­player­type 启用Ｈ5同层播放器

第二部：设置 x5­video­player­fullscreen 全屏方式

第三部：设置 x5­video­orientation 播放器横竖屏方向

第三步：设置playsinline不全屏播放

第四部：设置 WeixinJSBridgeReady 自动播放

微信H5视频全屏/不全屏/自动播放等相关问题解决相关推荐

最新文章

热门文章

第一步:设置 x5videoplayertype 启用Ｈ5同层播放器

第二部：设置 x5videoplayerfullscreen 全屏方式

第三部：设置 x5videoorientation 播放器横竖屏方向