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

移動端：