Question

在Adobe Muse中使用VIDEO.JS 目前我的海报图片配置为在视频开头显示，当视频结束时，我希望海报图像重新出现。谢谢你的帮助！

Answer 1

将来，最佳方式将通过css实现。我只是added an issue for it。

.video-js.vjs-has-ended .vjs-poster {
  display: block;
}

现在有两种方法可以使用javascript。

var myPlayer = videojs(myId);

myPlayer.on('ended', function(){
  this.posterImage.show();
});

// or

myPlayer.on('ended', function(){
  this.trigger('loadstart');
});

您需要针对特定用例进行测试。

Answer 2

这对我有用！视频JS 6.6

var video_player;

$(document).ready(function()
{
    // 'videoplayer' is the ID of our <video> tag
    videojs("my-video", {}, function()
    {
        video_player = this;

        video_player.on('ended', function()
        {
            video_player.posterImage.show();
            $(this.posterImage.contentEl()).show();
            $(this.bigPlayButton.contentEl()).show();
            video_player.currentTime(0);
            video_player.controlBar.hide();
            video_player.bigPlayButton.show();
            video_player.cancelFullScreen();
        });

        video_player.on('play', function()
        {
            video_player.posterImage.hide();
            video_player.controlBar.show();
            video_player.bigPlayButton.hide();
        });
    });
});

Answer 3

您应使用here所指定的以下内容

var player = videojs('#example_video_1', {}, function() {
    this.on('ended', function() {
    player.exitFullscreen();
    player.hasStarted(false);
  });
});

Answer 4

这对我有用：

    /* Show poster when paused or stopped */
.video-js.vjs-default-skin.vjs-paused .vjs-poster {
    display:none !important;
}
.video-js.vjs-default-skin.vjs-ended .vjs-poster {display:block !important;}

Answer 5

我正在使用VideoJS 5.12.6。以上解决方案都不适合我。我最终使用了：

myPlayer.on（＆＃39;结束＆＃39;，function（）{

$（＆＃39; body .vjs-poster＆＃39;）。fadeIn（）;

}）;

Answer 6

在CSS于2018年7月开始工作后，我对@heff的回复进行了投票。

下课后：

.vjs-has-started .vjs-poster {
  display: none;
}

添加课程：

vjs-ended .vjs-poster {
  display: inline-block;
}

这会将海报恢复到默认的可见状态。除非您想增加类的特殊性，否则vjs-ended类必须位于vjs-has-started类之后。

这对我来说是两个独立的项目。我喜欢Video.js允许我在CSS中做很多事情而不必使用JavaScript的方式。

Answer 7

对于2020年的video.js版本 7.8.1 ，在@ chukwuma-nwaugha回答之后，我得出了以下结论：

var options = {};
var player = videojs('example_video_1', options, function onPlayerReady() {
    this.on('ended', function() {
        if (player.isFullscreen()) {
            player.exitFullscreen();
        }
        player.hasStarted(false);
    });
});

video.js在视频结尾处显示海报图片

7 个答案: