Video.js：在最后显示大播放按钮答案

【问题标题】：Video.js : show big play button at the endVideo.js：在最后显示大播放按钮
【发布时间】：2013-07-08 11:44:16
【问题描述】：

我想在视频末尾显示大播放按钮，以便用户轻松重播。

好像这个大的播放按钮是默认显示的（我看的每一篇文章都是为了隐藏而不是显示...），但对我来说不是这样...

我尝试编辑以下函数（在 video.dev.js 文件中）但没有任何改变：

vjs.Player.prototype.onEnded = function(){
  if (this.options_['loop']) {
      this.currentTime(0);
      this.play();
  }
  else {  // I am not using loop mode
      this.bigPlayButton.show();
      this.pause();
  }
};

感谢您的回复。

【问题讨论】：

标签： video.js

【解决方案1】：

有几种方法可以做到这一点。您可以在视频以API 结尾时显示按钮：

videojs("myPlayer").ready(function(){
  var myPlayer = this;
  myPlayer.on("ended", function(){
    myPlayer.bigPlayButton.show();
  });
});

或者，如果您确实想修改 video.dev.js，您只需取消注释执行相同操作的行：

vjs.BigPlayButton = vjs.Button.extend({
  /** @constructor */
  init: function(player, options){
    vjs.Button.call(this, player, options);

    if (!player.controls()) {
      this.hide();
    }

    player.on('play', vjs.bind(this, this.hide));
    // player.on('ended', vjs.bind(this, this.show)); // uncomment this
  }
});

或者使用 CSS，您可以强制在视频未播放（结束或暂停）时显示按钮：

.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button {display:block !important;}

您看到的关于隐藏它的帖子可能是指 video.js 的第 3 版，因为播放按钮显示在末尾。

【讨论】：

其实第二种方法行不通。我已经编辑了 video.dev.js 文件，但这没有任何改变......我错过了什么吗？
我刚刚从 videojs.com 获取了download，在video.dev.js 中取消注释该行并将demo.html 中使用的脚本从video.js 更改为video.dev.js。为我工作。
确实，它适用于 demo.html 文件。但是在我使用的文件中它不起作用。我不明白 video.js 和 video.dev.js 之间的区别？感谢您的帮助；）
video.dev.js 是video.js 的未缩小（可读）版本。

【解决方案2】：

将此代码放在 videojs 代码之后。效果很好。它不仅显示海报和大播放按钮，还允许您一次又一次地重新播放视频：

<script type="text/javascript">
    var vid = videojs("YOUR-VIDEO-ID"); 
    vid.on("ended", function()
        { 
            vid.posterImage.show(); //shows your poster image//
            vid.currentTime(0);
            vid.controlBar.hide(); //hides your controls//
            vid.bigPlayButton.show(); //shows your play button//
            vid.cancelFullScreen(); //cancels your fullscreen//
            document.mozCancelFullScreen(); //cancels your fullscreen in firefox//
        });  
    vid.on("play", function()  //function to play the video again//
        {  
            vid.posterImage.hide(); //hides your poster//
            vid.controlBar.show(); //shows your controls//
            vid.bigPlayButton.hide(); //hides your play button//
        });
</script>

我唯一不能开始工作的就是用 Firefox 退出全屏...但我不知道还能做什么。

【讨论】：

【解决方案3】：

我创建了这个插件来“重置”播放器并显示大播放按钮和视频海报

https://github.com/brianpkelley/video-js-4-plugins/blob/master/showPosterAtEnd/videojs.showPosterAtEnd.js

【讨论】：

【解决方案4】：

我不知道为什么，但我无法让这里提到的答案起作用，也许是因为我使用的是更新版本的播放器，所以像 vid.posterImage.show() 这样的事情对我没有任何帮助.

在版本 5.19.2（当前版本）上，我能够通过在事件侦听器“结束”上将 hasStarted 设置为 false，将播放器重置为默认状态（在第一次按下播放按钮之前）。

示例：

var player = videojs('player');

player.on("ended",function(){

    player.hasStarted(false);
});

这会带回大按钮、海报并隐藏控件。

【讨论】：