关键词:动效 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端:
移动端:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。