如何制作一个完美的全屏视频H5

阅读 21  ·  发布日期 2018-04-15 22:01:19  · 

本文转载自:大转转FE公众号

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

一、视频内联播放

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

二、视频去控件

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

三、去控件全屏播放

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

四、视频自动播放

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

五、黑屏问题

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

六、其他属性和方法

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


一、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内核的可以使用 同层播放器。