Видео.js: показать большую кнопку воспроизведения в конце

Я хотел бы показать большую кнопку воспроизведения в конце видео, чтобы пользователь мог легко воспроизвести ее.

Кажется, что эта большая кнопка воспроизведения отображается по умолчанию (все сообщения, которые я читаю, предназначены для скрытия, а не для показа...), но для меня это не так...

Я попытался отредактировать следующую функцию (в видео.разработка.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();
  }
};

Спасибо за ваши ответы.

6
video.js

4 ответов

есть несколько способов сделать это. Вы можете показать кнопку, когда видео заканчивается 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;}

сообщения, которые вы видели о скрытии, вероятно, относятся к версии 3 видео.JS, как с этим кнопка воспроизведения была показана в конце.

9

поместите этот код после кода 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... Но я не знаю, что еще делать.

4

Я создал этот плагин, чтобы "сбросить" плеер и показать большую кнопку воспроизведения и плакат видео

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

1

Я не знаю, почему, но я не могу получить ответы, упомянутые здесь, чтобы работать, может быть, потому, что я на более новой версии проигрывателя, поэтому делаю такие вещи, как vid.posterImage.показать() ничего не делает для меня.

в версии 5.19.2 (текущая версия) я смог сбросить плеер в состояние по умолчанию (до того, как кнопка воспроизведения будет нажата в первый раз), установив hasstarted в false на прослушивателе событий "закончился".

пример:

var player = videojs('player');

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

    player.hasStarted(false);
});

что приносит назад большую кнопку, плакат, и скрывает элементы управления.

0