Inline Play Video With HTML5 in iOS and Android

Untitled, originally uploaded by Fansia.

背景

最近開始接觸寫手機上的網頁，發現跟 Desktop 上的網頁有很多 tricky 的地方。 尤其是不同的 browser 又在不同的 OS Version 上，行為又會有一些不同的差異。

剛好有同事有這樣的需求，想要在 iOS 及 Android 上利用 HTML5 製作 Video，但又希望可以 inline 播放。 同事實驗的結果是， Android 4.x 可以作到。iOS 及 Android 2.3.x 都會自動開啟 Native 的 Video Player 來播放影片。 據 Apple 官方的說法是，在 iPod 及 iPhone 這樣小尺寸的螢幕播放影片，為了良好的客戶體驗，系統會預設採用 Native 的 Player 來全螢幕播放。

因為前面提到，實作方式其實跟 OS or Browser 的版本也都有差別。 為了達到這個需求，我們先來看看目前這兩大陣營的分佈情況。 目前 Android 根據官方的資料，目前 Active Android Devices 最大宗除了 Android 4.X 就是Android 2.3.X。 iOS 就是 4, 5 and 6 都要能滿足才行。

實作

經過一個上午的 Google 及測試，目前只找到 for iOS 的 solution，Android 2.3.x 目前並沒有找到。

iOS

其實非常簡單，首先要在 video tag 加上這個 attribute: webkit-playsinline。

<video height="480" id="video" webkit-playsinline="" width="640">
</video>

實測發現，這樣還是無法播放，必須要利用 Javascript 控制播放才行。 如果要自動播放可以將底下的 code 放在 document.ready 的 event 下，或是作一個 button 來 trigger 播放的動作。

var video = document.getElementById('video');
video.play();

希望可以對有一樣需求的朋友有幫助。 有什麼問題也可以一起再討論。