談談常見H5製做方法——視頻與CSS3

時間 2019-11-10

標籤談談常見 h5 製做方法視頻 css3 css 欄目 CSS 简体版

原文原文鏈接

本文在H5動效的常見製做手法的基礎上，對相印的H5動效製做手法進行了擴展和整理，並結合案例談談怎麼將其作得生動。css

視頻類

一、體驗案例

視頻類h5能夠帶給用戶動效逼真，流暢的體驗。雖說製做視頻的難度較大，可是瑕不掩瑜，一支視頻能夠儘量地創造出天馬行空的想法，一些短期內沒法經過代碼創造出的酷炫效果。
首先放上兩個案例供你們體驗。html

1）金館長直播間
前端

實現仍是比較簡單的，交互就是經過用戶點擊無縫切換不一樣的視頻，基本每一個能按到的tab均可以對應一支視頻，讓用戶頗有參與感html5

2） QQ錢包二週年
web

其中三支視頻的交互在於能夠由用戶拖動滑塊，經過設置currentTime實時控制視頻進度，拖動到末端時觸發視頻播放事件。我以爲也是頗有趣的。canvas

二、基本概念

想在H5中靈活運用視頻，必須對video相關的屬性、Api有個大體的瞭解，這裏首先對最基本的進行普及一下。瀏覽器

1） <video>標籤屬性微信

src ：視頻地址ide
width height ：視頻寬高(px) h5中可指定爲當前設備屏幕寬高函數
poster：視頻封面，沒有播放時顯示的圖片
preload：預加載
autoplay：自動播放
loop：循環播放
controls：瀏覽器自帶的控制條
webkit-playsinline="true" | playsinline ：禁止 iPhone Safari 視頻自動全屏
x-webkit-airplay="true"支持Airplay的設備（如：音箱、Apple TV)播放

<video id="video" src="mov.mp4" preload="auto" poster="" currenttime=0 webkit-playsinline="true" playsinline loop x-webkit-airplay="true" controls autoplay>

2） video DOM經常使用相關屬性及方法

事件	描述
`canplaythrough`	表示資源緩衝完畢，能夠播放
`durationchange`	資源長度改變，執行一次
`play`	資源實際開始播放，`autoplay`和`play()`都會觸發play事件
`playing`	同上執行一次
`pause`	`pause()`時觸發
`progress`	資源播放過程中屢次執行
`ended`	結束時觸發 loop時不觸發該事件

屬性	描述
`currentSrc`	返回資源地址
`currentTime`	返回當前播放進度，可設置
`duration`	返回資源總時長
`paused`	資源是否已中止
`ended`	資源是否已播完

方法	描述
`play()`	播放資源
`pause()`	暫停資源
`load()`	從新加載src指定的資源

以上說的是比較經常使用的方法屬性，更詳細的可參考HTML5 Audio/Video 標籤,屬性,方法,事件彙總

三、常見坑

說了這麼多，來看看一些難以繞過的坎。其實相信不少同行在H5上運用video時，獲得的效果未必那麼近乎人意。

其中視頻類H5很大的一個坑是：在微信X5瀏覽器打開時，視頻會自動全屏播放，而且結束時會出現騰訊視頻的廣告。

目前在IOS下這兩個問題已經獲得瞭解決：即在<video>標籤下添加屬性webkit-playsinline="true"和playsinline

部分安卓機能夠經過這兩個屬性解決。但有些仍是不行。具體什麼機型，待測試…

這個問題是因爲微信團隊對視頻來源進行了域名限制，只有掛載在qq域名下的H5才能避免上述的問題。但目前白名單申請途徑已經關閉。在等待將來的更新能把這個問題解決的同時，針對安卓機，根據前輩經驗，有如下這兩種嘗試方法。

1）使用canvas實時繪製
細節可參考 HTML5 視頻直播
本人嘗試過使用上文提到的jsmpg.js解碼，可行性比較高。可是聲音就沒法由canvas播放了。
*注意jsmpg.hs只支持解碼mpeg格式的視頻。因此須要使用ffmpeg 對非mpeg格式視頻進行轉換。

核心js：

var canvas = document.getElementById('jsmpegCanvas');
var player = new jsmpeg('mov.mpg', {canvas:canvas, autoplay:true, loop: true});

其主要思路是利用js將video實時解碼，再利用canvas渲染幀。因爲提到的兩個js轉換器沒有提供設置canvas寬高的Api，因此能夠嘗試經過scale使canvas全屏。

以前有嘗試過在同一個頁面裏讓video播放，visibility設爲hidden，直接利用requestAnimationFrame對每一幀進行canvas的drawImage。然而在安卓下只要有播放的video就仍然會自動全屏。

2）目前在安卓有一種同層播放器的解決方案。可解決安卓機自動全屏以及視頻播放完畢會跳出廣告的問題，而且能夠實現交互。

經過video屬性x5videoplayertype聲明啓用同層H5播放器
```
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
```
使用x5-video-player-fullscreen本身從新適配新的視口大小由於默認是進入全屏播放。
```
<video id="test_video" src="xxx" x5-video-player-type="h5" x5-vide o-player-fullscreen="true"/>
```

但發如今video+滑屏觸發時，發現存在很明顯的閃屏現象，而且不能自動播放。還有一個問題是video在播放時，背景音樂會失效。該方案仍有待測試，歡迎各位同行交流。

CSS3動畫類

純CSS3的H5能夠參考VM團隊的那幾個。僅僅利用CSS3製做出很是炫酷的效果，必須對CSS3的運用很是純屬才行。
以前寫過一篇關於CSS3打造H53D方面的文章，你們能夠參考下。
3D無疑是CSS3在H5中的一種靈活運用方式。再提一下其餘的CSS3表現形式。

一、幀動畫

看一個案例——陌陌宣傳H5

截圖是某部分動畫的序列幀，雖然不是特別連貫，但體驗的效果並不差。

這裏的實現方式是經過JS每隔必定時間切換class改變背景圖的background-position
放上一個Demo你們體驗

除了經過JS實時控制之外，還可使用CSS3的animation 。

首先須要將每一幀拼接成雪碧圖，這裏的例子仍是使用上述圖片。

經過keyframes設置每幀的background-position 須要把每一幀都寫入，較爲繁瑣

@-webkit-keyframes fresh {
    0% {
        background-position:-600px -1467px;
        }
    4.34% {
        background-position:-600px -978px;
        }
    ...
    100% {
        background-position:-900px -489px;
        }
    }

在.bg下添加animation屬性

animation: fresh steps(1,end) 4s infinite;
    -webkit-animation: fresh steps(1,end) 4s infinite;

另外有一種比較簡單的方法，須要將每一幀按順序拼合好雪碧圖。如雪碧圖從左至右必須是連貫的幀。好比這種

代碼寫成以下形式即可

@-webkit-keyframes fresh {
    0% {
        background-position: 0 0;
        }
    100% {
        background-position:-900px 0;
        }
    }

    animation: fresh steps(4,end) 4s infinite;
    -webkit-animation: fresh steps(4,end) 4s infinite;