9 
<video width="640" height="360" src="http://jakelauer.com/fireplace.mp4" autoplay loop muted/>

ここでフィドル: http://jsfiddle.net/bWqVf/

IE9はそれをまともに処理します。これを克服するための推奨事項はありますか? このようなビデオでは、シームレスにループする必要がありますが、スキップ/一時停止が煩わしいことは明らかです。

編集:ご覧のとおり、JavaScriptを使用してループをシミュレートすると、測定可能な遅延があります: http://jsfiddle.net/bWqVf/13/

4

9 に答える 9

3

問題はブラウザ固有のビデオ処理に関連していると思います。

癖として、ビデオを に変換することで待ち時間を短縮できますが、ソースのwebm前に配置する必要があります。mp4

<video width="640" height="360" autoplay loop muted>
    <source src="http://jakelauer.com/fireplace.webm" type="video/webm" />
    <source src="http://jakelauer.com/fireplace.mp4" type="video/mp4" /> 
</video>
于 2013-08-02T20:54:28.753 に答える
0

あなたの問題は「コード関連」ではないと思います。それは実際のビデオ自体ともっと関係があります。動画をシームレスにループできるように編集すると、さらに効果的です。

これを行う方法についてのガイダンスが表示されますので、こちらをご覧ください。

これがお役に立てば幸いです。

編集: ビデオをイントロ部分とループ部分の 2 つのセクションに分割してみてください。それぞれの <video> 要素を作成し、同じ場所に配置して、2 番目のビデオを非表示にします。イントロに「終了」イベントを設定して、表示を切り替えて 2 番目のビデオを開始します。次に、2 番目のビデオ要素にループ属性を設定できます。

preload少なくともループするビデオに属性がある限り、2 つのビデオをシームレスに一緒に再生するのに問題はないはずです。

それでもうまくいかない場合は、同じループ動画で 2 つの動画要素を作成してみてください。1 つが再生されている間、もう 1 つを非表示にして currentTime をゼロに戻すことができるため、誰も見ていないときにシークの遅延が発生します。

上記のいずれもうまくいかない場合は、javascript を使用して別の方法を試すことができます。以下のコードはテストしていないことに注意してください。2 秒目からビデオを開始し、ビデオが 4 秒目に達すると (2 秒目から) 再び開始します。

function playVideo() {
    var starttime = 2;  // start at 2 seconds
    var endtime = 4;    // stop at 4 seconds

    var video = document.getElementById('player1');

    //handler should be bound first
    video.addEventListener("timeupdate", function() {
       if (this.currentTime >= endtime) {
            this.play();
        }
    }, false);

    //suppose that video src has been already set properly
    video.load();
    video.play();    //must call this otherwise can't seek on some browsers, e.g. Firefox 4
    try {
        video.currentTime = starttime;
    } catch (ex) {
        //handle exceptions here
    }
}
于 2013-08-05T01:03:57.020 に答える
0

この問題は、Electron で Chromium ラッパーを使用しているときに発生します。それにもかかわらず、私は問題の解決に近づきました (十分に近づいていません)。以下は、キューポイント A から B へのほぼシームレスなジャンプ バックにループを改善したもののリストです。

  1. キーフレームのみの mp4 ビデオがキーでした (ビデオのサイズが少し大きくなります)
  2. フレームレートに敏感なループを取得します。この小さなツールは、キーフレームとタイムコードを使用するときに大いに役立ちます: http://x3technologygroup.github.io/VideoFrameDocs/#!/documentation/FrameRates

( 3. 最後の項目は、1 と 2 の項目が役に立たない場合にのみ必要です。バッファを完全に埋めるために、ビデオ全体を XmlHTTPrequest でロードしました。)

var xhr = new XMLHttpRequest();
xhr.open('GET', '../assets/video/Comp1.mp4', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {

  if (this.status == 0) { // I used chromium and electron, usually status == 200 !
    var myBlob = this.response;
    var vid = URL.createObjectURL(myBlob);
    // myBlob is now the blob that the object URL pointed to.
    var v = document.getElementById("video");
    v.src = vid;
    // not needed if autoplay is set for the video element
    v.play();
    // This requires the VideoFrame-tool (see Nr. 2.)
    var videoFrame = new VideoFrame({
      id: 'v',
      frameRate: 25, // ! must match your video frame rate
      callback: function(response) {
        // I jump from fram 146 to 72 
        if (videoFrame.get() === 146) {
          // now, jump! Dealbreaker is that the seek is stopping the video
          // and the few ms to play it again bugger up the experience. 
          // Any improvements welcome!
          videoFrame.seekBackward(71, function() {
            v.play();
          });

        }
      }
    });

    videoFrame.listen('frame', 25);

    v1.play();

  }
}

xhr.send(null);

このコードで発生する唯一の問題は、シークによってビデオが停止し、play() を再度トリガーする必要があることです。これによりグリッチが発生し、ジャンプしたい実際のキューポイントの 3 フレーム前に戻ることで解決しました。

異なるハードウェアで異なるビデオを使用した場合、これはまだ不正確ですが、おそらく解決策に近づくことができます-私もです! :)

于 2015-09-22T21:42:25.020 に答える
0

私のために働いた（そして大量のJavaScriptを必要としない）解決策は次のようなものです：

var video = document.getElementById('background-video');
var loopPoint = 15; // s

function resetVideo() {
  if (video.currentTime >= loopPoint) {
    video.currentTime = 0;
  }
}
video.addEventListener('timeupdate', resetVideo);

残念ながら、ビデオ/オーディオの更新のたびにコールバックを使用するため、これは非常にコストがかかると思います。

于 2015-09-18T22:53:34.633 に答える
-2

問題は何もありません。

開始スライドと終了スライドが異なります。両方のスライドが同じ場合、ループは問題なく表示されます。これらのスライドのみが一致していないため、数秒で一時停止しているように見えます。それらを避けて、試してみてください。

于 2013-08-05T09:52:12.680 に答える
-2

わかりました...多くの試行錯誤の後、これが最終的にうまくいきました。ビデオは終了後に更新されていないように思えたので、再生が終了したときにすべてのプロパティをもう一度思い出させました。

myVid.setAttribute('src', "videos/clip1.mp4");
myVid.autoplay = true;  
myVid.addEventListener('ended', vidEnded);  

function vidEnded()
{
    myVid.setAttribute('src', "videos/clip1.mp4");
    myVid.autoplay = true;          
}
于 2013-12-26T20:28:55.283 に答える