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端：

移动端：