<div class="container">
 <p><em>单击下面的按钮将元素输入全屏模式</em></p>
 <div class="element" id="element"><p>我在全屏模式下改变颜色！</p></div>
 <br />
 <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
 全屏!
 </button>
</div>

.container {
 margin: 40px auto;
 max-width: 700px;
}
.element {
 padding: 20px;
 height: 300px;
 width: 100%;
 background-color: skyblue;
}
.element p {
 text-align: center;
 color: white;
 font-size: 3em;
}
.element:-ms-fullscreen p {
 visibility: visible;
}
.element:fullscreen {
 background-color: #e4708a;
 width: 100vw;
 height: 100vh;
}

在前面的话：

最近一波H5广告火爆整个互联网圈，身为圈内人，我们怎能 不！ 知！道！

:( 嘘！真不知道的也继续看下去，有收获 ↓ ）

So，搞懂这个并不难。

这篇文章将带你从头到尾了解H5广告的实现。

本文主要讲一下几个关键点

一、视频内联播放。

-- 想要营造一种文字与视频混排的现象，视频不要影响其他模块

二、视频去控件。

-- 交互视频，不能点击快/慢进或暂停哦

三、去控件全屏播放。

-- 想要模拟 明星给我打电话的体验，不能看到明显的视频播放器

四、视频自动播放。

-- 想要释放用户操作，打开链接就自动播放

五、黑屏问题。

-- 开始播放时，有一段黑屏时间，不能无缝衔接

六、其他属性和方法。

-- 喜欢一个技术，就要了解“她”的全部，这些你也看看呗

一、video 标签内联播放

Video 标签内联播放，需要添加属性：

webkit-playsinline="true" playsinline=“true”

通过上述代码可以达到苹果手机非全屏（内联）播放的效果，安卓上退出全屏后也可以通过底部的播放按钮非全屏播放。

而在 iphone上 默认是全屏播放的。

需要在 Obj-C 里，webview设置allowsInlineMediaPlayback属性为YES
webview.allowsInlineMediaPlayback = YES;

这个需要客户端的同学注意一下。

iOS 10 之前的版本支持 webkit-playsinline，但是加了这个属性后，在 iOS 9 上出现只能听到声音不能看到画面的问题。

为了 兼容ios8、9 需要再加上这个库 iphone-inline-video 一起使用。

[https://github.com/bfred-it/iphone-inline-video]

这里补充一下 iphone-inline-video 使用方法：

1.npm install --save iphone-inline-video

2.使用

iphone-inline-video在iOS 10上会自动禁用。

确保你使用这个playsinline属性。

二、播放视频去控件

实现上图效果，可添加CSS:

此方法仅适用于 非全屏下去掉控件。

三、去控件全屏播放

实现去控件全屏播放步骤：

1、全屏实现：将video视频宽高设置为 100% （全屏）

2、去控件参照上面说的第二步

当然，如果想要实现真正的全屏（顶部的导航消失），针对x5内核的可以使用 同层播放器。

新版的 TBS 内核（>=036849）支持同层播放器的视频播放器，且不需要申请白名单。

只需给 video 设置两个属性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"，播放效果自然服帖，效果如上图。

四、视频自动播放

设置属性 autoplay

But , Android始终不能自动播放，需要手动调用：

开发中，遇到一个问题，在微信中始终无法实现自动播放，因为IOS和微信都是要求用户有操作后才能自动播放影音视频。

这里，找到了一个hack方法：

微信中，可以监听 WeixinJSBridgeReady 事件，来实现视频的自动播放

五、黑屏问题

ios 在播放视频时，会出现短暂的黑屏（透屏），再正常显示。

为了避免不正常显示，我们可以这样做：

在视频上层覆盖一个 使用视频第一帧的图片填充的“div 块”，制造播放假象。然后监听事件 timeupdate ，视频播放有画面时移除这个“div块”

六、常用属性和事件

video 支持的属性和事件很多，但在有些属性和事件在不同的系统上跟预想的表现不一致，在尝试比较之后，以下基本可以满足需求：

1、autoplay 属性

<video autoplay="true" />

设置此属性，视频将自动播放。

2、preload 属性

<video preload="auto” />

规定是否预加载视频。

可能的值：

* auto - 当页面加载后载入整个视频

* meta - 当页面加载后只载入元数据

* none - 当页面加载后不载入视频

如果设置了 autoplay 属性，则忽略该属性。

3、timeupdate 事件

监听音频/视频（audio/video）的播放位置发生改变时触发。通常与 video.currentTime 一同使用

4、ended 事件

监听视频播放结束

后记：

网上关于video介绍的文章也挺多，通过搜集和自己的开发经验，这里整理了一些问题：

• 因为视频是一边播放一边加载，因此不但视频的大小会影响加载体验，视频的清晰度对加载体验影响更大。
• 建议视频1S平均大小范围控制在0.09~0.17M
• 视频格式建议使用mp4
• 如果 在android 环境中，想要隐藏 video 播放器，style属性 这样写：{ position: relative; display: none; z-index: -1; }

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

https://x5.tencent.com/tbs/guide/video.html

作者:大转转 - 张颖

来源:微信公众号:大转转FE

出处:https://mp.weixin.qq.com/s/Bz8Ra1coFirSnwsqacifVw

creenfull.js --浏览器全屏插件

screenfull.js是用于跨浏览器使用JavaScript Fullscreen API的简单包装器, 可让您将页面或任何元素全屏显示, 并且平滑浏览器实现差异,

github地址：https://github.com/sindresorhus/screenfull.js 。

压缩版下载地址: https://www.bootcdn.cn/screenfull.js/

项目中需要将后台浏览器的窗口全屏, 也就是我们点击一个按钮要实现按F11全屏的效果。

在HTML5中,W3C制定了关于全屏的API, 就可以实现全屏幕的效果, 也可以让页面中的图片,

视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);

document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);

实例:

http://robnyman.github.io/fullscreen/

html代码:

<p>
<button id="view-fullscreen">Fullscreen</button>
<button id="cancel-fullscreen">Cancel fullscreen</button>
</p>

js代码