MDL-76917 Libraries: Upgrade YouTube Playback Technology to 3.0.0

2023-06-20 09:18:19 +07:00
parent 0bb9a7826d
commit f1ecd6a940
5 changed files with 116 additions and 107 deletions
@@ -37,10 +37,10 @@ THE SOFTWARE. */
  var _isOnMobile = videojs.browser.IS_IOS || videojs.browser.IS_NATIVE_ANDROID;
  var Tech = videojs.getTech('Tech');

-  var Youtube = videojs.extend(Tech, {
+  class Youtube extends Tech {

-    constructor: function(options, ready) {
-      Tech.call(this, options, ready);
+    constructor(options, ready) {
+      super(options, ready);

      this.setPoster(options.poster);
      this.setSrc(this.options_.source, true);
@@ -62,9 +62,9 @@ THE SOFTWARE. */
          }
        }
      }.bind(this));
-    },
+    }

-    dispose: function() {
+    dispose() {
      if (this.ytPlayer) {
        //Dispose of the YouTube Player
        if (this.ytPlayer.stopVideo) {
@@ -83,15 +83,15 @@ THE SOFTWARE. */
      this.ytPlayer = null;

      this.el_.parentNode.className = this.el_.parentNode.className
-        .replace(' vjs-youtube', '')
-        .replace(' vjs-youtube-mobile', '');
+          .replace(' vjs-youtube', '')
+          .replace(' vjs-youtube-mobile', '');
      this.el_.parentNode.removeChild(this.el_);

      //Needs to be called after the YouTube player is destroyed, otherwise there will be a null reference exception
      Tech.prototype.dispose.call(this);
-    },
+    }

-    createEl: function() {
+    createEl() {
      var div = document.createElement('div');
      div.setAttribute('id', this.options_.techId);
      div.setAttribute('style', 'width:100%;height:100%;top:0;left:0;position:absolute');
@@ -114,9 +114,9 @@ THE SOFTWARE. */
      }

      return divWrapper;
-    },
+    }

-    initYTPlayer: function() {
+    initYTPlayer() {
      var playerVars = {
        controls: 0,
        modestbranding: 1,
@@ -249,9 +249,9 @@ THE SOFTWARE. */
      }

      this.ytPlayer = new YT.Player(this.options_.techId, playerConfig);
-    },
+    }

-    onPlayerReady: function() {
+    onPlayerReady() {
      if (this.options_.muted) {
        this.ytPlayer.mute();
      }
@@ -270,17 +270,17 @@ THE SOFTWARE. */
        this.cueVideoById_(this.url.videoId);
        this.activeVideoId = this.url.videoId;
      }
-    },
+    }

-    onPlayerPlaybackQualityChange: function() {
+    onPlayerPlaybackQualityChange() {

-    },
+    }

-    onPlayerPlaybackRateChange: function() {
+    onPlayerPlaybackRateChange() {
      this.trigger('ratechange');
-    },
+    }

-    onPlayerStateChange: function(e) {
+    onPlayerStateChange(e) {
      var state = e.data;

      if (state === this.lastState || this.errorNumber) {
@@ -326,19 +326,19 @@ THE SOFTWARE. */
          this.player_.trigger('waiting');
          break;
      }
-    },
+    }

-    onPlayerVolumeChange: function() {
+    onPlayerVolumeChange() {
      this.trigger('volumechange');
-    },
+    }

-    onPlayerError: function(e) {
+    onPlayerError(e) {
      this.errorNumber = e.data;
      this.trigger('pause');
      this.trigger('error');
-    },
+    }

-    error: function() {
+    error() {
      var code = 1000 + this.errorNumber; // as smaller codes are reserved
      switch (this.errorNumber) {
        case 5:
@@ -357,9 +357,9 @@ THE SOFTWARE. */
      }

      return { code: code, message: 'YouTube unknown error (' + this.errorNumber + ')' };
-    },
+    }

-    loadVideoById_: function(id) {
+    loadVideoById_(id) {
      var options = {
        videoId: id
      };
@@ -370,9 +370,9 @@ THE SOFTWARE. */
        options.endSeconds = this.options_.end;
      }
      this.ytPlayer.loadVideoById(options);
-    },
+    }

-    cueVideoById_: function(id) {
+    cueVideoById_(id) {
      var options = {
        videoId: id
      };
@@ -383,17 +383,17 @@ THE SOFTWARE. */
        options.endSeconds = this.options_.end;
      }
      this.ytPlayer.cueVideoById(options);
-    },
+    }

-    src: function(src) {
+    src(src) {
      if (src) {
        this.setSrc({ src: src });
      }

      return this.source;
-    },
+    }

-    poster: function() {
+    poster() {
      // You can't start programmaticlly a video with a mobile
      // through the iframe so we hide the poster and the play button (with CSS)
      if (_isOnMobile) {
@@ -401,13 +401,13 @@ THE SOFTWARE. */
      }

      return this.poster_;
-    },
+    }

-    setPoster: function(poster) {
+    setPoster(poster) {
      this.poster_ = poster;
-    },
+    }

-    setSrc: function(source) {
+    setSrc(source) {
      if (!source || !source.src) {
        return;
      }
@@ -441,25 +441,25 @@ THE SOFTWARE. */
          this.cueOnReady = true;
        }
      }
-    },
+    }

-    autoplay: function() {
+    autoplay() {
      return this.options_.autoplay;
-    },
+    }

-    setAutoplay: function(val) {
+    setAutoplay(val) {
      this.options_.autoplay = val;
-    },
+    }

-    loop: function() {
+    loop() {
      return this.options_.loop;
-    },
+    }

-    setLoop: function(val) {
+    setLoop(val) {
      this.options_.loop = val;
-    },
+    }

-    play: function() {
+    play() {
      if (!this.url || !this.url.videoId) {
        return;
      }
@@ -486,25 +486,25 @@ THE SOFTWARE. */
        this.trigger('waiting');
        this.playOnReady = true;
      }
-    },
+    }

-    pause: function() {
+    pause() {
      if (this.ytPlayer) {
        this.ytPlayer.pauseVideo();
      }
-    },
+    }

-    paused: function() {
+    paused() {
      return (this.ytPlayer) ?
-        (this.lastState !== YT.PlayerState.PLAYING && this.lastState !== YT.PlayerState.BUFFERING)
-        : true;
-    },
+          (this.lastState !== YT.PlayerState.PLAYING && this.lastState !== YT.PlayerState.BUFFERING)
+          : true;
+    }

-    currentTime: function() {
+    currentTime() {
      return this.ytPlayer ? this.ytPlayer.getCurrentTime() : 0;
-    },
+    }

-    setCurrentTime: function(seconds) {
+    setCurrentTime(seconds) {
      if (this.lastState === YT.PlayerState.PAUSED) {
        this.timeBeforeSeek = this.currentTime();
      }
@@ -533,21 +533,21 @@ THE SOFTWARE. */
          }
        }.bind(this), 250);
      }
-    },
+    }

-    seeking: function () {
+    seeking() {
      return this.isSeeking;
-    },
+    }

-    seekable: function () {
+    seekable() {
      if(!this.ytPlayer) {
        return videojs.createTimeRange();
      }

      return videojs.createTimeRange(0, this.ytPlayer.getDuration());
-    },
+    }

-    onSeeked: function() {
+    onSeeked() {
      clearInterval(this.checkSeekedInPauseInterval);
      this.isSeeking = false;

@@ -556,49 +556,49 @@ THE SOFTWARE. */
      }

      this.trigger('seeked');
-    },
+    }

-    playbackRate: function() {
+    playbackRate() {
      return this.ytPlayer ? this.ytPlayer.getPlaybackRate() : 1;
-    },
+    }

-    setPlaybackRate: function(suggestedRate) {
+    setPlaybackRate(suggestedRate) {
      if (!this.ytPlayer) {
        return;
      }

      this.ytPlayer.setPlaybackRate(suggestedRate);
-    },
+    }

-    duration: function() {
+    duration() {
      return this.ytPlayer ? this.ytPlayer.getDuration() : 0;
-    },
+    }

-    currentSrc: function() {
+    currentSrc() {
      return this.source && this.source.src;
-    },
+    }

-    ended: function() {
+    ended() {
      return this.ytPlayer ? (this.lastState === YT.PlayerState.ENDED) : false;
-    },
+    }

-    volume: function() {
+    volume() {
      return this.ytPlayer ? this.ytPlayer.getVolume() / 100.0 : 1;
-    },
+    }

-    setVolume: function(percentAsDecimal) {
+    setVolume(percentAsDecimal) {
      if (!this.ytPlayer) {
        return;
      }

      this.ytPlayer.setVolume(percentAsDecimal * 100.0);
-    },
+    }

-    muted: function() {
+    muted() {
      return this.ytPlayer ? this.ytPlayer.isMuted() : false;
-    },
+    }

-    setMuted: function(mute) {
+    setMuted(mute) {
      if (!this.ytPlayer) {
        return;
      }
@@ -614,9 +614,9 @@ THE SOFTWARE. */
      this.setTimeout( function(){
        this.trigger('volumechange');
      }, 50);
-    },
+    }

-    buffered: function() {
+    buffered() {
      if(!this.ytPlayer || !this.ytPlayer.getVideoLoadedFraction) {
        return videojs.createTimeRange();
      }
@@ -624,13 +624,13 @@ THE SOFTWARE. */
      var bufferedEnd = this.ytPlayer.getVideoLoadedFraction() * this.ytPlayer.getDuration();

      return videojs.createTimeRange(0, bufferedEnd);
-    },
+    }

    // TODO: Can we really do something with this on YouTUbe?
-    preload: function() {},
-    load: function() {},
-    reset: function() {},
-    networkState: function () {
+    preload() {}
+    load() {}
+    reset() {}
+    networkState() {
      if (!this.ytPlayer) {
        return 0; //NETWORK_EMPTY
      }
@@ -642,8 +642,8 @@ THE SOFTWARE. */
        default:
          return 1; //NETWORK_IDLE
      }
-    },
-    readyState: function () {
+    }
+    readyState() {
      if (!this.ytPlayer) {
        return 0; //HAVE_NOTHING
      }
@@ -657,17 +657,17 @@ THE SOFTWARE. */
        default:
          return 4; //HAVE_ENOUGH_DATA
      }
-    },
+    }

-    supportsFullScreen: function() {
+    supportsFullScreen() {
      return document.fullscreenEnabled ||
-             document.webkitFullscreenEnabled ||
-             document.mozFullScreenEnabled ||
-             document.msFullscreenEnabled;
-    },
+          document.webkitFullscreenEnabled ||
+          document.mozFullScreenEnabled ||
+          document.msFullscreenEnabled;
+    }

    // Tries to get the highest resolution thumbnail available for the video
-    checkHighResPoster: function(){
+    checkHighResPoster(){
      var uri = 'https://img.youtube.com/vi/' + this.url.videoId + '/maxresdefault.jpg';

      try {
@@ -690,7 +690,7 @@ THE SOFTWARE. */
      }
      catch(e){}
    }
-  });
+  }

  Youtube.isSupported = function() {
    return true;
@@ -763,10 +763,10 @@ THE SOFTWARE. */

  function injectCss() {
    var css = // iframe blocker to catch mouse events
-              '.vjs-youtube .vjs-iframe-blocker { display: none; }' +
-              '.vjs-youtube.vjs-user-inactive .vjs-iframe-blocker { display: block; }' +
-              '.vjs-youtube .vjs-poster { background-size: cover; }' +
-              '.vjs-youtube-mobile .vjs-big-play-button { display: none; }';
+        '.vjs-youtube .vjs-iframe-blocker { display: none; }' +
+        '.vjs-youtube.vjs-user-inactive .vjs-iframe-blocker { display: block; }' +
+        '.vjs-youtube .vjs-poster { background-size: cover; }' +
+        '.vjs-youtube-mobile .vjs-big-play-button { display: none; }';

    var head = document.head || document.getElementsByTagName('head')[0];

@@ -16,17 +16,26 @@ Instructions to import VideoJS player into Moodle:
 6. copy 'lang/' into 'videojs/' subfolder (so the result will be media/player/videojs/videojs/lang).

 Import plugins:
+YouTube Playback Technology for VideoJS 3.0.0
+---------------------------------------------
+https://github.com/videojs/videojs-youtube

+Instructions to import YouTube Playback Technology into Moodle:
 1. Copy https://github.com/videojs/videojs-youtube/blob/master/dist/Youtube.js into 'amd/src/Youtube-lazy.js'
   In the beginning of the js file replace
     define(['videojs']
   with
     define(['media_videojs/video-lazy']

-2. Download the latest release from https://github.com/HuongNV13/videojs-ogvjs/releases
+Ogv.js Playback Technology for VideoJS 0.2.1
+---------------------------------------------
+https://github.com/HuongNV13/videojs-ogvjs
+
+Instructions to import Ogv.js Playback Technology into Moodle:
+1. Download the latest release from https://github.com/HuongNV13/videojs-ogvjs/releases
   (do not choose "Source code")

-3. Copy videojs-ogvjs.js into 'amd/src/videojs-ogvjs-lazy.js'
+2. Copy videojs-ogvjs.js into 'amd/src/videojs-ogvjs-lazy.js'
   In the beginning of the js file:

   Replace
@@ -17,7 +17,7 @@
        <location>amd/src/Youtube-lazy.js</location>
        <name>videojs-youtube</name>
        <description>YouTube Playback Technology for Video.js.</description>
-        <version>2.6.1</version>
+        <version>3.0.0</version>
        <license>MIT</license>
        <repository>https://github.com/videojs/videojs-youtube</repository>
        <copyrights>