add defaultFormat option to select a quality before the first play

Author: TVS-Bruno

index.html

@@ -21,6 +21,7 @@
     (function(window, videojs) {
       var player = window.player = videojs('videojs-qualityselector-player');
       player.qualityselector({
+        defaultFormat: 'small',
         sources: [
           { format: 'highres', src: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', type: 'video/mp4'},
           { format: 'hd1080', src: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', type: 'video/mp4'},

src/plugin.js

@@ -5,6 +5,7 @@ class QualitySelector {
     this.player = player;
     this.sources = [];
     this.callback = undefined;
+    this.defaultFormat = undefined;
     this.containerDropdownElement = undefined;
     this.defaults = {};
   }
@@ -17,35 +18,55 @@ class QualitySelector {
       this.callback(quality);
     }
 
+    let source = this.setPlayerSource(quality.code);
+
+    if (source) {
+      this.player.on('loadedmetadata', () => {
+        this.player.play();
+
+        Array.from(this.containerDropdownElement.firstChild.childNodes).forEach(ele => {
+          if (ele.dataset.code === quality.code) {
+            ele.setAttribute('class', 'current');
+          } else {
+            ele.removeAttribute('class');
+          }
+        });
+      });
+      this.changeQualitySelectorLabel(quality.name);
+    }
+
+    this.onToggleDropdown();
+  }
+
+  /**
+   * Set the main video source of the player with the given format code
+   * @param {string} formatCode
+   * @returns {Object} the source if the player has been updated
+   */
+  setPlayerSource(formatCode) {
     if (this.sources) {
       // tries to find the source with this quality
-      let source = this.sources.find(ss => ss.format === quality.code);
+      let source = this.sources.find(ss => ss.format === formatCode);
 
       if (source) {
         this.player.src({ src: source.src, type: source.type });
-
-        this.player.on('loadedmetadata', () => {
-          this.player.play();
-
-          Array.from(this.containerDropdownElement.firstChild.childNodes).forEach(ele => {
-            if (ele.dataset.code === quality.code) {
-              ele.setAttribute('class', 'current');
-            } else {
-              ele.removeAttribute('class');
-            }
-          });
-        });
+        return source;
       }
+    }
+    return;
+  }
 
-      const player = document.getElementById(this.player.id_);
-      const qualitySelector = player.getElementsByClassName('vjs-brand-quality-link');
+  /**
+   * Change the displayed quality label in the controlbar
+   * @param {string} label
+   */
+  changeQualitySelectorLabel(label) {
+    const player = document.getElementById(this.player.id_);
+    const qualitySelector = player.getElementsByClassName('vjs-brand-quality-link');
 
-      if (qualitySelector && qualitySelector.length > 0) {
-        qualitySelector[0].innerText = quality.name;
-      }
+    if (qualitySelector && qualitySelector.length > 0) {
+      qualitySelector[0].innerText = label;
     }
-
-    this.onToggleDropdown();
   }
 
 	/**
@@ -84,7 +105,7 @@ class QualitySelector {
 
     buttonElement.className = 'vjs-brand-quality-link';
     buttonElement.onclick = (event) => this.onToggleDropdown(event);
-    buttonElement.innerText = options.text || 'Quality';
+    buttonElement.innerText = 'Quality';
 
     let ulElement = document.createElement('ul');
 
@@ -100,10 +121,18 @@ class QualitySelector {
       this.sources = options.sources;
     }
 
+    if (options.defaultFormat) {
+      this.defaultFormat = options.defaultFormat;
+    }
+
     options.formats.map((format) => {
       let liElement = document.createElement('li');
 
       liElement.dataset.code = format.code;
+      if (format.code === this.defaultFormat) {
+        liElement.setAttribute('class', 'current');
+        buttonElement.innerText = format.name;
+      }
 
       let linkElement = document.createElement('a');
 
@@ -127,6 +156,10 @@ class QualitySelector {
     this.player.controlBar.el().insertBefore(containerElement, fullScreenToggle);
 
     this.player.addClass('vjs-qualityselector');
+
+    if (this.defaultFormat) {
+      this.setPlayerSource();
+    }
   }
 }