不同的html5視頻之間的平滑過渡

Question

我有一個視頻標籤列表，我需要與預設currentTime一個一個播放。當我加載頁面時，視頻的readyState卡住了1，視頻給出了一個開始的故障。我已經使用了預加載屬性，但視頻需要花費時間在每臺交換機上開始播放。即使某些視頻具有currentTime設置並且readyState = 4，播放視頻也需要時間。我查看了xhr createObjectURL blob方法，但是需要花費很長時間才能下載所有視頻。出於同樣的原因，我沒有嘗試MediaSource API。

Answer 1

媒體源擴展（MSE）不需要您在播放之前下載整個視頻。

它允許您按部分申請一個視頻片段，並以任何您想要的方式操作這些片段，然後將它們設置爲視頻播放器的源。

有一些樣品的JavaScript，我認爲有助於理解這裏的方法沿着一個很好的概述：https://www.html5rocks.com/en/tutorials/eme/basics/

，你可以在這裏看到一個簡單的工作示例：https://github.com/bitmovin/mse-demo/blob/master/index.html

的一般方法是：

• 創建MediaSource的對象
• 設置視頻元素的來源在HTML頁面中的對象MediaSource的
• 添加偵聽器MediaSource的被打開（當視頻被播放）
• 得到第一片段，並添加一個監聽請求下一段
• 作爲段被接收到它們附加到MediaSource的緩衝器
• 當沒有更多的片段要求停止

在你的情況下，你可以立即開始請求下一個視頻，當你到達第一個結尾。

對於mp4視頻而言，另外一件事情通常會在最後顯示其元數據，這意味着您需要下載整個視頻才能開始。您可以使用特殊工具將元數據移動到開始位置，或者如果您自己進行轉碼，只需確保將它放在首位即可。例如，ffmpeg支持使用命令行選項「-movflags faststart」移動數據。