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

时间:2021-02-28 08:42:08

写在前面的话:

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

:( 嘘!真不知道的也继续看下去,有收获 ↓ )

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

So,搞懂这个并不难。

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

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

一、视频内联播放。

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

二、视频去控件。 

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

三、去控件全屏播放。

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

四、视频自动播放。

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

 

五、黑屏问题。

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

 

六、其他属性和方法。

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


 一、video 标签内联播放 

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

Video 标签内联播放,需要添加属性:

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

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

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

而在 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.使用

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

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

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

确保你使用这个playsinline属性。

二、播放视频去控件

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

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

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

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

三、去控件全屏播放

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

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

1、全屏实现:将video视频宽高设置为 100% (全屏)

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

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

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

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

四、视频自动播放

设置属性 autoplay

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

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

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

这里,找到了一个hack方法:

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

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

五、黑屏问题

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

ios 在播放视频时,会出现短暂的黑屏(透屏),再正常显示。

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

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

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

六、常用属性和事件

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

1、autoplay 属性

<video autoplay="true" />

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

2、preload 属性

<video preload="auto” />

规定是否预加载视频。

可能的值:

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

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

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

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

3、timeupdate 事件

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

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

4、ended 事件

监听视频播放结束

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

后记:

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

  • 因为视频是一边播放一边加载,因此不但视频的大小会影响加载体验,视频的清晰度对加载体验影响更大。

  • 建议视频1S平均大小范围控制在0.09~0.17M

  • 视频格式建议使用mp4

  • 如果 在android 环境中,想要隐藏 video 播放器,style属性 这样写:{ position: relative; display: none;  z-index: -1; }

如果你喜欢我们的文章,关注我们的公众号和我们互动吧。

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