今天在做一个简单的h5页面时候，需要做一个页面先放一个播放按钮，然后点击切换到视频的div去播放视频，然后等视频播放完毕再跳到提交表单的页面，当我用微信浏览器打开时候发现播放完毕视频，会弹出一对毫无关系的推荐视频来，无法调回页面了，体验很差，后来百度了一下，因为在 iOS 上，APP 都是使用的系统自带的浏览器进行页面渲染，video 播放视频的效果是统一的，只需要考虑不同的 iOS 版本是否有不一致的地方。在 iOS 上，播放视频默认会弹出一个播放器全屏播放视频，如下效果
播放器上下有的系统默认的控制栏，可以控制视频的播放进度、音量以及暂停或继续播放，播放视频时，视频会 “浮” 在页面上，页面上的所有元素都只能是在视频下面，这种效果显然不是我们想要的。
但好在 iOS 10 Safari 中，video新增了playsinline属性，可以使视频内联播放。
在webkit 的 blog上提到
A note about the playsinline attribute: this attribute has recently
been added to the HTML specification, and WebKit has adopted this new
attribute by unprefixing its legacy webkit-playsinline attribute. This
legacy attribute has been supported since iPhoneOS 4.0, and accordance
with our updated unprefixing policy, we’re pleased to have been able to
unprefix webkit-playsinline.
iOS 10 之前的版本支持 webkit-playsinline，但是加了这个属性后，在 iOS 9 的上出现只能听到声音不能看到画面的问题，最后使用的标签代码
<video id="video" class="video" preload="auto"playsinline src="http://wqs.jd.com/promote/superfestival/superfestival.mp4" width="1" height="1" type="video/mp4">
然后再加上这个库iphone-inline-video一起使用。
Android
在 Android 上，因为各个软件使用的浏览器渲染引擎不一样，所以视频播放的效果差异也很大，这里主要以微信为主。微信使用的是自带的渲染引擎 TBS，默认的播放效果
在播放器的下方也是会有控制栏，视频也会 “浮” 在页面上。而 Android 是不支持playsinline属性使视频内联播放的。但是，如果你看过一些腾讯的视频类 HTML5，会发现它们在微信里是可以内联播放的，而这个功能是需要申请加入白名单的。
不过新版的 �TBS 内核（>=036849）支持一个叫同层播放器的视频播放器，这个不需要申请白名单，只需给video设置两个属性x5-video-player-type="h5"和x5-video-player-fullscreen="true"，播放效果
到此我的问题得到了解决，至少不会出现推荐视频了，播放完毕再调用video标签的ended属性关闭当前div，打开表单div就完成了切换，提高了用户体验，不会中断整个h5的播放流程。
注：其中部分资料是来源于网络，如有侵权请联系本人进行删除
网友评论