svg与视频结合的镂空效果实践总结

关键词：动效 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端：

移动端：