微信内视频及普通浏览器内视频内联播放方案（

微信内视频及普通浏览器内视频内联播放方案 微信内视频及普通浏览器内视频内联播放方案 需求 IOS设备 内联视频 自动播放 补充 android设备 内联视频 同层播放器支持版本 简单使用 调整位置 TBS版本差异 设备一致性 video播放控制 video的事件 视频居中 wechatH5Video Install Use 需求

希望视频可以在手机上内联全屏播放、没有进度条等系统相关元素，可以在视频上方添加自定义元素（跳过按钮等）。
以下分为两种环境：手机微信端、手机普通浏览器端；两种系统：IOS和Android来具体讨论实现方案。

IOS设备 内联视频

在IOS上，APP都是使用系统自带的浏览器进行页面渲染，所以在IOS设备上video播放视频的效果是统一的。只需要考虑不同的IOS版本是否有不一致的地方。在IOS上普通的video标签会弹出一个系统自带播放器来全屏播放视频。播放器的下部有系统默认的控制栏，视频是“浮”在页面最上层的，所有的页面元素都只能在视频下面。

在ios10 Safari中，video新增了playsinline属性，可以使视频内联播放
参考文档：New <video> Policies for iOS —— WebKit

IOS 10 之前的版本支持webkit-playsinline，但是是在IOS9 �上会出现只能听到声音不能看到画面的问题，需要加上iphone-inline-video一起使用。

<video width="100%" webkit-playsinline="true" playsinline></video>

这样视频就可以在IOS系统上不管是微信浏览器还是其他浏览器实现内联全屏播放了。

自动播放

我们想着页面加载完视频就自动播放，但是现实是残酷的，经测发现android始终不能自动播放，IOS10后版本的safari和微信浏览器都不能自动播放。但是有个hack方法，微信提供一个事件WexinJSBridgeReady，在微信嵌入webview全局这个事件触发后，视频仍可以自动播放，这个方法可以实现ios端微信上的视频自动播放。但是android设备、手机QQ或者其他浏览器，建议引动用户触发触屏行为操作来实现播放。

// 在WeixinJSBridgeReady事件中播放一次后暂停，使视频处于加载状态，为后面监听video事件，流程播放做准备 document.addEventListener("WeixinJSBridgeReady", function () { video.play(); video.pause(); }, flase) 补充

当第一次播放视频的时候IOS端，如果网络慢，视频从开始播放到能展现画面会有短暂的黑屏（处理视频源数据的时间）,为了避免黑屏，可以在视频上加个div浮层（放vidoe的poster），然后用timeupdate方法监听，视频播放及有画面的时候再移除浮层

video.addEventListener('timeupdate', function () { // 当视频currentTime大于0.1时候表示已有视频画面 if(!video.isPlayed && this.currentTime > 0.1) { $('.poster').hide(); video.isPlayed = true; } }) android设备 内联视频

移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。
H5同层播放器接入主要有三个属性，两个事件回调

x5-video-player-type="h5" 启用H5同层播放器 通过video属性“x5-video-player-type”声明启用同层H5播放器。x5-video-player-type支持的值类型：h5

<video src="http://xxx.mp4" x5-video-player-type="h5"/> x5-video-player-fullscreen 全屏方式 视频播放时将会进入到全屏模式
如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）
注： 声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听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"; } x5-video-orientation 控制横竖屏（landscape横屏，portraint竖屏）
功能：声明播放器支持的方向
可选值： landscape 横屏, portraint竖屏
默认值：portraint

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

x5videoenterfullscreen进入全屏通知 支持版本: TBS中从>=036900开始支持，QB中是>=7.2开始支持
x5videoenterfullscreen: 表示播放器进入全屏状态

x5videoexitfullscreen退出全屏通知 x5videoexitfullscreen: 表示播放器退出了全屏状态
使用方法与x5videoenterfullscreen类似
注意：某些手机这两个监听事件会相反。

同层播放器支持版本

TBS微信:
TBS内核>=036849 后开始支持
UA示例：
Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML,like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

TBS手Q:
TBS内核>= 036855

Android QQ浏览器：
浏览器版本>=7.1
UA示例：
UserAgent: Mozilla/5.0 (Linux; U; Android 4.4.4; zhcn; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

简单使用

html

<div class="player-wrapper"> <video id="video" class="video" width="100%" webkit-playsinline="true" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true"> <source src="video.mp4" /> </video> </div>

css

body { margin: 0; padding: 0; background: #000; } .player-wrapper { width: 100%; height: 4.22rem; } .player-wrapper .video { width: 100%; height: 100%; } 调整位置

按照官方文档所述，只要修改video元素的「object-position」属性，就可以修改视频部分的显示位置，但实际上还要把video元素的宽高设成屏幕的宽高才行：

.fullscreen .video { object-position: center top; }

var player = document.getElementById('video'); player.addEventListener('x5videoenterfullscreen', function() { // 设为屏幕尺寸 player.style.width = window.screen.width + 'px'; player.style.height = window.screen.height + 'px'; document.body.classList.add('fullscreen'); }, false); player.addEventListener('x5videoexitfullscreen', function() { player.style.width = player.style.height = ''; document.body.classList.remove('fullscreen'); }, false)

注意把video元素的高设为屏幕高度时，要用「window.screen.height」而不能用「document.documentElement.clientHeight」，因为后者不包含导航栏高度，将会导致无法满屏。

TBS版本差异

/	TBS < 036849	036849 <= TBS < 036900	036900 <= TBS
是否支持同层播放器	否	是	是
退出全屏播放时触发		x5videoenterfullscreen	x5videoexitfullscreen
进入全屏播放时触发		x5videoexitfullscreen	x5videoenterfullscreen

设备一致性 video播放控制

对于video或者audio等媒体元素，有一些方法，常用的有play(),pause();

video的事件

video 支持的事件很多，但在有些事件在不同的系统上跟预想的表现不一致，例如：
ios下监听'canplay'和'canplaythrough'（是否已缓冲了足够的数据可以流畅播放）,当加载时是不会触发的，即使preload="auto"也没用，但在pc的chrome调试器下和android下，是会在加载阶段就触发。ios需要播放后才会触发。
总之就是现在的视频标准还不尽完善，有很多坑要注意，要使用前最好自己亲测一遍。
在尝试比较之后，使用 timeupdate 和 ended这两个事件基本可以满足需求

video.addEventListener('timeupdate', function (e) { console.log(video.currentTime) // 当前播放的进度 }) video.addEventListener('ended', function (e) { // 播放结束时触发 }) 视频居中

视频的宽高比是固定的，而手机的屏幕宽高比则不是，所以，为了让观看到的视频的体验尽可能一致，以宽度为先，进行适配

function handleResize() { var sWidth = 9 var sHeight = 16 var width = window.innerWidth var height = window.innerHeight var marginTop = height - (width * sHeight) / sWidth marginTop = Math.round(marginTop) if (marginTop < -2) { video.$wrapper.css('marginTop', marginTop / 2 + 'px') } else { video.$wrapper.css('marginTop', '0') } }

如果视频不按照原先宽高比也可以用object-fit属性使视频拉伸充满全部video

wechatH5Video Install

build

npm run build

dev

npm run start Use

npm istall wechat-h5-video --save

import wechatH5Video from 'wechatH5Video.min.js'; let wechatH5Video = new wechatH5Video(source,options); wechatH5Video.load();

<script src="/wechatH5Video.min.js"></script> <script> let wechatH5Video = new wechatH5Video(source,options); wechatH5Video.load(); </script>

source 视频源

{String} 视频路径 {Object} 视频路径和类型 { url: 'video.mp4', type: 'mp4' }

options配置项

context 渲染容器 canvas 是否采用canvas播放视频，默认false preload 是否预加载，默认true mask 播放视频时是否可以暂停，默认true poster 视频封面，接收字符串参数，传入视频封面地址 playBtn 播放按钮，true自动生成播放按钮，false需要自定义播放按钮，默认true jumpBtn 跳过按钮，true自动生成跳过按钮，false需要自定义跳过按钮，默认false autoClose 视频播放完自动关闭，true视频播放完自动remove掉渲染内容，false视频播放完回到视频最初状态，默认false fill 是否拉伸充满全屏，默认true orientation 视频横向还是垂直逻辑 （portrait or landscape），默认portrait isRotate 视频是否随手机翻转而翻转，开启手机重力感应后有效，默认true onPlay() 视频开始播放时回调 onPause() 视频暂停时回调 onEnd() 视频结束时回调