h5 video 移动端使用记录

近期，公司产品需要做一次升级，升级内容中就包括要做产品的解读视频，来展示产品的特殊性。借此机会，研究了下H5的标签Video。

附上效果：

Video常用的属性有src、poster、preload、autoplay、loop、controls、width、height

1、src 和 poster

src用于指定视频的地址；poster用于指定一张图片，在当前视频数据无效时显示，可当作一张预览图。视频数据无效可能是视频正在加载或视频地址错误。

<video ref="video" poster="https://www.baidu.com/xxxx.jpg" src="https://video.mp4"/>

2、preload

用于定义视频是否预加载，属性有三个可选择的值：none、metadata、auto，默认为auto。

none：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
auto：全部预加载。

<video ref="video" poster="https://www.baidu.com/xxxx.jpg" src="https://video.mp4"  preload="none"/>

3、autoplay

用于设置视频是否自动播放，当出现表示自动播放，去掉是表示不自动播放。

<video ref="video" poster="https://www.baidu.com/xxxx.jpg" src="https://video.mp4"  preload="none" autoPlay />

4、loop

扫描二维码关注公众号，回复： 15054184 查看本文章

用于指定视频是否循环播放，同样是一个布尔属性，出现即表示循环反之则不播放。

5、controls

用于需要浏览器启用本身的播放控制栏，控制栏包括播放暂停控制，播放进度控制，音量控制

<video ref="video" poster="https://www.baidu.com/xxxx.jpg" src="https://video.mp4"  preload="none" controls/>

6、source标签

用于指定多个可选择的（浏览器最终只能选一个）视频文件地址，且只能在媒体标签没有使用src属性时使用。

浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。

此标签包含 src、type、media 三个属性。

src属性：用于指定媒体的地址，和video标签的一样。

type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。

webkit-playsinline playsinline：视频播放时局域播放，不脱离文档流。但是这个属性比较特别，需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。

是想做全屏直播或者全屏H5体验的用户，ios需要删除 webkit-playsinline 标签，android则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放。

x5-video-player-type：启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在android（包括微信）上生效，暂时不支持iOS。

x5-video-orientation：声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，这个属性需要x5-video-player-type开启H5模式

android的微信可能加上了上面的属性，还会出现上下有黑边，不能全屏的问题,需要给video加上object-fit: fill;的style属性。

ios黑屏问题

ios 在播放视频时，会出现短暂的黑屏，然后正常播放

在视频上层覆盖一个div并用一张视频第一帧图片来填充，制造播放前加载假象。然后监听事件 timeupdate ，视频播放有画面时移除这个div

<video
	ref="video" id="page-video"
	playsinline="" webkit-playsinline="true"
	x5-video-player-type="h5" x5-video-player-fullscreen="true"
	x5-video-orientation="portraint" x-webkit-airplay="true"
	raw-controls="true" preload="auto"
	src="a.mp4"
	@canplay="getVideoInfo" @timeupdate="getCurrentInfo"
/>
<!-- 遮盖层 -->
<div class="video-poster"></div>

var videoWindow = document.querySelector(".video-window")
var posterImg = document.querySelector(".video-poster")
document.getElementById("page-video").addEventListener('timeupdate', function(e) {
	if(document.getElementById("page-video").currentTime > 0.1){
	    posterImg.remove();
	}
})

一个完整的例子：

<video class="page-video"
     width="100%"　　　height="240px"  /*如果有封面，请设置高度*/     controls  /*这个属性规定浏览器为该视频提供播放控件*/  
     style="object-fit:fill"  /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/
     webkit-playsinline="true"  /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  
     x-webkit-airplay="true"  /*这个属性还不知道作用*/ 
     playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
     x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
     x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
     x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
     preload="auto" /*这个属性规定页面加载完成后载入视频*/ 
</video>

h5 video 移动端使用记录

ios黑屏问题

猜你喜欢