如何檢測html5視頻是否將以內嵌方式播放

我有一個HTML5視頻，其頂部有一個閃屏圖像。在桌面設備上，我想單擊飛濺圖像以使圖像消失並播放視頻。在手機上，單擊圖像將使視頻在單獨的應用程序中播放，所以當用戶點擊返回到網頁時，我希望飛濺圖像仍然存在（純視頻組件，至少在我的Android手機，非常難看）。如何檢測html5視頻是否將以內嵌方式播放

如何判斷視頻是以「內聯」方式播放還是啓動到新應用中？如果它內聯顯示，我將隱藏飛濺圖像，如果它啓動到一個新的應用程序，我不會。

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

我使用jQuery，萬一它很重要。

來源

2012-06-26 mhenry1384

您是否發現了任何關於此內容話題呢？自今年春季以來我一直在尋找，我仍然渴望一種不會進行UA嗅探的解決方案。 – m90

我從來沒有想出答案。對於我的問題，我最終並不擔心在移動設備上，當您返回網頁時，飛濺圖像沒有回來，而且客戶從未抱怨過。 – mhenry1384

感謝您的回覆。我仍然在嗅探UA字符串....讓我們希望不久就會有東西出現。 – m90

在iOS視頻元素中會有webkitDisplayingFullscreen屬性，因此您可以檢查並找出如果視頻是在線或全屏：當視頻播放全屏

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

該物業是真的，假的除此以外。因此，理論上，只要視頻開始播放，您就可以檢查這一點，並相應地設置您的海報圖像。

我對Android比較不熟悉，但有一個事件webkitfullscreenchange，您可能可以在全屏顯示時收聽它。不知道這是否適用於手機，我不相信它適用於iOS。

我知道這是一個老問題，但我希望這可以幫助別人！

來源

2012-10-09 04:47:25

剛剛在iOS 6和document.getElementById（「myVideo」）上試過這個，webkitDisplayingFullscreen返回false。這可能已經過時了。 – RobW

@RobW：我剛剛在iOS 6和Beta 7上試用過它，它按預期工作。也許別的東西是你的設置？ –

檢查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）

來源

2015-04-29 14:18:55

如何檢測html5視頻是否將以內嵌方式播放

回答

相關問題