前言：当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=”https://juejin.im/post/7283806102859448383/www.example.com/poster.jpg”)
相对URL – 指向同个站点的URL (如： href=”https://juejin.im/post/7283806102859448383/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
-
本文作者： 尹安言
-
本文链接： www.cnblogs.com/redFeather/…
-
关于博主： 谈论和私信会在第一时间回复。或者直接私信我。
-
支援博主： 假如您觉得文章对您有协助，能够点击文章右下角 【引荐】 一下。
