iphone H5视频行内播放（禁止全屏播放）

一般用户都知道，ios在网页点击视频播放时，视频会弹出全屏播放框。

video标签的playsinline、webkit-playsinline标记根本就不会起作用。
还有传闻说对于没有声音的视频不会全屏播放，这个好像只有对IOS10版本才会生效吧（身边没有IOS10，没有办法测试）。因此这个传闻也没有什么用处。

我见过两个库成功使ios视频在网页行内播放，一个是canvasVideo、一个是iPhoneInlineVideo。

我试图在这两个库中寻找启发，看了下他们的源码，canvasVideo没看懂，在iPhoneInlineVideo中我算是找到关键。我自己总结的是用audio标签作为驱动器，audio播放的同时修改video的currenTime
关键代码（让video标签在ios网页不会全屏播放）例子

audio.addEventListener('play', update, false);
audio.addEventListener('pause', cancelUpdate, false);
audio.play();
var animationFrame;
function cancelUpdate(){ cancelAnimationFrame(animationFrame); }
function videoUpdate(){ video.currentTime = audio.currentTime; }
function update(){ video.currentTime = audio.currentTime; animationFrame = requestAnimationFrame(update); }

这段代码中有个缺陷，就是如何让audio标签在网页中自动播放，微信浏览器是有办法可以解决自动播放的问题，但是Safari暂时我没有找到办法

转载于:https://www.cnblogs.com/Silababy/p/6118132.html