ループ上のHTML5ビデオスタッター

Question

私のウェブサイトには簡単なHTML5ビデオがあります。ループさせて、loopというタグを追加しました。それはうまくいきます、問題はそれが再起動するたびにつぶれているということです。ビデオは非常に短く、わずか8秒ですが、最後に達してから再起動すると、ビデオの最初のフレームが約半分の時間で「フリーズ」します。私はChromeとFirefoxでそれをテストしましたが、Chromeでのみ発生します。

Googleの後、私はいくつかの回避策を見つけましたが、どれも私のために働いていませんでした。私は$video.attr('poster', '')の再生を開始したときにビデオのポスター画像をクリアするために、playのビデオを再びJSのビデオのendedイベントにキャッチしようとしました。

「リピート」モードをオンにしてWindows Media Playerやその他のビデオプレーヤーでビデオを再生すると、ループが途切れることなくループするので、ビデオエンコードに関連するとは思われません。

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

Answer 1

私のビデオサイズを最適化しようとすると、私は、ビデオ編集ソフトウェアをHandbrakeを見つけました。このソフトウェアでビデオサイズを最適化した後、1.4MBから 272KBになり、魔法のようにスタッターが消えました。

結局のところ、それは本当にビデオエンコーディングか何かに関連していました。

Googleからここに来て、他のスタックの質問でこの問題に示唆された多くの回避策を既に試したことがある人は、あなたのビデオをHandbrakeで最適化してみてください。