Fork me on GitHub

浅谈移动端活动页中视屏尺寸

frontend/video-measure/banner

嗯~最近开发活动页面的时候,遇到插入播放视屏的操作,记录一波~

如何嵌入视屏

我这里直接使用的是video标签嵌入,详细的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<video 
id="video"
src="path/to/video.mp4"
preloay="auto"
autobufer="true"
x5-video-player-type="h5"
x5-playsinline="true"
webkit-playsinline="true"
playsinline="true"
x5-video-player-fullscreen="true"
airplay="allow"
x-webkit-airplay="true"
@ended = "endVideo"
ref="myVideo">
</video>

对视屏的嵌入的效果就很是尴尬了,这里的视屏制作内容过于饱满(靠边都有内容),对于兼容不同的设备来说很是头疼。好吧,没时间调整视屏了是吧,可视区域全屏显示视屏又说影响缩放是吧,那来个居中显示,四边留白吧,然后就有了下面这个:

frontend/video-measure/video-show

后期反思

作为一个爱折腾的Positive Pessimist,在项目上线之后总结了一波,毕竟第一次做这种视屏嵌入的效果。

对于h5中嵌入视屏,我们应该怎么做呢?

分两种情况来说:

视屏布满可视区域

在看过的demo中,视屏布满可是区域的话,采取了404px*720px,至于为什么采用这个尺寸,有大神来说明下不?自己感觉750px*1344px也是可以的。

视屏宽度100%,高度自适应

我们来看下谷歌浏览器提供给开发者的调适工具里面的移动端调适,里面有不同机子的相关的设备分辨率参数,自己简单的转换了一下,得到下面的表格:

设备名原设备像素转换后
Galaxy S5360*640750*1334
Pixel 2411*731750*1334
Pixel XL411*823750*1502
iPhone 5/SE320*568750*1332
iPhone 6/7/8375*667750*1334
iPhone 6/7/8 Plus414*736750*1334
iPhonex375*812750*1624

嗯~在进行转换后,数据都集中在750*1334,也就是说设计的视屏应该要以iphone6的尺寸为准。不过iphonex,你也太傲娇了点吧…,所以,再对iphonex再单独处理下呗,比如超出视屏部分背景色置黑…

再次,试过现在的主流安卓移动设备中,在播放视频都会弹出另外一个全屏来播放视频,所以在安卓机上这个尺寸是合理的,又因为跳出一个视频播放插件,不受控制,对ui影响不大。

注意

这里如果使用上面的方案二(视屏宽度100%,高度自适应)插入视频的话,视频里面的背景颜色是需要尽可能的单调,因为要额外在页面中设置和视频一样或者协调的背景颜色达到整体融合的效果。

在播放视频之前没有存在历史记录的情况,不然会在iphone系列的底部产生一定高度减少可视区域部分,效果如下:

frontend/video-measure/video-back-tools

设计视频的时候,尽量不要靠底部设置内容。防止有历史按钮跳转回来又遮住部分视屏内容…

<-- 本文已结束  感谢您阅读 -->
客官,且步,赏一个呗 (@ ~ @)