HTML5 視頻 currentTime 屬性的問題

Question

一段時間以來，我一直在對 HTML5 視頻進行一些廣泛的試驗。 一個似乎不斷出現的問題是操縱 currentTime 屬性。

這是我的項目和腳本的簡要概述：

我有幾個數組存儲有關視頻序列的信息（視頻文件名、開始時間、持續時間、音頻時間）； 基本功能是視頻剪輯開始播放，下一個文件開始加載，當當前播放的視頻達到其目標持續時間時，加載的視頻開始播放等。目前我正在離線進行所有這些操作，所以實際下載時間對我來說還不是問題。 所以為了簡化，我的數組看起來像這樣：

videoArray = ["clip01.webm", "clip05.webm", "clip03.webm"];
startArray = [0.5, 0, 1.5];
durationArray = [5, 2.1, 1.5];

我一直面臨和解決的最大問題是設置每個視頻的開始時間。 每次我讓它工作時，我似乎都必須在幾周或幾個月后找到一個新的解決方案。 發生此問題的函數如下： 初始化第一個視頻后，腳本調用時間更新函數（縮短代碼）：

function timeUpdate() {

    var clip = document.getElementById(currentVideoTagId);
    clipTime = clip.currentTime;

    drawClip(clip); // function that displays the clip in a canvas element

    switchClip(); // function that checks for clip's target duration

    setTimeout(timeUpdate,40);
}

如您所見，此函數使用 SetTimeout 將 Video 繪制到 Canvas 元素中。 這也是我不斷檢查 1）是否已加載下一個要播放的剪輯以及 2）當前播放的視頻是否已達到其目標持續時間（縮短的代碼）的地方：

function switchClip() {

        if(!nextIsLoading){
            loadClip(nextSequenceIndex); // function that sets the video source, etc

            $("#" + nextVideoTagId).bind('canplay', function() {
                this.currentTime = sequence.starts[nextSequenceIndex];
            });

            nextIsLoading = true;
        }

        if(clipTime >= currentCut){

            playClip(); // function that starts playing the video
            nextIsLoading = false;
        }
}

所以使用檢查'canplay'的jQuery綁定是我最新的解決方案，它已經工作了一段時間。 我一直在 Mac for Chrome（最新版本）上進行所有實驗。 我用 PHP 從數據庫中生成了我的序列數據。 我最近切換到 PC（再次使用最新版本的 Chrome），因為我已經開始使用 Webmatrix 為這個新版本的項目生成我的序列數據。 據我所知，該項目的 javaScript 部分基本上是相同的，除了設置 currentTime 之外，一切正常。

更准確地說：視頻的 currentTime 仍然設置，我做了很多 console.logging 來觀察正在發生的事情以及可能發生錯誤的地方，但是，對我來說最奇怪的事情發生在這里（縮短的代碼）：

function playClip(){
    var newVideo = document.getElementById(currentVideoTagId);
    console.log("currentTime before play: " + newVideo.currentTime);
    newVideo.play();
    console.log("currentTime after play: " + newVideo.currentTime);
}

此函數中的第一個日志始終顯示我之前設置的 currentTime。 在 play() 之后，currentTime 總是回到 0。

到目前為止，我已經測試了很多東西，我一直在谷歌和這里，在 Stackoverflow 上尋找答案（這就是這個解決方案最初是如何工作的），但我現在已經沒有解決方案了.

有沒有人可以對這個問題有所了解？

我希望這篇文章能提供關於這個問題的足夠信息。

Answer 1

我假設您正在使用具有HTMLVideoElement接口的<video> ，繼承自HTMLMediaElement 。 在該界面中，您會注意到

seekable Read only TimeRanges用戶能夠搜索到的時間范圍（如果有）。

這表明如果您將currentTime設置為seekable之外的時間，它將無法按預期工作。 我沒有為此的測試環境（也許你可以設置一個小提琴），但我懷疑在設置currentTime或使用fastSeek之后調用videoElement.load() ，（在play之前）會鼓勵視頻變得可搜索並因此可播放從那時起。 您可能會發現preload會自動實現這一點。

這些接口是新的，並且會不斷變化，因此可以預期在未來的代碼中我會中斷。

Answer 2

這對我有用..

video = document.getElementById('video');
begin_play  = 50;
play_video_frist = true; //if you want to run only frist time    
video.addEventListener("play", capture, false);

function capture(event) 
{
     if (event.type == "play"){
         if(play_video_frist){
             play_video_frist = false;
             video.currentTime = begin_play;
          }
     }
}

Answer 3

響應視頻必須具有標頭Accept-Ranges: <bytes>才能正確設置currentTime屬性。