Reset Video.js plugin to initial state

问题:

I'm using jquery ui tabs and video.js. I want to stop the video when I go to another tab and reset it when I come back to second tab.

回答1:

As of VideoJS v4.6 you can do the following to reset the player:

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

That loadstart is the key which shows the poster image and rebinds the first play event.

回答2:

u can use this for show poster or show bigplay button

$( '.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();
        });

回答3:

player.reset();

Life is simple.

回答4:

Get the id of the video.just append _html5_api with the id since videojs appends these letters and then you could use pause and make currentTime equal to 0.

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

回答5:

First you need a reference to the video player. http://videojs.com/docs/api/

var myPlayer = _V_("myVideoID");

Then you can use the API to start/stop/reset the video.

Stop:

myPlayer.pause();

Reset:

myPlayer.currentTime(0);

I'm not sure how the jquery tabs are set up, but you might be able to do:

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

回答6:

The solution I found was using the videojs api, invoke the reset function followed by initChildren for reconstruct the player structure, i'm using 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();
    });
});

回答7:

It's even easier.

let player = Video(el);
player.on('ended', () => {
    player.initChildren();
});