如何讓視頻背景在iPhone /手機上播放？

Question

我們計劃使用After Effects視頻作爲我們的橫幅/英雄圖像，因爲我們的動畫序列有點複雜。但是，當我們看到使用這種技術的網站的例子時，iPhone /手機版本是靜態的。

有沒有辦法使iPhone上的視頻背景也可以使用？什麼是可能的解決方法？

我們認爲我們可以在桌面上使用完整的視頻動畫，然後使用較短的GIF版本進行移動（它仍然具有動畫效果）。

還有其他方法可以實現嗎？

Answer 1

有許多方法可以實現您所追求的效果。

• 如果幀速率非常低是可以接受的，那麼使用帶有轉換的GIF或靜態圖像序列可能就足夠了。

• 如果移動區域不是很大，可以使用spritesheet動畫。如果它不太長，您甚至可以爲整個屏幕呈現視頻。您可以對視頻進行信箱顯示或以低分辨率放大顯示，以縮小所需的spritesheet的大小。

• 您可以使用平移背景和移動精靈的組合來創建動態視頻背景。粒子效果，燈光效果，GPU在實時遊戲中所做的所有事情都可以用於使菜單背景看起來像視頻。

• 從理論上講，您可能能夠將OpenH264移植到您的目標平臺並本機播放視頻，但這可能超出了您想要的範圍。

Answer 2

您不能在移動Safari上使用HTML5視頻，因爲在iPhone上禁止播放內聯視頻。您可以在Android版Chrome上執行此操作，但回放需要啓動有效的用戶互動（touchstrart）。

您只剩下JavaScript/CSS動畫或像您提到的動畫圖像一樣。 APNG可能會提供iOS上GIF的更好選擇。

我已經看到其他的解決方案，但沒有提供一個體面的用戶體驗 - 靜態圖像可能不是一個壞主意如果你不想花太多時間在它上面。

注意：如果您正在構建應用程序，則可以在iPhone上播放內嵌視頻。限制只適用於移動Safari。