為什么 iOS 上的 Safari 沒有顯示我的 HTML5 視頻海報？

Question

我有這個網頁：
http://healthpad.net/dashboard/
它有 10 個<video>元素。

出於某種原因，當我在 iPad 上加載頁面時，它沒有顯示視頻海報。

請嘗試以下操作：

在桌面瀏覽器上加載頁面
在 iPad 或 iPad 模擬器上加載它，你會得到一個帶有播放按鈕的大黑盒子

請告訴我為什么會這樣？

這是我已經排除的：

圖像內容類型標頭。
我已驗證圖像內容類型標頭已正確設置。 在上面的示例中， Content-Type標題正確image/jpeg 。

干擾 video.js 庫
VideoJs 用於在桌面瀏覽器上顯示漂亮的播放按鈕並自定義控件。 但是，此庫不會干擾本機播放器。
只是為了確保，我創建了一個沒有 video-js 類的測試視頻頁面，因此庫不會選擇和處理該視頻。 事實上，測試頁面甚至不包含任何 JS 庫，它只是

<html><body>
    <video
        controls
        height="400"
        width="600"
        poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
        src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
    ></video>
</body></html>

http://healthpad.net/rj_templates/test/zzz/

使用 Mobile Safari 可能不支持的任何視頻屬性
上面的測試頁面只有一個普通的視頻標簽。 我嘗試刪除除src和poster之外的所有其他屬性，但沒有幫助。

大多數關於該主題的 StackOverflow 問題只是說“重啟你的 iPad”

這就是它變得奇怪的地方：

如果您對此進行谷歌搜索，StackOverflow 上已被接受的答案通常會說“重新啟動您的 iPad，它為我做了”。

所以我嘗試做同樣的事情，起初我只是說它在我的情況下不起作用。

然后，我嘗試了這個：
（以下所有內容均在 iPad 模擬器上）

去網站，視頻海報不顯示
轉到測試頁面（ http://healthpad.net/rj_templates/test/zzz/ ），視頻海報不顯示。
點擊home退出Safari（或者模擬器的Cmd+Shift+H mac快捷鍵）
雙擊主頁按鈕以獲取 Safari 之外的任務切換器，點擊並按住 safari 圖標，直到顯示終止按鈕。
殺死野生動物園
打開 safari（重新啟動）。 此時，如果您加載測試頁面（只有一個視頻的頁面），則會顯示海報。
現在轉到多視頻頁面：（ http://healthpad.net/dashboard/ ）。 視頻海報不顯示。
回到單視頻測試頁面，那個視頻海報也不再有效。
重復步驟 3 到 8，查看視頻海報停止工作的過程。

很明顯， Mobile Safari 在某些時候決定不再顯示任何視頻海報。 此外，顯然，我的網站觸發了這種情況。

說明：

當海報不再有效時，它不僅會出現在一個域中，也不會為任何其他站點加載視頻海報，無論它是否位於完全不同的域（例如來自http://www.videojs的演示視頻） .com/ ）。

為了重置此行為，根據我所見，您必須殺死並重新啟動 Safari。 只是關閉並重新打開它不會重置此狀態。

有誰知道為什么會這樣？ 有沒有辦法解決它？

Answer 1

編輯：看起來這不再有效。 考慮到 iOS 在過去 7 年中發生了多少變化，這並不令人震驚。

我通過使用 PNG 而不是 JPG 來完成這項工作。

奇怪的是，JPG 在本地的 iOS Safari 中工作（通過本地 wifi 上的 POW 服務器）但是當推送到登台時，海報圖像沒有加載。 本地代碼和暫存代碼都引用了 S3 上的同一個文件。

將文件格式更改為 PNG 並且可以正常加載。

Answer 2

我看到這個問題時不時地被點贊，盡管沒有答案。 所以這就是我最終做的：

在 iOS 上，我不會顯示視頻播放器（即使使用autoload=false ），我只會顯示海報和播放按鈕，兩個獨立的<img>標簽。 當它們被點擊時，我從 javascript 創建視頻播放器並告訴它播放。 工作正常，用戶看不出太大區別。

Answer 3

我通過在我的代碼中添加 preload="none" 來修復它。

<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">

Answer 4

在 Safari 設置中 [iOS7] 阻止彈出窗口關閉似乎可以解決這個問題，希望這會有所幫助。

Answer 5

好吧，如果有人仍然堅持這就是我在 React.js 中設法完成它的方式，但算法本身在任何框架中都應該有用：

首先，我在 useEffect 中使用以下內容檢測瀏覽器是否為 safari：

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

然后我將它設置在一個狀態對象中。

如果 safari 是真的，那么我不會顯示視頻，而是顯示一張以該海報為來源的圖像。 然后我在圖像標簽上有一個 onClick 處理程序，單擊它會將上述狀態更改回 false，因此圖像組件將停止顯示，而將顯示視頻。 現在您必須在這里解決的另一個問題是，在單擊圖像時，圖像將消失，視頻將出現，然后您必須再次單擊視頻才能播放。 那是糟糕的用戶體驗。 因此，您可以在設置狀態后簡單地將 ref 附加到視頻和圖像的點擊處理程序中：

videoRef.current.play()

這也將開始播放視頻。 我知道這是一個 hacky 解決方案，所以不要來找我，但這是我唯一能做的事情。

為什么 iOS 上的 Safari 沒有顯示我的 HTML5 視頻海報？

問題描述

5 個解決方案

解決方案1
16 2014-04-05 06:48:22

解決方案2
2 2014-02-16 08:54:42

解決方案3
2 2021-03-06 21:54:05

解決方案4
0 2014-06-03 06:20:11

解決方案5
0 2021-03-06 20:00:27

為什么 iOS 上的 Safari 沒有顯示我的 HTML5 視頻海報？

問題描述

5 個解決方案

解決方案1 16 2014-04-05 06:48:22

解決方案2 2 2014-02-16 08:54:42

解決方案3 2 2021-03-06 21:54:05

解決方案4 0 2014-06-03 06:20:11

解決方案5 0 2021-03-06 20:00:27

解決方案1
16 2014-04-05 06:48:22

解決方案2
2 2014-02-16 08:54:42

解決方案3
2 2021-03-06 21:54:05

解決方案4
0 2014-06-03 06:20:11

解決方案5
0 2021-03-06 20:00:27