svg與視頻結合的鏤空效果實踐總結

justjavac 發布于2019-06-21 16:17 / 737人閱讀

摘要：關鍵詞動效多端兼容效果預覽截圖見附錄，在線地址實現小結想要說明的主要是兩點，一個是的運用，另一個是在移動端的兼容問題。多帶帶引用方法有如下這些移動端兼容問題，微信內置瀏覽器自動全屏的問題。處理方法是在標簽上加，微信內置瀏覽器不起作用問題。

關鍵詞：動效 svg video 多端兼容

效果預覽

截圖見附錄，在線地址

實現小結

想要說明的主要是兩點，一個是svg的運用，另一個是video在移動端的兼容問題。

鏤空效果的實現

思路一是用png，優點是簡單直接，缺點就是非矢量，可能有鋸齒，多端需要多張圖；
思路二是用svg，優點是矢量，可以直接用svg標簽也可以像圖片一樣多帶帶引用，缺點就是需要一點學習成本。

顯然，這次采用的是思路二，對于svg的本次使用，簡單說明下：
由于是全屏半透明“M”鏤空，因此首先想到的是有個直接全屏的svg，但是實際要響應多終端，寬高比都不同，一個全屏的svg是不可行的。怎么辦呢？利用snap.svg等js庫動態創建是不是可以呢？問題是很多時候鏤空的圖案是特殊的設計圖案，一般的程序員想去直接繪制也不太可行。

最后實現是設計師提供一個"M"svg文件，咱們根據屏幕大小實時的補全上邊左邊右邊部分。

對于svg的使用可以多帶帶引用文件也可以嵌入HTML中。
多帶帶引用方法有如下這些：

...

移動端video兼容問題

1，微信內置瀏覽器自動全屏的問題。
處理方法是在video標簽上加x5-playsinline="" playsinline="" webkit-playsinline=""

2，微信內置瀏覽器z-index不起作用問題。
處理方法是在video便簽上加x5-video-player-type="h5"

3，實際中還有各種其他問題，例如自動播放屬性設置無效，iOS端編碼格式要求等，最后因為業務及時間等因素綜合考慮，針對移動觸屏端改用圖片循環播。

附錄：
PC端：

移動端：

GPU云服務器云服務器視頻會議系統如何與云服務器的結合引導頁鏤空效果 webrtc與ffmpeg結合把aspx與cs結合

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/11053.html

CSS相關文章

摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉換成原生動畫初來乍到，本文搬運自我月份在知乎發的文章。前端面試之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面試中經常被問到的。如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

FrozenMap 2019-08-29 14:21 評論0 收藏0
《第五屆中國CSSConf開發者大會》參會總結

摘要：剖析新版，為你所用大漠第二個議題是大漠老師的，大漠老師是的站長，著有圖解核心技術與案例實戰。自定義屬性大漠老師多次強調，這叫做自定義屬性，不叫變量。前言對于我來講，雖然做前端那么多年，但對 CSS 的探索非常少，很多 CSS 知識還是在畢業之前積累下來。揣著一本《精通CSS:高級Web標準解決方案(第二版)》（現在出第三版了，這是我在 CSS 道路上的啟蒙書）在前端路上走了這么幾...

TerryCai 2019-08-29 18:34 評論0 收藏0
螞蟻微貸互動營銷技術體系實踐

摘要：財富管理專場上，螞蟻金服微貸事業群高級前端技術專家王卓做了主題為螞蟻微貸互動營銷技術體系實踐的精彩分享。通過互動技術，最終實現拉新，留存和促活等目標。營銷技術方案對接研發平臺，通過鳳蝶系統和研發管理體系進行打通。摘要：以數字金融新原力(The New Force of Digital Finance)為主題，螞蟻金服ATEC城市峰會于2019年1月4日上海如期舉辦。財富管理專場上，螞...

aristark 2019-06-26 18:49 評論0 收藏0
前端每周清單半年盤點之 Angular 篇

摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0