如何檢測html5視頻是否將內聯播放

Question

我有一個HTML5視頻，頂部有一個啟動圖像。 在桌面設備上，我想點擊啟動圖像以使圖像消失並播放視頻。 在手機上，單擊圖像將使視頻在單獨的應用程序中播放，因此當用戶單擊返回到網頁時，我希望啟動圖像仍然存在（普通視頻組件，至少在我的Android手機，非常難看）。

如何判斷視頻是“內聯”還是啟動到新應用中？ 如果它以內聯方式顯示，我將隱藏啟動圖像，如果它被啟動到一個新的應用程序，我不會。

一種方法是嗅探用戶代理以查看它是否是電話。 出於顯而易見的原因，這不是一個好主意（當新手機出現時可能會破壞，必須在100多台設備上進行測試）。 另一種可能性是當我們離開頁面跳轉到視頻播放器或從視頻播放器返回時捕獲某種事件。 但我不知道該抓什么。 我考慮過的另一種可能性是設置一個計時器來檢查視頻組件的某些屬性......看看它是否正在播放...或其他什么。

我正在使用jQuery，以防萬一。

Answer 1

在iOS上，您的視頻元素將具有webkitDisplayingFullscreen屬性，因此您可以檢查它並查看視頻是內嵌還是全屏：

var videoFullscreenStatus = document.getElementById("myVideo").webkitDisplayingFullscreen;

視頻播放全屏時屬性為true，否則為false。 因此，理論上，您可以在視頻開始播放后立即檢查，並相應地設置海報圖像。

我對Android不太熟悉，但有一個事件， webkitfullscreenchange ，你可以聽到它全屏時接聽。 不知道這是否適用於移動設備，我不相信它適用於iOS。

我知道這是一個老問題，但我希望這有助於某人！

Answer 2

檢查oncanplay 。 對於內聯播放的視頻，它似乎預設為null 。

var playsInline = typeof document.getElementByID('myVid')['oncanplay'] !== 'undefined';

或作為一種功能

function playsInLine(vidId) {
    return typeof document.getElementByID(vidId)['oncanplay'] !== 'undefined';
}

警告：此方法可能無法在所有設備上的所有瀏覽器中提供正確的輸出，並且由於將來的更改，它也可能會產生不需要的結果。 但在撰寫本文時，這對我來說無處不在（Windows：Chrome 42，IE11，FF36，Opera 29，Safari。Android：Chrome。iPad和iPhone 4S：Safari）