web-dev-qa-db-ja.com

HTML5ビデオのシームレスループ

私はこの質問が何度も尋ねられたことを知っており、私はここStackOverflowでそれらすべてを1つずつ調べました。

私は、HTML5プレーヤーで5秒のMP4ビデオをループさせて、シームレスにしようとしているだけです。ローカルとウェブスペースの両方でjwplayerとvideo.jsの両方を試しましたが、どちらもうまくいきませんでした。 「終了した」イベントを使用してみました。私はプリロード/プリバッファリングを試しました。ビデオの最後の1秒間を聞いてから、最初に停止/再生イベントを完全にバイパスすることを試みました。常にジッターが表示され、常に読み込みアイコンが表示されます（最新のChrome＆Firefox））。

参考までに、video.jsの最新コードの一部を以下に示します。

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
  width="640" height="480"
  data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
  var myPlayer = videojs("loop_me");
  videojs("loop_me").ready(function(){
    this.on("timeupdate", function(){
      var whereYouAt = myPlayer.currentTime();
      if (whereYouAt > 4) {
        myPlayer.currentTime(1);
      }
    });
  });
</script>

誰かがこれをうまく成功させましたか？そして、もしそうなら、あなたは完全な解決策を投稿していただけませんか？普段は求めたり欲しいとは思いませんが、今回は必要かもしれないと思います。

javascripthtmlvideovideo.js
20
daveycroqet

これを試して：
1）ビデオを次のように編集します。
[1s] [2s] [3s] [4s] [5s]
ビデオの最初の2番目のブロックをカットし、次のように最後に2x追加します：
[2s] [3s] [4s] [5s] [1s] [1s]

2）コードを使用：

<video id="vid"  width="100" height="50" loop autoplay preload="true">
    <source src="something.mp4" type="video/mp4">
</video>

<!-- Goes to end of body of course -->
<script>
    var vid = document.getElementById("vid");
    vid.addEventListener("timeupdate", function () {
        if(this.currentTime >= 5.0) {
            this.currentTime = 0.0;
        }
    });
</script>

この背後にあるアイデアは、ビデオをシームレスにすることです（ビデオの終わりはビデオの始まりです）。また、ビデオが終了しないようにする必要があります。 loop属性は小さいビデオファイルで機能しますが、大きすぎると（次のループの反復前に）ビデオの最後に黒い画像が表示されます。基本的に、ビデオが終了する前に、0.0秒に戻ろうとしています。

お役に立てば幸いです。

2
Quin

ヘレカ！

私は、この問題に対する実際の、実際の、回避策のない解決策を、私が働いている場所で見つけました。複数の開発者による一貫性のない動作についても説明しています。

Tl; drバージョンはBitratesです。誰が推測したでしょうか？ Adobe Media Encoderを使用している場合、多くの人々がこれに標準値を使用していると思います。これは通常、HDビデオでは約10 Mbit/sです。これでは不十分です。正しい値は18 Mbit/sまたはおそらくそれ以上です。 16はまだ少しぎこちないです。これがどれほどうまく機能するかは表現できません。これまでに、ビデオエディターと一緒にこれが見つかるまで、約5時間、最も厄介な回避策を試しました。

これがすべての人に役立ち、時間を大幅に節約できることを願っています！

1
Merritt6616