web-dev-qa-db-ja.com

html5ビデオのポイントをシーク

Webページに表示される_html5 video_の特定のポイントをシークすることは可能ですか？つまり、特定の時間値（たとえば_01:20:30:045_）を入力して、プレーヤーコントロール（スライダー）をそのポイントに移動させ、そのポイントから先にプレイ​​することはできますか？

古いバージョンのmozillaではvlcpluginこれはseek(seconds,is_relative)メソッドによって可能になると思います。しかし、これがHTMLビデオで可能かどうか知りたいのです。

編集：

ビデオを含むページを作成し、以下のようにjavascriptを追加しました。リンクをクリックすると、クリックの時刻が表示されます。ただし、再生場所は増加しませんが、通常の再生は続行されます。

ビデオの再生場所を変更すべきではありませんか？

html

_<video id="vid" width="640" height="360" controls>
       <source src="/myvid/test.mp4" type="video/mp4" /> 
</video>
<a id="gettime" href="#">time</a>
<p>
you clicked at:<span id="showtime"> </span> 
</p>
_

javascript

_$(document).ready(function(){
    var player = $('#vid').get(0);
    $('#gettime').click(function(){
            if(player){
                current_time=player.currentTime;
                $('#showtime').html(current_time+" seconds");
                player.currentTime=current_time+10;
            }
        });
}
);
_
html5-videoseek
31
damon

v.currentTime = seconds;を使用して、特定の位置をシークできます。

リファレンス： https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

48
ThiefMaster

残念ながら、一部の映画要素では他とは異なる動作をするようです。たとえば、Amazon video_elementの場合、どこにでもシークしてからplayを呼び出す前に、pauseを呼び出す必要があるようです。ただし、currentTimeを設定した後にplayを「速すぎる」と呼ぶと、それは固執しません。奇数。

私の現在の回避策は次のとおりです。

function seekToTime(ts) {
  // try and avoid pauses after seeking
  video_element.pause();
  video_element.currentTime = ts; // if this is far enough away from current, it implies a "play" call as well...oddly. I mean seriously that is junk.
    // however if it close enough, then we need to call play manually
    // some shenanigans to try and work around this:
    var timer = setInterval(function() {
        if (video_element.paused && video_element.readyState ==4 || !video_element.paused) {
            video_element.play();
            clearInterval(timer);
        }       
    }, 50);
}
3
rogerdpack