HTML5 視頻循環卡頓

Question

我的網站上有一個簡單的 HTML5 視頻。 我希望它循環，所以我向它添加了loop標簽。 它有效，問題是它每次重新啟動時都會結結巴巴。 視頻很短，只有 8 秒，但是當它到達結尾，然后重新開始時，視頻的第一幀“凍結”了大約半秒。 我在 Chrome 和 Firefox 上對其進行了測試，它只發生在 Chrome 上。

在谷歌之后，我發現了幾個解決方法，但沒有一個對我有用。 我試圖在 JS 中捕捉視頻的ended事件，所以我再次play視頻，以在視頻開始播放$video.attr('poster', '')時清除視頻的海報圖像，等等。

如果我在 Windows 媒體播放器或任何其他打開“重復”模式的視頻播放器上播放視頻，它會循環播放而不會卡頓，所以我認為這與視頻編碼無關。

<video loop>
    <source src="myvid.mp4" type="video/mp4">
</video>

Answer 1

在嘗試優化視頻大小時，我找到了Handbrake ，一個視頻編輯軟件。 在使用這個軟件優化我的視頻大小后，它從1.4MB變為272KB，神奇地消失了。

畢竟，它實際上是關於視頻編碼，或與之相關的東西。

對於那些從谷歌來到這里並且已經在其他堆棧問題中嘗試過針對此問題的解決方法的人，嘗試使用Handbrake優化您的視頻，我希望您的“口吃”消失。

Answer 2

在我自己嘗試循環無縫Ken Burns剪輯作為英雄單位的背景時，我也遇到了莫名其妙的口吃問題。 事實證明， loop屬性在許多瀏覽器中都沒有很好地實現，通常在恢復播放之前給我半秒到整秒的暫停。 要糾正這個問題，我必須實現自己的循環行為：

document.querySelector('video').addEventListener('ended', function(e) {
    e.target.currentTime = 0;
    e.target.play();
}, false);

這在測試中足夠快，看起來實際上是無縫的。 復雜流編碼（例如使用先行幀或其他非基線特征）只會使這個整體問題復雜化。 始終確保導出視頻“for the web”/“streaming”，這會禁用這些不兼容的功能。

Answer 3

我將amcgregor 的解決方案與Thomas Brad 的解決方案合並，並想出了這樣的事情：

document.querySelector('video').addEventListener('timeupdate', function(e) {
    if(e.target.duration - e.target.currentTime <= 1) {
        e.target.currentTime = 0;
        e.target.play();
    }
}, false);

即使對於編碼不好的視頻，這種口吃也會消失。