解决video在ios中播放自动全屏问题

前言：当video在ios上面点击播放会自动全屏播放，这个体验有点不好，因为上面有全屏播放提示，如果用户真的需要全屏可以自己点击全屏播放按钮，所以需要禁止video在ios系统自动全屏播放。

一、解决

ios中：

只需要在标签里面写上：webkit-playsinline='true'    playsinline='true'

android中：

android端部分视频也会存在自动全屏问题，添加：x5-video-player-type="h5-page"

二、延伸：

1、标签定义：

<video> 标签定义视频，比如电影片段或其他视频流，可以放置视频资源，并添加视频控件。

支持的浏览器：Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。

注：Internet Explorer 8 以及更早的版本不支持 <video> 标签。

eg：

<video controls="controls" src="images/video.mp4"  id="Video" poster="images/vImg.jpg" preload="auto" loop="true" width="100%" height="auto" webkit-playsinline='true'  playsinline='true' ></video>

2、video属性：

属性名	具体介绍
src	要播放的视频的 URL
poster	视频封面；没有播放时显示的图片，规定视频正在下载时显示的图像，直到用户点击播放按钮。
preoad	预加载。如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
autoplay	自动播放；视频在就绪后马上播放。
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	如果出现该属性，视频的音频输出为静音。
controls	如果出现该属性，则向用户显示控件，比如播放按钮，浏览器自带的控制条
width	设置视频播放器的宽度
height	设置视频播放器的高度

3、poster的具体介绍：

poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。所有主流浏览器都支持 poster 属性。

如果未设置该属性，则使用视频的第一帧来代替。

注：测试了一下，android若设置该属性但未设置图片，是会显示第一帧，但ios不行，会显示空白

所以如果需要显示视频封面且适配俩端，不能只写  <video  poster> </video>，需要指定封面图片：<video  poster=‘url’> </video>

其中 url值 描述URL指定图片文件的URL。可能值：

绝对URL - 指向另外一个站点URL (如：href="www.example.com/poster.jpg")

相对URL - 指向同个站点的URL (如： href="poster.jpg")

eg:

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

EOF