前言：当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

2.jpg

  • 本文作者：  尹安言

  • 本文链接：  www.cnblogs.com/redFeather/…

  • 关于博主：  谈论和私信会在第一时间回复。或者直接私信我。

  • 支援博主：  假如您觉得文章对您有协助，能够点击文章右下角 【引荐】 一下。