本文作者：IMWeb IMWeb團隊 原文出處：IMWeb社區(qū) 

在企鵝輔導品牌頁中,，我們需要實現(xiàn)一個動畫如下：

頁面滾動到動畫區(qū)域,，播放動畫, 對應動畫部分如下：

幀動畫當前的實現(xiàn)有以下幾種方式：

1. GIF 動畫

大家比較熟悉的圖片格式

1. lottie

Airbnb 開源項目，通過解析 AE 動畫為 json 數(shù)據(jù),，支持跨平臺的動畫效果解決方案,；lottie 在輔導中已經(jīng)有實際應用，使用過的同學都表示對其實現(xiàn)效果和開發(fā)速度表示稱贊和推薦,，如果你還不了解 lottie, 推薦 lottie 系列學習文章,，請戳我

1. APNG (Animated Portable Network Graphics)

基于 PNG 格式擴展的一種動畫格式，增加了對動畫圖像的支持,，其誕生是為了替代老舊的 GIF 格式,，但部分瀏覽器不支持，需要考慮兼容,；

1. HTML video 元素

GIF 動畫適用于處理色彩簡單,、動效簡單的動畫，如 logo ,、 icon 圖這樣的小圖動畫,，在上面需要實現(xiàn)的動畫中明顯細節(jié)比較多，區(qū)域也比較大,，考慮到質量 GIF 排除在外

在使用哪種方式實現(xiàn)該動畫上,，結合同事 @ajaxchen 的調研結論：

1. lottie

在設計師通過 AE 制作了動畫之后，通過 AE 插件 bodymovin 將動畫導出 json 給到我們前端開發(fā)，在使用這段 json 數(shù)據(jù)中,，我們引入了 lottie-web 腳本來解析這段 json 數(shù)據(jù)渲染成為SVG / canvas 動畫,，效果如下圖， 左圖為用 lottie 實現(xiàn),，右圖為我我們的目標實現(xiàn)效果

可以看到實現(xiàn)還是存在著差異,，顏色、數(shù)字傾斜度,、虛線的透視都沒有達到預期,，于是放棄lottie 的使用，但這并不否定 lottie 在實現(xiàn)其它動畫的優(yōu)秀效果

1. APNG

在對設計師給到的分段的動畫幀圖片壓縮之后,，其實現(xiàn)結果 apng 大小高達 29M,，webp 格式 17M， 如此龐大的體積,，且實現(xiàn)清晰度達不到預期,，也只能放棄該方式；由于 APNG 在一些瀏覽器上不支持,，在實現(xiàn)時需引入 apng-canvas 將 apng 轉化為 canvas,；

1. createJS

在我將 ISUX 上的文章《你離高效制作動畫只差一篇文章的距離》發(fā)送給我們的設計小哥

之后，他如此回復我

1. HTML video

在上面嘗試無果之后,，我的同事@zzbozheng 向我展示了一個 lol 的頁面,，神奇，居然是用video來實現(xiàn),！我怎么就沒想到,！

查看 video 標簽的兼容性，無論是我們品牌頁的 PC 版還是移動 web 端,，兼容性都可以滿足我們的需求

設計小哥哥給到的動畫 MP4 視頻大小是 350k, 350k對比幾十兆簡直就是輕量,，查了一番 video 的自動播放實現(xiàn),，有一些坑,，跟設計師小哥哥也溝通了一番綜合考慮之后毅然踩上了 video 的坑

video 標簽有對應的事件方法， 可查閱文檔

下面是在移動端 web 使用 video 過程中的采坑總結：

1. video 在 safari 和桌面端 chrome 中可能無法自動播放

這里的自動播放,，無論是 video 標簽的 autoplay 屬性還是通過 js 自動調用 video 的 play 方法都是自動播放

桌面端 chrome 自動播放主要受制于 autoplay policy ,，遵循對應的策略則可以自動播放，這主要考量于用戶的體驗,；因為使用muted(靜音)屬性可以允許自動播放,， 我們的動畫本來就是沒有聲音的，所以在 video 標簽中加上 muted 屬性

<video muted />

1. 隱藏視頻控制條

在 video 標簽中,，只要不加 controls 屬性,，一般是不會顯示控制條的，這樣就看不出來是一個視頻了,，當然有些安卓機器的瀏覽器的確處于一種失控狀態(tài),，后面會提到 ○|￣|_

1. IOS 視頻自動全屏播放

查閱資料,，video 標簽添加兩個屬性即可小屏播放

<video 
    muted
    playsInline
    webkit-playsinline="true"
/>

1. 微信不允許自動播放視頻，必須通過用戶交互才能播放

開始的時候就有過來人的同事提醒過要我注意下微信的視屏自動播放,，經(jīng)過別人的反饋,，其實不止是微信不允許，有些機器瀏覽器也是不允許,，這個時候該怎么辦,？結合 touch 事件一起實現(xiàn)。視頻播放是監(jiān)聽 scroll 事件,，等到可視范圍內調用 video.play() 自動播放,，既然有些瀏覽器需要用戶交互，那可以選擇 touch 事件,，當用戶 touch 到這塊展示播放區(qū)域,，觸發(fā) touch 事件調用 play, 這里我們的動畫區(qū)域足夠大，不擔心用戶 touch 不到,。這里使用變量來表示視頻是否已經(jīng)播放,，如果已經(jīng)播放就不再執(zhí)行 touch 事件，避免頻繁調用 play

1. 有些安卓瀏覽器無法自動播放,，touch 事件也無法觸發(fā)播放

video 標簽的 play 方法返回一個 promise,，可通過 promise 來檢測到 video 是否可自動播放

video.play()
  .then(() => {
    // play success
  })
  .catch( err => {
    // auto play fail
  })

當 catch 到 error 時，只能啟用兼容方案,，設計小哥哥給了我?guī)讖垘瑘D片,，讓我漸隱漸現(xiàn)實現(xiàn)圖片播放。

然而,！在華為榮耀 8 的微信里面,，我發(fā)現(xiàn)了個詭異的問題，視頻沒有播放,，同時 video.play 沒有 catch 到 error,，而是正常的執(zhí)行到了 then 方法，也就是說 play 方法返回成功,，然而視頻實際沒有播放,，這，這,， 這,， 是在欺騙我的感情！

無奈之下,， 針對安卓的微信端,，視頻全部啟用兼容模式（幾張圖片漸隱漸現(xiàn)）

1. 論安卓瀏覽器的各種詭異表現(xiàn)

1. oppo 機視頻播放自動懸浮置頂

1. video 控制條無法隱藏

2. 視頻無法控制地自動全屏播放

3. ...

我："設計小哥哥，這我無能為力

設計： "找出所有對應的機型和瀏覽器，對這些不支持的瀏覽器使用兼容模式播放動畫

我："這所有的機型實在難以控制和全部覆蓋到...

設計： "那就先對所有的安卓都使用兼容模式吧,，后面對此優(yōu)化

于是就這樣干掉了所有的安卓 video

1. ios QQ 瀏覽器視頻播放完畢,，展示推薦視頻

這個 video 我是設置了循環(huán)播放的，硬生生 QQ 瀏覽器就在視頻播放完畢后展示推薦視頻,，并且停止了我的循環(huán)播放,，這讓我的頁面顯的有點 low， 這明顯是不仁道的,，嘗試無果之后,，于是我咨詢 QQ 瀏覽器的同事幫忙這個問題， 他讓我在 video 標簽上加上這個屬性,，即可使用系統(tǒng)播放器,，而拒絕被攔截植入推薦視屏， 感謝@eddiecmchen 提供的意見

mtt-playsinline=”true“

1. 設計師導出的視頻背景色與提供的色彩有色差

這在不同 PC 設備中存在差異,，例如 MAC 與 windows ,， 在移動端暫時還沒發(fā)現(xiàn)，但是可以發(fā)現(xiàn)視頻在移動端展示與 PC 上展示的色彩差異

至此附上實現(xiàn)的部分代碼塊,，項目使用 react 技術棧

<video
   muted
   src="***"
   preload="auto"
   playsInline
   webkit-playsinline="true"
   mtt-playsinline="true"
   loop
   ref={this.videoRef}
/>

playVideo = () => {
    const { isVideoCanAutoPlay, isPlayedVideo } = this.state;
    // 播放視頻
    const videoDom = this.videoRef.current;
    if (videoDom && !isPlayedVideo && isVideoCanAutoPlay) {
      const playPromise = videoDom.play();
      if (playPromise) {
        playPromise
          .then(() => {
            this.setState({
              isPlayedVideo: true,
            });
          })
          .catch((err) => {
            badjs.info(`[品牌頁][AI VIDEO 動畫]: 自動播放出錯 ${err}`);

            ++this.catchVideoErrorCount;

            // 通過點擊和scroll后都無法播放視屏,，使用兼容性方案
            if (this.catchVideoErrorCount >= 2) {
              this.setState({
                isVideoCanAutoPlay: false,
              });
            }
          });
      }
    }
  };

最后總結：

1. 移動端 web 對于 video 自動播放的兼容性是在太差，尤其安卓,，一些瀏覽器對 video 標簽進行攔截,，并以自己的方式實現(xiàn)，或是懸浮置頂播放,，或是兩個視屏播放沖突,，或是控制條無法隱藏，或是播放默認全屏,，如果用其它方式可以實現(xiàn)動畫盡量還是用其它方式

2. 對于 video 的自動播放,，考慮一些瀏覽器限制必須通過用戶交互才能使用，如果視屏是在第一屏則有點難度,，還是需要用戶通過點擊才能播放,，如果不是第一屏則可通過 touch 事件來觸發(fā)，畢竟用戶下拉滾動還是會觸發(fā) touch 事件

3. video 的 play 方法返回的 promise 存在華為榮耀8 微信里返回 play 成功,，但是卻沒有播放視頻

參考文檔和網(wǎng)站:

1. https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events

2. https://lol.qq.com/

感謝在此次采坑過程中給予幫助的同事~