jQuery & JWPlayer: bloccare un pulsante fino alla fine del video

L’esigenza è abbastanza classica: fare in modo che un utente finisca di guardare un video, prima di fargli compiere un’azione. Nel mio caso gli attori coinvolti sono JWPlayer (uno dei più diffusi video player basati su Javascript) e LearnPress (un plugin per la gestione di corsi online).

Ho pensato di usare jQuery per tenere “bloccato” il pulsante di avanzamento della lezione, finché il video non viene completato. Ovviamente l’approccio si può adattare anche per altri scopi e per altri Video Player (ad esempio ne ho fatta una versione anche per Vimeo).

Nel dettaglio, nel mio caso agisco su un bottone che ha come classe ‘button-complete-lesson’, lo stesso script si può modificare in modo da agire su altre classi (o id).

Il primo passo è quello di usare le API di JWPlayer, per capire quali azioni potevano essere utili: in questo caso sfruttiamo play, time, pause e complete.

Ecco il codice:

/*
LearnPress - Block complete button - JWPlayer version
Version 0.1 beta

First release by Fabio Grasso - [email protected]
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License (http://creativecommons.org/licenses/by-sa/4.0/)
*/

jQuery(function($) {
  var videoClass = '.jwplayer';
  var debug = true;

  if (typeof jwplayer === 'function') checkVideoComplete(); // check if jwplayer is loaded

  function checkVideoComplete() {
    var warningText = 'You need to watch all the video before complete the lesson!';
    var warningClass = 'button-disable-text';
    var alertText = 'It seems that video has not been looked at completely. Please watch all the video before complete the lesson!';

    var videoDuration = 0.00;
    var videoStartTime = 0.00;
    var videoEndTime = 0.00;
    var videoPauseTime = 0.00;

    $('.button-complete-lesson').prop('disabled', true);
    $('.button-complete-lesson').after('<div class="' + warningClass + '">' + warningText + '</div>'); // aggiungo il testo di allerta

    jwplayer().on('play', function() {
      videoDuration = jwplayer().getDuration();
      var videoCurrentTime = Date.now() / 1000;
      if (videoPauseTime <= 0) {
        videoStartTime = videoCurrentTime;
        if (debug) console.log(videoCurrentTime + ' Video play started - duration: ' + videoDuration);
      } else {
        var videoPauseDuration = videoCurrentTime - videoPauseTime;
        videoStartTime += videoPauseDuration;
        if (debug) console.log(videoCurrentTime + ' Restored from pause - Pause duration: ' + videoPauseDuration + ' - New start time: ' + videoStartTime);
      }
    });

    jwplayer().on('time', function() {
      checkAndDisable();
    });

    function checkAndDisable() {
      videoCurrentTime = Date.now() / 1000;
      videoPlayTime = videoCurrentTime - videoStartTime;
      if (videoPlayTime >= (videoDuration - 0.2)) {
        $('.button-complete-lesson').prop('disabled', false);
        $('.button-disable-text').remove();
      }
      return;
    }

    jwplayer().on('seeked', function() {
      var videoCurrentTime = Date.now() / 1000;
      if (debug) console.log(videoCurrentTime + ' Video play seeked - Video play time: ' + (videoCurrentTime - videoStartTime));
    });

    jwplayer().on('pause', function() {
      videoPauseTime = Date.now() / 1000;
      if (debug) console.log(videoPauseTime + ' Video paused - Video play time: ' + (videoPauseTime - videoStartTime));
    });


    jwplayer().on('complete', function() {
      videoEndTime = Date.now() / 1000;
      videoPlayTime = videoEndTime - videoStartTime;

      if (debug) console.log(videoEndTime + ' Video play completed - Video play time: ' + videoPlayTime);

      if (videoPlayTime < (videoDuration - 0.2)) {
        alert(alertText)
        videoPauseTime = videoEndTime;
      } else {
        checkAndDisable();
      }
    });

  }
})

Potete vedere una demo del funzionamento su JSFiddle