H5移动端视频问题(苹果全屏播放问题等)

iphone上，手动、自动、窗口化等问题

iphone窗口化

解决方案：

通过canvas + video标签结合处理

原理： 获取video的原图帧，通过canavs绘制到页面。

我们一般在苹果上在网页中点击视频以后就会出现这样的情况:

它是默认全屏的 有时候设计可能需要我们只是让它呈现在网页中的一小部分播放而不是全屏。

当我们做了处理以后就如下图一样:

是不是很神奇.....

实现方法：http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser；

githup地址:https://github.com/newshorts/InlineVideo;

基本上你把githup的地址代码拷贝下来看一看html里的代码，你就会用了。

这个是基于jq的所以要先引入jq.还有它的两个js。下载下来的代码里都有，自己看看就会了，废话不多说。

html:

<video width="320" height="200" controls playsinline webkit-playsinline>
<source src="video/15s.mp4">
</video>

js:

var FrameRates = {
film: 24,
NTSC : 29.97,
NTSC_Film: 23.98,
NTSC_HD : 59.94,
PAL: 25,
PAL_HD: 50,
web: 30,
high: 60
};

debug = true;

转载于:https://www.cnblogs.com/well-nice/p/6144169.html