繼「這有個簡單的功能,評估一下」,這次是「有個簡單的功能,處理一下」系列,前陣子實作了一個常見的需求「在網頁的輪播廣告,放影片」,在製作時遇到許多細節問題與設計思維,值得寫一篇文章來分享。
slideshow
(施工前)

(一)、影片只有一種嗎?

本來有圖文混排的輪播廣告,現在多個「簡單的需求」要放影片,起手式要考慮的就是
1.伺服器流量和頻寬問題
2.瀏覽器相容性問題。

小時候看一些虛擬主機,每年幾百塊台幣卻有無限流量、或是每個月流量好幾百GB,看似根本用不完。所以有些為了基礎設備花大錢的,都是不懂企業成本控管的盤子囉?

實際遇到之後才發現虛擬主機商也不是吃素的,經營理念就是提供該價位堪用的主機,並且避免因為你一個網站,影響到他家同一批伺服器、同一條網路線路上其他網站的運作。具體管理手段有例如頻寬限流、限制擺放的網站類型等等。限流是什麼概念? 就是跟你說今天開始一整年星巴克咖啡讓你喝到飽,但是每天只給你喝一滴,這樣一整年可以喝到多少咖啡呢? 瀏覽者願意多等幾秒,看網站上的影片出現嗎?

瀏覽器相容性問題,很久以前在播放吧,網頁上的影片已經介紹過,近代瀏覽器都可以使用 HTML5 video 標籤,在網頁上輕鬆的播放 mp4 等等特定格式的影片,只是在一些不再更新的古老瀏覽器,例如 IE8,仍然必須透過 Flash player 之類的插件才能播影片,幸好這次不用考慮再支援舊瀏覽器。

除了不用支援過時舊瀏覽器,因應本次製作現實情況,以下幾點也不需考慮
– 上稿人員不知道怎麼把影片轉檔成瀏覽器可以直接解的格式,網站後台要可以線上轉檔
– IE 跟 Firefox 顯示 mp4 格式的影片, Chrome 顯示 webm 格式的影片
– 影片需要即時直播,延遲要在幾秒以下
– 影片鎖觀看、或鎖檔案存取的權限

而為了避免占太多頻寬、影片載入太慢、與增強社群分享力,除了本地端 mp4 影片,還要可以嵌入線上平台的影片,這次的 TA 在台灣,那就是 Youtube 囉。

所以「簡單的」放個影片在輪播廣告上的需求,卻必須依三種不同類型做處理: 一般圖文組、背景MP4 影片型、背景Youtube 影片型。

(二)、輪播廣告幾秒要自動切換?

輪播廣告是需要自動播放的,以免又接到修改意見說不知道可以左右滑、不知道箭頭或底下的導覽點可以點。

需要自動播放的輪播廣告遇上了影片,馬上定出了 spec
1.為了研究使用者喜歡哪一支影片,不管影片播到一半還是怎樣,輪播廣告每 5 秒就是會自動換頁,如果使用者錯愕地把廣告圖再滑回去看,就可以推斷使用者對該影片感興趣。這份使用者行為資料會交給相關部門分析研究,以利(下略 500 字)。
2.為了吸引使用者的注意,以及增加網路的互動率,有聲音的影片會自動播放嚇死人,而靜音的影片則要點一下才會播放。
3.為了避免使用者快速滑動輪播廣告玩玩,卻額外增加伺服器資源與流量的浪費,所以滑動之後,3秒內使用者沒有再進行其他操作,影片才會開始下載,然後開始播放。
4.使用者不想看這組廣告的影片,自行把輪播廣告換頁之後,剛剛沒播完的影片還是要繼續播,還要播出聲音。
5.進來網頁,還沒看到影片就要離開的時候,跳出臉書粉絲團追蹤按讚的提示。

這種反人類的設計還是先收起來吧,有一天遇到這種需求時再拿出來。

總之影片撥到一半就自動換頁,實在有夠 bang 。

理想狀態下每一組的輪播廣告切換時間=影片的載入時間+影片總長度,要先想法子:
– 拿到影片的檔案大小
– 偵測當下網路的速率
– 用前兩項算出影片載入要花幾秒,但是網路速率變動的話勒?
– 想辦法拿到影片的總長度
最後才能算出每組輪播廣告的合理換頁秒數,但除了 youtube API 可以拿到影片的長度(duration),其他的數值取得方法都非常硬幹、不靠譜。

還是放棄這種高科技,人工輸入切換時間吧。

輪播廣告套件 Swiper

剛好可以使用 data-swiper-autoplay 屬性,來個別控制每組輪播廣告的切換時間,
除此之外,它還有一些特點:
– 選項一應俱全,autoheight, preload, lazyload, parallax, 切換特效
– 支援鍵盤、滑鼠、觸控事件
– callbacks 夠完整
– 有套件可以跟 animate.css 結合,讓前景內容與背景內容在換頁後有動畫特效
– 不會像一些套件一樣,明明沒增加什麼功能,api docs 卻常常在改版,或是 api docs 的網址沒續約,也沒放 github,完全變孤兒。swiper 是很實在的。
– 目前還不用錢,也可以商業使用

Swiper 除了 IE8, IE9 會有 js 錯誤,有些用到 CSS3 preserve-3d 的切換特效在 IE11上沒法用,會偶發性連結點擊沒反應,需要重開瀏覽器;沒有內建 continuous scroll ,需要另外改,swiper 是非常好用的工具。

(三)、網頁 HTML5 Video 影片自動播放

從前從前在 Android 或 iOS 系統中,網頁內的影片是不准自動播放的,做一顆按鈕再用 JS 去 trigge click 也沒效,基本上要人的手指去點一下才能播。

不過後來解禁了,

只要 iOS 版本大於等於 10 ,

或是 Android 的 Chrome 瀏覽器,版本大於等於 53,

而且影片是靜音的,網頁影片就可以在行動裝置自動播放,

不用額外再點一下。不信的話可以試試官方的範例頁面 Autoplay Muted Videos on Android Sample

iOS 比較單純,只要 iOS 9 以下 ,不管是 Safari 還是 Chrome 都是無法自動播放網頁影片的。

但是用 iOS10 的 iPhone 6s ,或是 iOS11 的 iPhoneX 模擬器,怎麼還是無法自動播放影片?
video自動播放 iphonex

html 的 video tag 還要加上幾個必要屬性,才能自動播放
– autoplay 必加
– muted 必加
– playsinline 就算加了前兩項,這個不加還是無法自動播放,並且避免手指點一下播放後影片全螢幕播放。
– controls 如果碰到影片無法自動播放,不管是 Google Chrome 還是 Safari,用手指去點影片,還是不會播放,可能肇生操作問題。一定要設定這個,這樣用手指去點,才能手動播放影片。

但是每一種作業系統與瀏覽器的原生 video control ui 配色跟樣式都不盡相同…

(四)、網頁 HTML5 Video 影片不能自動播放時,顯示一張圖

這次的案例播放影片是用來當輪播廣告的背景,前景還會有一些文案跟 call to action 連結按鈕,所以點一下再播放的行為是跟我們無緣的。

影片無法自動播放時,使用者進來網站會看到什麼?

實機測試一些常見的行動裝置與瀏覽器
– Samsung 手機的內建瀏覽器(Android Browser)
– ASUS 手機的內建瀏覽器(Chrome webview)
– Line 的 InApp 瀏覽器
– Facebook 的 InApp 瀏覽器
– UC 瀏覽器、QQ瀏覽器等等
– 海豚瀏覽器
– Google Chrome
– Safari

即使無法自動播放影片,各瀏覽器卻也沒有一致的顯示方式,大概有這幾種
– 顯示影片的第一格畫面
– 一片黑
– 一片白
– 只有一顆 play 按鈕

用 video 的 poster 屬性設定一張圖,希望在無法自動播放影片的時候顯示這張圖,但實機測試還是一樣慘烈
– 圖有出來,但是瀏覽器自帶的播放按鈕壓在圖片上
– 圖片顯示方式怪怪的,但用 background-size 跟 object-fit 不太好控制
– 圖根本沒出來

如果影片無法自動播放的話就…
Android 系統起初用 modernizr 的 videoautoplay 來判斷,卻發現瀏覽器各顯神通
– Chrome 最穩,返回 true 的就一定會播
– 有些裝置的 Chrome WebView 返回 true,但影片沒在播,也不走
– 有些裝置的 Chrome WebView 返回 false,但影片會自動播放
– Android Browser返回 true,但還沒遇到會自動撥放的。

去網路上找其他 detect HTML5 video autoplay 的法子,也沒有完美的解法,
既然瀏覽器行為判斷不出來,只好改成抓 User agent 的值來判斷,
– user agent 是否含 mobi (如果是行動裝置再做判斷)
– user agent 的 os.name (判斷 iOS)
– user agent 的 os.version (判斷 iOS 版本)
– user agent 的 browser.name (判斷瀏覽器名稱)
– user agent 的 vendor name (為了判斷特定手機廠牌的內建瀏覽器)

不能自動播放 html5 video 的,就直接不要顯示播放器(以免看到一個不能播的影片控制 bar ),然後用 img 標籤的圖當替代圖片。

雖然用 User agent 來判斷很不智,我本來不想用這招的

我本來不想用這招的

(五)、Youtube 影片有更多神奇的事發生

接下來換到 youtube video 這邊,因為我們要讓輪播廣告換頁的時候,輪到它的就播放,其他組沒輪到的不要播,基本的 iframe 嵌入比較難達成,還有一些 playerVars 要控制,所以使用 Youtube Player API

上述如果影片無法自動播放的話就…….又要再做一次,仍然先用 modernizr 的 videoautoplay,在 playerVars 設定 ‘autoplay’ : 1 ,卻發現一樣瀏覽器各顯神通,而且還有一些瀏覽器,html5 video tag 可以自動播放,但是 youtube video 卻不能自動播放。

Youtube 都有影片縮圖,如果沒有自動播放,那也不用自己用 img 放替代圖片了吧?
想得美。
youtube player api fail
有像這種薛丁格的 Youtube 影片,也不走 Youtube player API 的 onError 那段。

youtube player api fail
有像這種不知所云型的

在有些行動裝置瀏覽器,影片撥放區域的 z-index 似乎又會特別不一樣,所以會有「按左右箭頭怎麼不會動」「手指 swipe 不會換下一張」「購買按鈕點不到」playerVars 下 wmode 也沒效,又要另外處理。

阿不就還好這次只有 Youtube,改天換大中華市場要放優酷/土豆網,還是要放個 Facebook 直播影片,又要增加多少行程式碼啦?

(六)、滿版圖片要多大張?

一般常見的 UI 滿版圖片顯示需求:
– 同一張圖,在直的螢幕跟橫的螢幕顯示時都不會有多餘的白邊
– 同一張圖,圖片在各種尺寸、比例的螢幕上,不會發現任何裁切的情況
– 同一張圖,圖片在各種尺寸、比例的螢幕上,不會發現任何比例跑掉的情況
– 同一張圖,但是圖上的物品或文案在手機上不要看起來小小的,在電腦上不要看起來很大

一個停車位,要剛剛好停一台 Gogoro ,或是能剛剛好停一台貨櫃車頭,但是都不要有多餘空間?


Apple 在大型寬螢幕跟手機直立螢幕有不同的顯示方式,而且不是滿版,下方還會露出第二組廣告圖文。


One Plus 在寬螢幕跟直立螢幕做不同張圖,首屏除了上面的選單,更接近滿版。

所以說,沒有規劃要放什麼內容,也不知道版面會怎麼顯示,就先問圖片要多大張?

(七)、要給後端套資料

欄位初步規劃如下,
輪播廣告類型(影片型)
– 本地影片路徑/Youtube 影片路徑
– 切換秒數
– 直螢幕替代圖
– 寬螢幕替代圖
– ckeditor textarea

輪播廣告類型(圖文)
– 直螢幕背景圖
– 寬螢幕背景圖
– ckeditor textarea

功能還在 beta,不想拿出來危害世人,所以沒有 code 可以分享,
不過若想體驗一下各瀏覽器的影片播放鬼打牆的,可以點此前往 影片測試頁

延伸閱讀
Chromium Blog: Unified autoplay 這禮拜才發的文章,Chrome 的後續版本將對網頁影片的自動播放做出更多的限制。