在iPad上播放HTML5視頻並尋求

Question

我似乎無法找出非常奇怪的錯誤。

我試圖讓用戶點擊播放時從某個位置播放HTML5視頻。 我正在嘗試讓它在視頻開始播放時尋找正確的位置。

在播放事件中我執行此操作this.currentTime = X

在瀏覽器上可以正常工作。 但是在iPad上，當我播放視頻時，視頻找不到正確的位置（從零開始）。

更奇怪的是，如果我在setTimeout中（例如說1秒）執行this.currentTime = X調用，則它可以在iPad上運行（有時）。

Answer 1

在iOS上，視頻是在播放時加載（請參閱第2項），而不是頁面加載時加載。 我的猜測是，當您運行this.currentTime = X ，視頻未加載，因此沒有任何效果。 這也解釋了為什么延遲操作有時可以解決問題：有時在一秒鍾后加載，有時卻沒有。

我沒有要測試的iOS設備，但我建議將已loadeddata偵聽器綁定到視頻，以便您的currentTime操作僅在視頻開始加載后發生：

// within the play event handler...
if(!isIOSDevice) {
     this.currentTime = X;
} else {
    function trackTo(evt) {
        evt.target.currentTime = X;
        evt.target.removeEventListener("loadeddata", trackTo)
    });
    this.addEventListener("loadeddata", trackTo);
}

您需要根據當前訪問是否來自iOS設備，在代碼的其他位置設置isIOSDevice 。

Answer 2

盡管這個問題已經很久了，但問題仍然存在。 我發現了一種解決方案，可在iOS 5和6（未測試iOS3 + 4）的多個經過測試的iPad（1 + 2 + 3）上運行：

基本上，您首先必須等待初始playing事件，然后為canplaythrough然后為progress添加一次性活頁夾-只有這樣，您才可以實際更改currentTime值。 在此之前的任何嘗試都將失敗！

視頻必須首先開始播放，這使得在視頻元素頂部的黑色層有點方便。 不幸的是，無法通過JavaScript禁用視頻中的聲音->並非完美的UX

// https://github.com/JoernBerkefeld/iOSvideoSeekOnLoad / MIT License 
// requires jQuery 1.8+
// seekToInitially (float) : video-time in seconds
function loadingSeek(seekToInitially, callback) {
    if("undefined"==typeof callback) {
        callback = function() {};
    }
    var video = $("video"),
        video0 = video[0],
        isiOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/) !== null,
        test;
    if(isiOS) { // get the iOS Version
        test =navigator.userAgent.match("OS ([0-9]{1})_([0-9]{1})");
        // you could add a loading spinner and a black layer onPlay HERE to hide the video as it starts at 0:00 before seeking
        // don't add it before or ppl will not click on the play button, thinking the player still needs to load
    }
    video.one("playing",function() { 
        if(seekToInitially > 0) {
            //log("seekToInitially: "+seekToInitially);
            if(isiOS) {
                // iOS devices fire an error if currentTime is set before the video started playing
                // this will only set the time on the first timeupdate after canplaythrough... everything else fails
                video.one("canplaythrough",function() { 
                    video.one("progress",function() { 
                        video0.currentTime = seekToInitially;
                        video.one("seeked",function() {
                            // hide the loading spinner and the black layer HERE if you added one before

                            // optionally execute a callback function once seeking is done
                            callback();
                        });
                    });
                });
            } else {
                // seek directly after play was executed for all other devices
                video0.currentTime = seekToInitially; 

                // optionally execute a callback function once seeking is done
                callback();
            }
        } else {
            // seek not necessary

            // optionally execute a callback function once seeking is done
            callback();
        }
    });
}

整個事情都可以從我的GitHub存儲庫中下載

Answer 3

ps葯者是正確的。 視頻開始播放后，Quicktime播放器將啟動，並且在觸發第一個“進度”事件之前將無法搜索視頻。 如果您在此之前嘗試搜索，則會收到無效的狀態錯誤。 這是我的代碼：

cueVideo = function (video, pos) {
    try {
        video.currentTime = pos;

    // Mobile Safari's quicktime player will error if this doesn't work.
    } catch(error) {
        if (error.code === 11) { // Invalid State Error

            // once 'progress' happens, the video will be seekable.
            $(video).one('progress', cueVideo.bind(this, video, pos));
        }
    }
}

Answer 4

嘗試將您的X限制為1個小數

X.toFixed(1);

正如您提到的，它有時會在1秒鍾后起作用。 playing后，您是否嘗試過設置位置？ 甚至canplaythrough事件

查看此頁面的源代碼，以查看可以使用的事件的完整列表（在javascript文件中）

Answer 5

感謝下面的答案。 不幸的是，如果當前時間> 0且<1，則只能檢查timeupdate內部的內容，然后再轉到視頻的該部分並將監聽器移至timeupdate。