要求

希望视频可以在手机上全屏内联播放，没有进度条等系统相关元素，可以添加自定义元素(跳过按钮等。)视频上面。

以下分为两种环境：手机微信终端和手机普通浏览器终端；两个系统：IOS和Android。

IOS设备

内嵌视频

在IOS上，应用程序使用系统自带的浏览器来渲染页面，因此在IOS设备上播放视频的效果是统一的。只需考虑不同的IOS版本之间是否有不一致的地方。在IOS上，一个普通的视频标签会弹出一个系统自带的播放器来全屏播放视频。播放器下部有默认的控制条。视频“浮动”在页面顶部，所有页面元素只能在视频下方。

在ios10 Safari中，视频增加了playsinline属性，可以让视频内嵌播放

参考文档：iOS ——网络工具包的新视频策略

IOS 10之前的版本支持webkit-playsinline，但是在IOs 9中，只能听到声音，看不到画面，所以需要添加iphone-内联-视频。

视频宽度=' ' web kit-playsinline=' true ' playsinline/video

这样，无论是微信浏览器还是其他浏览器，视频都可以在IOS上全屏内联播放。

自动播放

我们以为加载页面后视频会自动播放，但现实是残酷的。测试后发现安卓一直不能自动播放，IOS10以后的safari和微信浏览器都不能自动播放。不过，有个黑法。微信提供一个事件WexinJSBridgeReady。微信嵌入webview global的事件触发后，视频仍然可以自动播放。该方法可以在ios上实现微信视频的自动播放。但是安卓设备、手机QQ或者其他浏览器都建议应该触发用户触发触摸屏行为来实现播放。

//在WeixinJSBridgeReady事件中播放一次后暂停，使视频处于加载状态，为以后监控视频事件和播放过程做准备。

document . addeventlistener(' weixinsbridgeready '，function () {

video . play()；

video . pause()；

}，flase)

补充

视频在IOS上次播放时，如果网络较慢，视频从开始播放到显示画面会有一个短黑屏(处理视频源数据的时间)。为了避免黑屏，可以在视频上加一个div浮动层(放vidoe的海报)，然后用timeupdate方法监控，视频播放有图片的时候去掉浮动层。

video . addeventlistener(' time update '，function () {

//当视频currentTime大于0.1时，表示存在已有视频图片

if(！video . isplayed this . current time 0.1){

$('.海报')。hide()；

video.isPlayed=true

}

})

安卓设备

内嵌视频

移动浏览器中的视频元素相当特殊。早期无论是iOS还是Android浏览器，都是位于页面顶端，无法覆盖。后来这个问题在iOS下解决了，但是Android浏览器还是有同样的问题。X5是腾讯基于Webkit开发的渲染引擎，提供了一种称为“同层播放器”的特殊视频元素来解决蒙版问题。

H5层玩家访问主要有三个属性，两个事件回调

X5-video-player-type='h5 '通过声明通过视频属性“X5-video-player-type”启用了同一层的h5播放器，从而启用同一层的H5播放器。X5-视频播放器类型支持的值类型：h5

video src=' http://XXX . MP4 ' X5-video-player-type=' H5 '/

在全屏模式下播放视频时，X5-视频播放器-全屏将进入全屏模式

如果未声明此属性，则页面的视口区域为原始视口大小(在播放视频之前)。比如微信里，会有常驻标题栏。如果没有声明这个属性，这个标题栏的高度就不会给页面，播放时会均匀的分成两块(上黑块和下黑块)。

注意：声明此属性要求页面自身适应新的视口大小更改。您可以通过聆听调整大小事件来实现这一点

视频id=' test _ video ' src=' XXX ' X5-video-player-type=' H5 ' X5-video-player-full screen=' true '/

//监控窗口大小变化(调整大小)实现全屏

window.onresize=function(){

test _ video . style . width=window . inner width ' px '；

测试视频。风格。高度=窗口。内部高度“px”；

}

X5-视频-方向控制横竖屏（风景横屏，portraint竖屏)

功能：声明播放器支持的方向

可选值：风景横屏，portraint竖屏

默认值：portraint

视频id=' test _ video ' src=' XXX ' X5-视频播放器-type=' H5 ' X5-视频播放器-全屏=' true ' X5-视频-方向='纵向'/

X5视频输入全屏进入全屏通知支持版本： TBS中从=036900开始支持，QB中是=7.2开始支持

X5视频输入全屏：表示播放器进入全屏状态

x5videoexitfullscreen退出全屏通知x5videoexitfullscreen:表示播放器退出了全屏状态

使用方法与X5视频输入全屏类似

注意：某些手机这两个监听事件会相反。

同层播放器支持版本

东京广播公司微信：

东京广播公司内核=036849 后开始支持

美国联合航空公司(联合航空公司)示例：

Mozilla/5.0(LinuxAndroid 4。4 .4OPPO R7构建/ktu 84p)苹果WebKit/537.36(KHTML，喜欢Gecko)版本/4.0 chrome _ 6494 _ 1。html ' target=' _ blank ' chrome/37。0 .0 .0 Mobile MQ browser/6.8 TBS/036849 Safari/537.36 micro messenger/6。3 .27 .861网络类型

东京广播公司手Q:

东京广播公司内核=036855

安卓即时通信软件浏览器：

浏览器版本=7.1

美国联合航空公司(联合航空公司)示例：

用户代理： Mozilla/5.0(Linux \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

简单使用

超文本标记语言

' div class='播放器包装'

视频id=' video ' class=' video ' width=' ' web kit-playsinline=' true ' playsinline X5-video-player-type=' H5 ' X5-video-player-全屏=' true '

source src='video.mp4' /

/视频

/div

钢性铸铁

body {

边距：0；

padd : 0；

背景： # 000;

}。播放器包装{

宽度： ;

高度： 4.22毫米

}。玩家包装。视频{

宽度： ;

高度： ;

}

调整位置

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

对象位置：中心顶部；

}

var player=文档。getelementbyid(' video ')；

玩家。add event listener(' X5 video entfull screen '，function() {

//设为屏幕尺寸

玩家。风格。宽度=窗口。屏幕。宽度“px”；

玩家。风格。高度=窗口。屏幕。高度“px”；

document.body.classList.add('全屏');

}，false)；

玩家。AddEventListener(' X5 videoexitfulscreen '，function() {

玩家。风格。width=player。风格。height=

document.body.classList.remove('全屏');

}，false)

注意把录像元素的高设为屏幕高度时，要用「窗、屏、高」而不能用〔文件。文档元素。客户高度】因为后者不包含导航栏高度，将会导致无法满屏。

东京广播公司版本差异

/TBS 036849036849=TBS 036900036900=TBS

是否支持同层播放器否是是

退出全屏播放时触发X5视频输入全屏X5视频输出全屏

进入全屏播放时触发X5视频退出全屏X5视频进入全屏

设备一致性

录像播放控制

对于录像或者声音的等媒体元素，有一些方法，常用的有play()，pause()；

录像的事件

录像支持的事件很多，但在有些事件在不同的系统上跟预想的表现不一致，例如：

ios下监听“会玩”和canplaythrough '(是否已缓冲了足够的数据可以流畅播放),当加载时是不会触发的，即使预载='自动'也没用，但在个人计算机的铬调试器下和机器人下，是会在加载阶段就触发ios。需要播放后才会触发。

总之就是现在的视频标准还不尽完善，有很多坑要注意，要使用前更好自己亲测一遍。

在尝试比较之后，使用时间更新和结束这两个事件基本可以满足需求

视频。addeventlistener('时间更新'，函数(e) {

控制台。日志(视频。CurrentTime)//当前播放的进度

})

video.addEventListener('ended '，function (e) {

//播放结束时触发

})

视频居中

视频的高宽比是固定的，手机屏幕的高宽比不是。因此，为了使观看视频的体验尽可能一致，宽度是首先要适应的

函数handleResize() {

var sWidth=9

var sHeight=16

var width=window.innerWidth

var height=window.innerHeight

var marginTop=高度-(宽度*宽度)/宽度

边缘点=数学。圆形(边缘点)

if (marginTop -2) {

视频。$wrapper.css('marginTop '，marginTop/2 'px ')

} else {

视频。$wrapper.css('marginTop '，' 0 ')

}

}

如果视频不符合原始纵横比，您也可以使用“适合对象”属性来拉伸视频并填充所有视频

微信5视频

安装

建设

npm运行版本

偏差

npm运行开始

使用

npm istall微信-H5-视频-保存

从“微信5Video.min.js”导入微信5 video；

让微信5Video=新微信5Video(来源，选项)；

微信5 video . load()；

script src='/微信5Video.min.js'/script

脚本

让微信5Video=新微信5Video(来源，选项)；

微信5 video . load()；

/script

源视频源

{字符串}视频路径

{Object}视频路径和类型{url:' video.mp4 '，类型：' MP4'}

选项ci

上下文呈现容器

是否使用canvas播放视频，默认为false

无论预加载是否预加载，默认值都是真

播放视频时可以暂停蒙版，默认为真

海报视频封面，接收字符串参数，传入视频封面地址

播放按钮，true自动生成播放按钮，false需要自定义播放按钮，默认值为true

跳过按钮，true自动生成跳过按钮，false需要自定义跳过按钮，默认为false

AutoClose在播放视频后自动关闭，true在播放视频后自动移除渲染的内容，false在播放视频后返回视频的原始状态，默认值为false

填充是否延伸以填充整个屏幕，默认值为真

定向视频纵向或横向，默认为纵向

打开手机重力感应后，是否随手机转动而转动视频有效，默认为真

视频开始播放时的OnPlay()回调

视频暂停时的OnPause()回调

视频结束时的OnEnd()回调