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

Posted 2023-05-08

【中文标题】video.js 在视频末尾显示海报图像

【英文标题】：video.js display poster image at end of video

【发布时间】：2015-01-17 07:38:51

【问题描述】：

在 Adob​​e 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="">