MDL-76917 Libraries: Upgrade YouTube Playback Technology to 3.0.0

media/player/videojs/amd/src/Youtube-lazy.js

@@ -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];
 

media/player/videojs/readme_moodle.txt

@@ -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

media/player/videojs/thirdpartylibs.xml

@@ -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>