video.js - Video.js プラグインを初期状態にリセットする

Question

jquery ui tabs とvideo.jsを使用しています。別のタブに移動したときにビデオを停止し、2 番目のタブに戻ったときにビデオをリセットしたい。

Answer 1

VideoJS v4.6 以降、次のようにしてプレーヤーをリセットできます。

player.pause().currentTime(0).trigger('loadstart');

これloadstartは、ポスター画像を表示し、最初のプレイ イベントを再バインドするキーです。

Answer 2

これをポスターの表示やbigplayボタンの表示に使用できます

$( '.backlink' ).click( function() {
                // Player (this) is initialized and ready.
            var myPlayer = _V_("video9");
            myPlayer.currentTime(0); // 2 minutes into the video            
            myPlayer.pause();
            myPlayer.posterImage.el.style.display = 'block';
            myPlayer.bigPlayButton.show();
        });

Answer 3

player.reset();

人生は単純。

Answer 4

videojs がこれらの文字を追加するため、_html5_api を id に追加するだけで、ビデオの ID を取得できます。その後、pause を使用して currentTime を 0 に等しくすることができます。

var videoStop = document.getElementById(videoId+"_html5_api");
 videoStop.pause();     
 videoStop.currentTime= 0; 

Answer 5

まず、ビデオ プレーヤーへの参照が必要です。 http://videojs.com/docs/api/

var myPlayer = _V_("myVideoID");

その後、API を使用してビデオを開始/停止/リセットできます。

止まる：

myPlayer.pause();

リセット:

myPlayer.currentTime(0);

jquery タブがどのように設定されているかはわかりませんが、次のことができるかもしれません。

$('.my-tab-class').click(function(){
  myPlayer.pause().currentTime(0);
});

Answer 6

私が見つけた解決策は、videojs api を使用し、reset 関数を呼び出し、続いて initChildren を呼び出してプレーヤー構造を再構築することでした。私は vesion 5.10.7 を使用しています。

videojs('sublime_video', {}, function () {
    var videoPlayer = this;
    videoPlayer.width(screen.width / 2);
    videoPlayer.height(720);
    videoPlayer.on("ended", function(){
        videoPlayer.reset().initChildren();
    });
});