video.js 在视频末尾显示海报图像答案

【问题标题】：video.js display poster image at end of videovideo.js 在视频末尾显示海报图像
【发布时间】：2015-01-17 07:38:51
【问题描述】：

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

【问题讨论】：

【解决方案1】：

将来最好的方法是通过css。我只是added an issue for it。

.video-js.vjs-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');
});

您需要针对您的特定用例测试两者。

【讨论】：

谢谢赫夫。是的，我希望使用 css，但在 video.js 播放器设计器中找不到任何东西。
投反对票，因为它可能在 2014 年有效，但在 2018 年对我无效...
不确定年份，可能与您的版本有关。 2020 年为我工作。?‍♂️ github.com/videojs/video.js/issues/1938#issuecomment-77880630

【解决方案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();
        });
    });
});

【讨论】：

【解决方案3】：

您应该使用以下指定的here

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

【讨论】：

为这个常见问题找到了很多不同的解决方案，但这是唯一对我有用的解决方案。

【解决方案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;}

【讨论】：

【解决方案5】：

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

myPlayer.on('结束', function(){

$('body .vjs-poster').fadeIn();

});

【讨论】：

【解决方案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 斗争的方式。

【讨论】：

【解决方案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);
    });
});

【讨论】：

【解决方案8】：

您可以使用 css 显示海报图片：

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

请注意：您必须从 html 视频标签中删除 poster 属性：

 <video id="my-video" style="position: unset"
                                       class="video-js vjs-theme-fantasy"
                                       controls
                                       preload="auto"
                                       poster="MY_VIDEO_POSTER.jpg"
                                       data-setup="{}">

要这样：

 <video id="my-video" style="position: unset"
                                           class="video-js vjs-theme-fantasy"
                                           controls
                                           preload="auto"
                                           data-setup="{}">

【讨论】：