video.js - 将 Video.js 插件重置为初始状态

Question

我正在使用 jquery ui tabs 和video.js。我想在转到另一个选项卡时停止视频，并在返回第二个选项卡时将其重置。

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

它甚至更容易。

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

Answer 4

player.reset();

生活是简单的。

Answer 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);
});

Answer 6

获取视频的 id。只需在 _html5_api 后面加上 id，因为 videojs 会附加这些字母，然后您可以使用 pause 并使 currentTime 等于 0。

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

Answer 7

我正在寻找一种重新初始化 VideoJS 插件的方法，然后我发现了这个：-

var player = videojs('my-player');
player.on('ended', function() {
  this.dispose();
});

只需处理掉视频并重新启动。

来源：- https://docs.videojs.com/tutorial-player-workflows.html#dispose

Answer 8

我找到的解决方案是使用 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();
    });
});