如何在不加載整個內容的情況下尋找視頻中的時間戳？ (HTML5)

Question

我正在編寫一個用戶需要跳到視頻部分的應用程序。 下面的代碼可以工作，但速度很慢，因為視頻從頭開始加載。 有沒有辦法跳過視頻的一部分而不從頭開始加載？

這可以純粹在客戶端使用 javascript 完成，還是我還需要實現自定義后端解決方案？

<video id="video1" src="video.mov" type="video/quicktime" controls></video>

<button onclick="setCurTimeVideo(92)" type="button" value="92"> Skip to 1:32 </button>

<script>        
      var vid1 = document.getElementById("video1");

      function setCurTimeVideo(value) {
        vid1 = document.getElementById("video1");
        vid1.currentTime = value;
      };
</script>

Answer 1

您問是否可以僅在客戶端執行您的目標 - 答案通常是肯定的。

說“一般”的原因是您在服務器端還需要一些東西：

• 視頻的格式必須可以加載一些 header 信息，然后只解碼和播放您想要的部分，而無需解碼整個文件。
• 服務器必須能夠提供文件的“部分”或范圍，而不僅僅是整個文件。

幾乎所有常見的視頻格式 stream 都支持第一個要求，大多數服務器支持“范圍請求”，和/或專用的分塊流協議（如 HLS 或 DASH）支持第二個要求。 如果您沒有使用 HLS 或 DASH，您可能需要檢查您的服務器是否配置為支持范圍請求。

Answer 2

查看這個SO question 和這個jsfiddle，我建議確保在更新時間之前暫停視頻：像這樣：

function setCurTimeVideo(value) {
    vid1.play();
    vid1.pause();
    vid1.currentTime = value;
    vid1.play();
}