1
关键词:动效 svg video 多端兼容

效果预览

截图见附录,在线地址

实现小结

想要说明的主要是两点,一个是svg的运用,另一个是video在移动端的兼容问题。

镂空效果的实现

思路一是用png,优点是简单直接,缺点就是非矢量,可能有锯齿,多端需要多张图;
思路二是用svg,优点是矢量,可以直接用svg标签也可以像图片一样单独引用,缺点就是需要一点学习成本。

显然,这次采用的是思路二,对于svg的本次使用,简单说明下:
由于是全屏半透明“M”镂空,因此首先想到的是有个直接全屏的svg,但是实际要响应多终端,宽高比都不同,一个全屏的svg是不可行的。怎么办呢?利用snap.svg等js库动态创建是不是可以呢?问题是很多时候镂空的图案是特殊的设计图案,一般的程序员想去直接绘制也不太可行。

最后实现是设计师提供一个"M"svg文件,咱们根据屏幕大小实时的补全上边左边右边部分。

对于svg的使用可以单独引用文件也可以嵌入HTML中。
单独引用方法有如下这些:

<embed src="xxx.svg" type="image/svg+xml" /> 
<object data="xxx.svg" type="image/svg+xml"></object> 
<iframe src="xxx.svg"></iframe> 
<img src="xxx.svg" alt="">

嵌入HTML中方法:
由于SVG是XML文件,因此可以用任何文本编辑器创建、查看和编辑,当然实际运用中都是用可视化工具创作,例如inkscape、Illustrator等。用文本编辑器打开svg文件,直接复制黏贴到HTML中,然后做些简单的整理可以了。


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path class="st1" d="xxxxxx"/>
    ...
</svg>

移动端video兼容问题

1,微信内置浏览器自动全屏的问题。
处理方法是在video标签上加x5-playsinline="" playsinline="" webkit-playsinline=""

<video src="xxx.mp4" x5-playsinline="" playsinline="" webkit-playsinline="" data-poster="xxx.jpg" preload="none" loop="loop" class="media-video">
    Your browser does not support the video tag.
</video>

2,微信内置浏览器z-index不起作用问题。
处理方法是在video便签上加x5-video-player-type="h5"

<video src="xxx.mp4" x5-video-player-type="h5" x5-playsinline="" playsinline="" webkit-playsinline="" data-poster="xxx.jpg" preload="none" loop="loop" class="media-video">
    Your browser does not support the video tag.
</video>

3,实际中还有各种其他问题,例如自动播放属性设置无效,iOS端编码格式要求等,最后因为业务及时间等因素综合考虑,针对移动触屏端改用图片循环播。

附录:
PC端:
图片描述
图片描述

移动端:
图片描述图片描述


正月初五
43 声望3 粉丝

知道在想什么,知道在做什么。