'+this.localize("Up Next")+'
\n \n
\n "}),n.appendChild(this.contentEl_),n},a.countdown=function(t){if(void 0===t&&(t=10),0==t)return this.timeup(),!1;var e=this,n=0,i=Math.PI,o=t;o=o/360*1e3,function t(){n++,n%=360;var a=n*i/180,l=125*Math.sin(a),s=-125*Math.cos(a),r=n>180?1:0,p="M 0 0 v -125 A 125 125 1 "+r+" 1 "+l+" "+s+" z";e.getChild("PlayNextSpinner").path.setAttribute("d",p),0===n?e.timeup():e.timer=setTimeout(t,o)}()},a.timeup=function(){this.player_.playlist.next(),this.player_.playlist.play(),this.dispose()},a.cancel=function(){return this.player_.poster(this.originPoster),this},a.dispose=function(){clearTimeout(this.timer),this.player_.removeChild(this),i.prototype.dispose.call(this)},o}(l),r=function(){var t=this.player_,e=t.playlist,n=e.loop()||!e.ended();if(e.autoPlayNext()&&n){var i=t.getChild("ControlBar"),o=t.children().indexOf(i)-1;t.addChild("BeforePlayNextLayer",{},o)}else t.poster(e.current().poster||"")};t.registerPlugin("playNext",r),t.registerComponent("BeforePlayNextLayer",s);var p=t.getComponent("SettingMenuButton"),c=t.getComponent("SettingOnOffItem"),u=function(t){function n(e,n){var i;return i=t.call(this,e,{name:"ToggleAutoPlayNext",label:"Autoplay",icon:"vjs-icon-next-item"})||this,i.menu=n.menu,i.updateVisibility(),i.addClass("vjs-setting-autoplay"),e.on("playlist",function(){i.updateVisibility(),i.update(e.playlist.autoPlayNext_)}),i}e(n,t);var i=n.prototype;return i.updateVisibility=function(){var t=this.player_.playlist;t&&t.values.length>1?this.show():this.hide()},i.update=function(e){t.prototype.update.call(this,e),this.player_.playlist.autoPlayNext(this.active)},n}(c);t.registerComponent("ToggleAutoPlayNext",u),p.prototype.options_.entries.splice(0,0,"ToggleAutoPlayNext");var h=t.getComponent("Button"),d=function(t){function i(e,i){var o;return o=t.call(this,e,i)||this,o.updateVisibility(),o.controlText(i.controlText),e.on("playlist",o.updateVisibility.bind(n(n(o)))),o}e(i,t);var o=i.prototype;return o.buildCSSClass=function(){return this.options_.className+" "+t.prototype.buildCSSClass.call(this)},o.updateVisibility=function(){var t=this.player_.playlist;t&&t.values.length>1?this.show():this.hide()},o.createEl=function(e,n,i){return t.prototype.createEl.call(this,e,{innerHTML:''},i)},o.handleClick=function(){var t=this.options_.controlText.toLowerCase();this.player_.playlist[t](),this.player_.playlist.play()},i}(h),y=t.getComponent("ControlBar"),v=y.prototype.options_.children,x=v.indexOf("PlayToggle");-1!==x&&(v.splice(0,0,{name:"PrevNextButton",className:"vjs-prev-control",icon:"vjs-icon-previous-item",controlText:"Prev"}),v.splice(x+2,0,{name:"PrevNextButton",className:"vjs-next-control",icon:"vjs-icon-next-item",controlText:"Next"})),t.registerComponent("PrevNextButton",d);var f=t.getComponent("ClickableComponent"),g=function(t){function n(e,n){var i;return i=t.call(this,e,n)||this,i.el_.querySelector(".vjs-icon-placeholder").innerHTML=i.localize(n.text),i}e(n,t);var i=n.prototype;return i.buildCSSClass=function(){return"vjs-cancel-playnext "+this.options_.className},i.handleClick=function(){this.player_.getChild("BeforePlayNextLayer").cancel().dispose()},n}(f);g.prototype.controlText_="Cancel PlayNext",t.registerComponent("CancelPlayNextEl",g);var m=function(t){function n(e,n,i){var o;return void 0===i&&(i=0),o=t.call(this,n,i)||this,o.player=e,o.loadPoster_=!0,o.autoPlayNext_=!0,o.play(i),e.off("ended",e.playNext),e.on("ended",e.playNext),o}e(n,t);var i=n.prototype;return i.autoPlayNext=function(t){if(void 0===t)return this.autoPlayNext_;this.autoPlayNext_=!!t},i.play=function(t){void 0!==t&&this.index(t);var e=this.current(),n=e.poster,i=e.sources,o=e.title,a=this.player,l=function(){a.poster(n||"")};a.title(""),a.poster(""),this.loadPoster_?(this.loadPoster_=!1,a.autoplay()?a.one("autoplay-failure",l):l()):a.one("loadedmetadata",function(){a.play()}),"none"!==a.preload()&&(a.addClass("vjs-waiting"),a.one("loadedmetadata",function(){a.removeClass("vjs-waiting")})),a.src(i),a.title(o||""),a.trigger("playlistchange",Object.assign(this.current(),{index:this.index()}))},n}(i);t.registerPlugin("setPlayList",function(t){var e=this.player_;e.playlist=new m(e,t),e.trigger("playlist")}),t.hook("setup",function(t){var e=t.options_.playlist||[];e.length&&t.setPlayList(e)})}(videojs);
+!function(t){"use strict";function e(){return e=Object.assign||function(t){for(var e=1;e'+e+"
\n '+this.localize("Up Next")+'
\n \n
\n "}),n.appendChild(this.contentEl_),n},a.countdown=function(t){if(void 0===t&&(t=10),0==t)return this.timeup(),!1;var e=this,n=0,i=Math.PI,o=t;o=o/360*1e3,function t(){n++,n%=360;var a=n*i/180,l=125*Math.sin(a),r=-125*Math.cos(a),s=n>180?1:0,p="M 0 0 v -125 A 125 125 1 "+s+" 1 "+l+" "+r+" z";e.getChild("PlayNextSpinner").path.setAttribute("d",p),0===n?e.timeup():e.timer=setTimeout(t,o)}()},a.timeup=function(){this.player_.playlist.next(),this.player_.playlist.play(),this.dispose()},a.cancel=function(){return this.player_.poster(this.originPoster),this},a.dispose=function(){clearTimeout(this.timer),this.player_.removeChild(this),e.prototype.dispose.call(this)},o}(r),p=function(){var t=this.player_,e=t.playlist,n=e.loop()||!e.ended();if(e.autoPlayNext()&&n){var i=t.getChild("ControlBar"),o=t.children().indexOf(i)-1;t.addChild("BeforePlayNextLayer",{},o)}else t.poster(e.current().poster||"")};t.registerPlugin("playNext",p),t.registerComponent("BeforePlayNextLayer",s);var c=t.getComponent("SettingMenuButton"),u=t.getComponent("SettingOnOffItem"),h=function(t){function e(e,n){var i;return i=t.call(this,e,{name:"ToggleAutoPlayNext",label:"Autoplay",icon:"vjs-icon-next-item"})||this,i.updateVisibility(),i.addClass("vjs-setting-autoplay"),e.on("playlist",function(){i.updateVisibility(),i.update(e.playlist.autoPlayNext_)}),e.on("autoplaynext",function(t,e){i.update(e)}),i}n(e,t);var i=e.prototype;return i.updateVisibility=function(){var t=this.player_.playlist;t&&t.values.length>1?this.show():this.hide()},i.update=function(e){t.prototype.update.call(this,e),this.player_.playlist.autoPlayNext_!==this.active&&this.player_.playlist.autoPlayNext(this.active)},e}(u);t.registerComponent("ToggleAutoPlayNext",h),c.prototype.options_.entries.splice(0,0,"ToggleAutoPlayNext");var d=t.getComponent("Button"),y=function(t){function e(e,n){var o;return o=t.call(this,e,n)||this,o.updateVisibility(),o.controlText(n.controlText),e.on("playlist",o.updateVisibility.bind(i(i(o)))),o}n(e,t);var o=e.prototype;return o.buildCSSClass=function(){return this.options_.className+" "+t.prototype.buildCSSClass.call(this)},o.updateVisibility=function(){var t=this.player_.playlist;t&&t.values.length>1?this.show():this.hide()},o.createEl=function(e,n,i){return t.prototype.createEl.call(this,e,{innerHTML:''},i)},o.handleClick=function(){var t=this.options_.controlText.toLowerCase();this.player_.playlist[t](),this.player_.playlist.play()},e}(d),v=t.getComponent("ControlBar"),x=v.prototype.options_.children,f=x.indexOf("PlayToggle");-1!==f&&(x.splice(0,0,{name:"PrevNextButton",className:"vjs-prev-control",icon:"vjs-icon-previous-item",controlText:"Prev"}),x.splice(f+2,0,{name:"PrevNextButton",className:"vjs-next-control",icon:"vjs-icon-next-item",controlText:"Next"})),t.registerComponent("PrevNextButton",y);var g=t.getComponent("ClickableComponent"),_=function(t){function e(e,n){var i;return i=t.call(this,e,n)||this,i.el_.querySelector(".vjs-icon-placeholder").innerHTML=i.localize(n.text),i}n(e,t);var i=e.prototype;return i.buildCSSClass=function(){return"vjs-cancel-playnext "+this.options_.className},i.handleClick=function(){this.player_.getChild("BeforePlayNextLayer").cancel().dispose()},e}(g);_.prototype.controlText_="Cancel PlayNext",t.registerComponent("CancelPlayNextEl",_);var C=function(t){function i(e,n,i){var o;return void 0===i&&(i=0),o=t.call(this,n,i)||this,o.player_=e,o.loadPoster_=!0,o.autoPlayNext_=!0,o.play(i),e.off("ended",e.playNext),e.on("ended",e.playNext),o}n(i,t);var o=i.prototype;return o.autoPlayNext=function(t){if(void 0===t)return this.autoPlayNext_;this.autoPlayNext_=!!t,this.player_.trigger("autoplaynext",this.autoPlayNext_)},o.play=function(t){void 0!==t&&this.index(t);var n=this.current(),i=n.poster,o=n.sources,a=n.title,l=this.player_,r=function(){l.poster(i||"")};l.title(""),l.poster(""),this.loadPoster_?(this.loadPoster_=!1,l.autoplay()?l.one("autoplay-failure",r):r()):l.one("loadedmetadata",function(){l.play()}),"none"!==l.preload()&&(l.addClass("vjs-waiting"),l.one("loadedmetadata",function(){l.removeClass("vjs-waiting")})),l.src(o),l.title(a||""),l.trigger("playlistchange",e({},n,{index:this.index()}))},i}(o);t.registerPlugin("setPlayList",function(t,e){var n=this.player_;n.playlist=new C(n,t,e),n.trigger("playlist",t)}),t.hook("setup",function(t){var e=t.options_.playlist;if(e&&e.length){var n=e.findIndex(function(t){return t.default});t.setPlayList(e,n)}})}(videojs);
diff --git a/dist/quality-hls/videojs-plus.quality-hls.min.js b/dist/quality-hls/videojs-plus.quality-hls.min.js
index 3af0245..8ea38ca 100644
--- a/dist/quality-hls/videojs-plus.quality-hls.min.js
+++ b/dist/quality-hls/videojs-plus.quality-hls.min.js
@@ -1 +1 @@
-!function(e){"use strict";function t(){return t=Object.assign||function(e){for(var t=1;t'+e+"
\n '+this.localize(n)+'
\n \n '});return this.settingMenuItemValue=video_js.dom.createEl("div",{className:"vjs-setting-menu-value",innerHTML:this.localize(i?i.label:"")}),o.appendChild(this.settingMenuItemValue),o},n.setEntries=function(e){var t=this,n=parseEntries(e),i=n.entries,o=n.currentValue;this.entries=i,this.currentValue=o,o&&(this.settingMenuItemValue.innerHTML=this.localize(o.label)),this.subMenuItems=this.entries.map(function(e){var n=e.label,i=e.value;return new SettingSubMenuItem(t.player_,{label:n,value:i,parent:t,menu:t.menu})}),this.subMenuItems.splice(0,0,new SettingSubMenuTitle(this.player_,{label:this.options_.label,menu:this.menu}))},n.handleClick=function(){var e=getMenuDimension(this.player_,this.subMenuItems);this.menu.update(this.subMenuItems),this.menu.resize(e)},n.update=function(e){var t=e.label,n=e.value;this.currentValue={label:t,value:n},this.settingMenuItemValue.innerHTML=this.localize(t),this.subMenuItems.forEach(function(e){e.update&&e.update()}),this.menu.restore()},n.show=function(){e.prototype.show.call(this),this.menu.reset()},t}(SettingItem);video_js.registerComponent("SettingMenuItem",SettingMenuItem);var SettingOnOffItem=function(e){function t(){return e.apply(this,arguments)||this}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){var e=this.options_;return video_js.dom.createEl("li",{className:"vjs-menu-item vjs-setting-onoff-item",innerHTML:'\n \n '+this.localize(e.label)+'
\n \n \n \n
\n '})},n.update=function(e){this.active=void 0===e?!this.active:e,this.active?this.addClass("vjs-active"):this.removeClass("vjs-active")},n.handleClick=function(){this.update()},n.selected=function(){},t}(SettingItem);video_js.registerComponent("SettingOnOffItem",SettingOnOffItem);var PlaybackRateSettingMenuItem=function(e){function t(t,n){var i;i=e.call(this,t,Object.assign(n,{label:"Speed",icon:"vjs-icon-slow-motion-video",entries:[.5,.75,{label:"Normal",value:1,defalut:!0},1.25,1.5,2]}))||this,i.addClass("vjs-setting-playback-rate"),i.ratechangeBySettingMenu=!1;var o=_assertThisInitialized(_assertThisInitialized(i)),s=i.entries;return t.on("ratechange",function(){if(!o.ratechangeBySettingMenu){var e=t.playbackRate(),n=s.filter(function(t){return e===t})[0]||s[2];o.update(n)}o.ratechangeBySettingMenu=!1}),i}_inheritsLoose(t,e);var n=t.prototype;return n.handleClick=function(){this.ratechangeBySettingMenu=!0,e.prototype.handleClick.call(this)},n.update=function(t){e.prototype.update.call(this,t),this.player_.playbackRate(t.value)},t}(SettingMenuItem);video_js.registerComponent("PlaybackRateSettingMenuItem",PlaybackRateSettingMenuItem);var MenuButton=video_js.getComponent("MenuButton"),SettingMenuButton=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,t.addChild(i.menu),i.removeChild(i.menu),t.on("playerresize",function(){i.menu.reset()}),i}_inheritsLoose(t,e);var n=t.prototype;return n.buildCSSClass=function(){return"vjs-setting-button "+e.prototype.buildCSSClass.call(this)},n.buildWrapperCSSClass=function(){return"vjs-setting-button "+e.prototype.buildWrapperCSSClass.call(this)},n.createMenu=function(){var e=new SettingMenu(this.player_,{menuButton:this});return(this.options_.entries||[]).forEach(function(t){e.addChild(t,{menu:e})}),e},n.hideMenu=function(){this.unpressButton(),this.el_.blur()},n.unpressButton=function(){e.prototype.unpressButton.call(this),this.player_.removeClass("vjs-keep-control-showing"),this.menu.restore()},n.handleClick=function(){var e=this;this.player_.addClass("vjs-keep-control-showing"),this.buttonPressed_?this.unpressButton():this.pressButton(),this.off(document.body,"click",this.hideMenu),this.off(document.body,"touchend",this.hideMenu),setTimeout(function(){e.one(document.body,"click",e.hideMenu)},0)},t}(MenuButton);SettingMenuButton.prototype.controlText_="Settings",SettingMenuButton.prototype.options_={entries:["PlaybackRateSettingMenuItem"]},video_js.registerComponent("SettingMenuButton",SettingMenuButton);
+"use strict";function findChild(e,t,n){var i=[];if(e&&e.childIndex_&&Object.keys(e.childIndex_).length)for(var o in e.childIndex_){var s=e.childIndex_[o];if(s&&s.name_==t){var r;n.push((r={parent:e,component:s,index:e.children_.indexOf(s)},r[t]=s,r))}i.push(findChild(s,t,n))}return{name:t,parent:e,children:i}}function _extends(){return _extends=Object.assign||function(e){for(var t=1;t'+this.localize(e.label)+'
\n \n \n \n
\n '})},n.update=function(e){this.active=void 0===e?!this.active:e,this.active?this.addClass("vjs-active"):this.removeClass("vjs-active")},n.handleClick=function(){this.update()},n.selected=function(){},t}(SettingMenuItem);video_js.registerComponent("SettingOnOffItem",SettingOnOffItem);var SettingSubOptionTitle=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,i.addChild("Component",{},0),i.addClass("vjs-settings-sub-menu-item"),i.addClass("vjs-settings-sub-menu-title"),i}return _inheritsLoose(t,e),t.prototype.handleClick=function(){this.options_.menu.restore()},t}(SettingMenuItem);video_js.registerComponent("SettingSubOptionTitle",SettingSubOptionTitle);var SettingSubOptionItem=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,i.selectable=!0,Object.assign(_assertThisInitialized(_assertThisInitialized(i)),n),i.addChild("Component",{},0),i.addClass("vjs-settings-sub-menu-item"),i.addClass("vjs-settings-sub-menu-option"),i.update(),i}_inheritsLoose(t,e);var n=t.prototype;return n.update=function(){this.selected(this.value===this.parent.selected.value)},n.handleClick=function(){this.parent.update(this)},t}(SettingMenuItem);video_js.registerComponent("SettingSubOptionItem",SettingSubOptionItem);var SettingMenu$1=video_js.getComponent("SettingMenu"),SettingMenuTemp=function(e){function t(t){return e.call(this,t,{name:"SettingMenuTemp"})||this}return _inheritsLoose(t,e),t}(SettingMenu$1),getMenuDimension=function(e,t){var n=new SettingMenuTemp(e);n.update(t),e.addChild(n);var i=n.contentEl_.getBoundingClientRect();return n.update(),n.dispose(),e.removeChild(n),i},SettingOptionItem=function(e){function t(t,n){var i;return void 0===n&&(n={}),i=e.call(this,t,n)||this,i.setEntries(i.options_.entries),i.entries.length||i.hide(),i}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){var e=this.options_,t=e.icon,n=e.label,i=video_js.dom.createEl("li",{className:"vjs-menu-item vjs-setting-menu-item",innerHTML:'\n \n '+this.localize(n)+'
\n \n '});return this.selectedValueEl=video_js.dom.createEl("div",{className:"vjs-setting-menu-value"}),i.appendChild(this.selectedValueEl),i},n.setEntries=function(e){var t=this;void 0===e&&(e=[]),Object.assign(this,parseEntries(e)),this.updateSelectedValue(),this.subMenuItems=this.entries.map(function(e){var n=e.label,i=e.value;return new SettingSubOptionItem(t.player_,{label:n,value:i,parent:t,menu:t.menu})}),this.subMenuItems.splice(0,0,new SettingSubOptionTitle(this.player_,{label:this.options_.label,menu:this.menu}))},n.handleClick=function(){var e=getMenuDimension(this.player_,this.subMenuItems);this.menu.update(this.subMenuItems),this.menu.resize(e)},n.update=function(e){var t=e.label,n=e.value;this.selected={label:t,value:n},this.updateSelectedValue(),this.subMenuItems.forEach(function(e){e.update&&e.update()}),this.menu.restore()},n.updateSelectedValue=function(){this.selected&&(this.selectedValueEl.innerHTML=this.localize(this.selected.label))},n.show=function(){e.prototype.show.call(this),this.menu.reset()},t}(SettingMenuItem);video_js.registerComponent("SettingOptionItem",SettingOptionItem);var PlaybackRateSettingItem=function(e){function t(t,n){var i;return i=e.call(this,t,_extends({},n,{label:"Speed",icon:"vjs-icon-slow-motion-video",entries:[.5,.75,{label:"Normal",value:1,defalut:!0},1.25,1.5,2]}))||this,i.addClass("vjs-setting-playback-rate"),t.on("ratechange",function(){var e=t.playbackRate(),n=i.entries.find(function(t){var n=t.value;return e===n});i.update(n)}),i}return _inheritsLoose(t,e),t.prototype.update=function(t){e.prototype.update.call(this,t),this.player_.playbackRate()!==t.value&&this.player_.playbackRate(t.value)},t}(SettingOptionItem);video_js.registerComponent("PlaybackRateSettingItem",PlaybackRateSettingItem);var MenuButton=video_js.getComponent("MenuButton"),SettingMenuButton=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,t.addChild(i.menu),i.removeChild(i.menu),t.on("playerresize",function(){i.menu.reset()}),i}_inheritsLoose(t,e);var n=t.prototype;return n.buildCSSClass=function(){return"vjs-setting-button "+e.prototype.buildCSSClass.call(this)},n.buildWrapperCSSClass=function(){return"vjs-setting-button "+e.prototype.buildWrapperCSSClass.call(this)},n.createMenu=function(){var e=new SettingMenu(this.player_,{menuButton:this});return(this.options_.entries||[]).forEach(function(t){e.addChild(t,{menu:e})}),e},n.hideMenu=function(){this.unpressButton(),this.el_.blur()},n.unpressButton=function(){e.prototype.unpressButton.call(this),this.player_.removeClass("vjs-keep-control-showing"),this.menu.restore()},n.handleClick=function(){var e=this;this.player_.addClass("vjs-keep-control-showing"),this.buttonPressed_?this.unpressButton():this.pressButton(),this.off(document.body,"click",this.hideMenu),this.off(document.body,"touchend",this.hideMenu),setTimeout(function(){e.one(document.body,"click",e.hideMenu)},0)},t}(MenuButton);SettingMenuButton.prototype.controlText_="Settings",SettingMenuButton.prototype.options_={entries:["PlaybackRateSettingItem"]},video_js.registerComponent("SettingMenuButton",SettingMenuButton);
diff --git a/dist/videojs-plus.min.js b/dist/videojs-plus.min.js
index 51f571a..ca9a477 100644
--- a/dist/videojs-plus.min.js
+++ b/dist/videojs-plus.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):t(e.videojs)}(this,function(e){"use strict";function t(e,n,i){var o=[];if(e&&e.childIndex_&&Object.keys(e.childIndex_).length)for(var r in e.childIndex_){var s=e.childIndex_[r];if(s&&s.name_==n){var a;i.push((a={parent:e,component:s,index:e.children_.indexOf(s)},a[n]=s,a))}o.push(t(s,n,i))}return{name:n,parent:e,children:o}}function n(){return n=Object.assign||function(e){for(var t=1;t'+this.localize(i)+'
\n \n '});return this.settingMenuItemValue=e.dom.createEl("div",{className:"vjs-setting-menu-value",innerHTML:this.localize(o?o.label:"")}),r.appendChild(this.settingMenuItemValue),r},o.setEntries=function(e){var t=this,n=r(e),i=n.entries,o=n.currentValue;this.entries=i,this.currentValue=o,o&&(this.settingMenuItemValue.innerHTML=this.localize(o.label)),this.subMenuItems=this.entries.map(function(e){var n=e.label,i=e.value;return new V(t.player_,{label:n,value:i,parent:t,menu:t.menu})}),this.subMenuItems.splice(0,0,new L(this.player_,{label:this.options_.label,menu:this.menu}))},o.handleClick=function(){var e=z(this.player_,this.subMenuItems);this.menu.update(this.subMenuItems),this.menu.resize(e)},o.update=function(e){var t=e.label,n=e.value;this.currentValue={label:t,value:n},this.settingMenuItemValue.innerHTML=this.localize(t),this.subMenuItems.forEach(function(e){e.update&&e.update()}),this.menu.restore()},o.show=function(){t.prototype.show.call(this),this.menu.reset()},n}(O);e.registerComponent("SettingMenuItem",H);var R=function(t){function n(){return t.apply(this,arguments)||this}i(n,t);var o=n.prototype;return o.createEl=function(){var t=this.options_;return e.dom.createEl("li",{className:"vjs-menu-item vjs-setting-onoff-item",innerHTML:'\n \n '+this.localize(t.label)+'
\n \n \n \n
\n '})},o.update=function(e){this.active=void 0===e?!this.active:e,this.active?this.addClass("vjs-active"):this.removeClass("vjs-active")},o.handleClick=function(){this.update()},o.selected=function(){},n}(O);e.registerComponent("SettingOnOffItem",R);var D=function(e){function t(t,n){var i;i=e.call(this,t,Object.assign(n,{label:"Speed",icon:"vjs-icon-slow-motion-video",entries:[.5,.75,{label:"Normal",value:1,defalut:!0},1.25,1.5,2]}))||this,i.addClass("vjs-setting-playback-rate"),i.ratechangeBySettingMenu=!1;var r=o(o(i)),s=i.entries;return t.on("ratechange",function(){if(!r.ratechangeBySettingMenu){var e=t.playbackRate(),n=s.filter(function(t){return e===t})[0]||s[2];r.update(n)}r.ratechangeBySettingMenu=!1}),i}i(t,e);var n=t.prototype;return n.handleClick=function(){this.ratechangeBySettingMenu=!0,e.prototype.handleClick.call(this)},n.update=function(t){e.prototype.update.call(this,t),this.player_.playbackRate(t.value)},t}(H);e.registerComponent("PlaybackRateSettingMenuItem",D);var W=e.getComponent("MenuButton"),q=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,t.addChild(i.menu),i.removeChild(i.menu),t.on("playerresize",function(){i.menu.reset()}),i}i(t,e);var n=t.prototype;return n.buildCSSClass=function(){return"vjs-setting-button "+e.prototype.buildCSSClass.call(this)},n.buildWrapperCSSClass=function(){return"vjs-setting-button "+e.prototype.buildWrapperCSSClass.call(this)},n.createMenu=function(){var e=new B(this.player_,{menuButton:this});return(this.options_.entries||[]).forEach(function(t){e.addChild(t,{menu:e})}),e},n.hideMenu=function(){this.unpressButton(),this.el_.blur()},n.unpressButton=function(){e.prototype.unpressButton.call(this),this.player_.removeClass("vjs-keep-control-showing"),this.menu.restore()},n.handleClick=function(){var e=this;this.player_.addClass("vjs-keep-control-showing"),this.buttonPressed_?this.unpressButton():this.pressButton(),this.off(document.body,"click",this.hideMenu),this.off(document.body,"touchend",this.hideMenu),setTimeout(function(){e.one(document.body,"click",e.hideMenu)},0)},t}(W);q.prototype.controlText_="Settings",q.prototype.options_={entries:["PlaybackRateSettingMenuItem"]},e.registerComponent("SettingMenuButton",q)});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):t(e.videojs)}(this,function(e){"use strict";function t(e,n,i){var o=[];if(e&&e.childIndex_&&Object.keys(e.childIndex_).length)for(var r in e.childIndex_){var s=e.childIndex_[r];if(s&&s.name_==n){var l;i.push((l={parent:e,component:s,index:e.children_.indexOf(s)},l[n]=s,l))}o.push(t(s,n,i))}return{name:n,parent:e,children:o}}function n(){return n=Object.assign||function(e){for(var t=1;t'+this.localize(t.label)+'
\n \n \n \n
\n '})},o.update=function(e){this.active=void 0===e?!this.active:e,this.active?this.addClass("vjs-active"):this.removeClass("vjs-active")},o.handleClick=function(){this.update()},o.selected=function(){},n}(B);e.registerComponent("SettingOnOffItem",L);var N=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,i.addChild("Component",{},0),i.addClass("vjs-settings-sub-menu-item"),i.addClass("vjs-settings-sub-menu-title"),i}return i(t,e),t.prototype.handleClick=function(){this.options_.menu.restore()},t}(B);e.registerComponent("SettingSubOptionTitle",N);var A=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,i.selectable=!0,Object.assign(o(o(i)),n),i.addChild("Component",{},0),i.addClass("vjs-settings-sub-menu-item"),i.addClass("vjs-settings-sub-menu-option"),i.update(),i}i(t,e);var n=t.prototype;return n.update=function(){this.selected(this.value===this.parent.selected.value)},n.handleClick=function(){this.parent.update(this)},t}(B);e.registerComponent("SettingSubOptionItem",A);var V=e.getComponent("SettingMenu"),R=function(e){function t(t){return e.call(this,t,{name:"SettingMenuTemp"})||this}return i(t,e),t}(V),z=function(e,t){var n=new R(e);n.update(t),e.addChild(n);var i=n.contentEl_.getBoundingClientRect();return n.update(),n.dispose(),e.removeChild(n),i},H=function(t){function n(e,n){var i;return void 0===n&&(n={}),i=t.call(this,e,n)||this,i.setEntries(i.options_.entries),i.entries.length||i.hide(),i}i(n,t);var o=n.prototype;return o.createEl=function(){var t=this.options_,n=t.icon,i=t.label,o=e.dom.createEl("li",{className:"vjs-menu-item vjs-setting-menu-item",innerHTML:'\n \n '+this.localize(i)+'
\n \n '});return this.selectedValueEl=e.dom.createEl("div",{className:"vjs-setting-menu-value"}),o.appendChild(this.selectedValueEl),o},o.setEntries=function(e){var t=this;void 0===e&&(e=[]),Object.assign(this,r(e)),this.updateSelectedValue(),this.subMenuItems=this.entries.map(function(e){var n=e.label,i=e.value;return new A(t.player_,{label:n,value:i,parent:t,menu:t.menu})}),this.subMenuItems.splice(0,0,new N(this.player_,{label:this.options_.label,menu:this.menu}))},o.handleClick=function(){var e=z(this.player_,this.subMenuItems);this.menu.update(this.subMenuItems),this.menu.resize(e)},o.update=function(e){var t=e.label,n=e.value;this.selected={label:t,value:n},this.updateSelectedValue(),this.subMenuItems.forEach(function(e){e.update&&e.update()}),this.menu.restore()},o.updateSelectedValue=function(){this.selected&&(this.selectedValueEl.innerHTML=this.localize(this.selected.label))},o.show=function(){t.prototype.show.call(this),this.menu.reset()},n}(B);e.registerComponent("SettingOptionItem",H);var D=function(e){function t(t,i){var o;return o=e.call(this,t,n({},i,{label:"Speed",icon:"vjs-icon-slow-motion-video",entries:[.5,.75,{label:"Normal",value:1,defalut:!0},1.25,1.5,2]}))||this,o.addClass("vjs-setting-playback-rate"),t.on("ratechange",function(){var e=t.playbackRate(),n=o.entries.find(function(t){var n=t.value;return e===n});o.update(n)}),o}return i(t,e),t.prototype.update=function(t){e.prototype.update.call(this,t),this.player_.playbackRate()!==t.value&&this.player_.playbackRate(t.value)},t}(H);e.registerComponent("PlaybackRateSettingItem",D);var W=e.getComponent("MenuButton"),q=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,t.addChild(i.menu),i.removeChild(i.menu),t.on("playerresize",function(){i.menu.reset()}),i}i(t,e);var n=t.prototype;return n.buildCSSClass=function(){return"vjs-setting-button "+e.prototype.buildCSSClass.call(this)},n.buildWrapperCSSClass=function(){return"vjs-setting-button "+e.prototype.buildWrapperCSSClass.call(this)},n.createMenu=function(){var e=new O(this.player_,{menuButton:this});return(this.options_.entries||[]).forEach(function(t){e.addChild(t,{menu:e})}),e},n.hideMenu=function(){this.unpressButton(),this.el_.blur()},n.unpressButton=function(){e.prototype.unpressButton.call(this),this.player_.removeClass("vjs-keep-control-showing"),this.menu.restore()},n.handleClick=function(){var e=this;this.player_.addClass("vjs-keep-control-showing"),this.buttonPressed_?this.unpressButton():this.pressButton(),this.off(document.body,"click",this.hideMenu),this.off(document.body,"touchend",this.hideMenu),setTimeout(function(){e.one(document.body,"click",e.hideMenu)},0)},t}(W);q.prototype.controlText_="Settings",q.prototype.options_={entries:["PlaybackRateSettingItem"]},e.registerComponent("SettingMenuButton",q)});
diff --git a/examples/playlist.html b/examples/playlist.html
index 023d9d1..038472d 100644
--- a/examples/playlist.html
+++ b/examples/playlist.html
@@ -290,11 +290,10 @@
var $div = document.createElement('div');
$div.innerHTML += `
-
-
-
- `;
+ ${item.title}
-
+
+
`;
var $el = $div.children[0];
@@ -310,9 +309,9 @@
$list.appendChild($el);
});
- player.on('playlistchange', function(evt, data) {
+ player.on('playlistchange', function(_, selected) {
videojs.dom.removeClass($selected, 'selected');
- $selected = $list.children[data.index];
+ $selected = $list.children[selected.index];
videojs.dom.addClass($selected, 'selected');
$wrapper.scrollTo(0, $selected.offsetTop - ($wrapper.offsetHeight - $selected.offsetHeight) / 2);
});
diff --git a/examples/setting-menu.html b/examples/setting-menu.html
index b1ac391..f5206ac 100644
--- a/examples/setting-menu.html
+++ b/examples/setting-menu.html
@@ -26,14 +26,12 @@
class ToggleAnnotation extends SettingOnOffItem {
constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- name: 'ToggleAnnotation', // component name, optional
- label: 'Annotation',
- icon: 'vjs-icon-circle' // videojs icon classname, optional, for small screen
- })
- );
+ super(player, {
+ ...options, // you must assgin the options
+ name: 'ToggleAnnotation', // component name, optional
+ label: 'Annotation',
+ icon: 'vjs-icon-circle' // videojs icon classname, optional, for small screen
+ });
this.addClass('vjs-setting-annotation');
@@ -41,6 +39,9 @@
this.update(true);
}
+ /**
+ * @param {Boolean} active
+ */
update(active) {
super.update(active);
@@ -51,44 +52,46 @@
videojs.getComponent('SettingMenuButton').prototype.options_.entries.splice(0, 0, 'ToggleAnnotation');
videojs.registerComponent('ToggleAnnotation', ToggleAnnotation);
- const SettingMenuItem = videojs.getComponent('SettingMenuItem');
+ const SettingOptionItem = videojs.getComponent('SettingOptionItem');
- class QualityMenuItem extends SettingMenuItem {
+ class QualityMenuItem extends SettingOptionItem {
constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- name: 'QualityMenuItem', // component name, optional
- label: 'Quality',
- icon: 'vjs-icon-hd', // videojs icon classname, optional, for small screen
- entries: [
- {
- label: 'HD',
- value: 720,
- defalut: true
- },
- {
- label: 'SD',
- value: 480
- },
- {
- label: 'Smooth',
- value: 240
- },
- 'Auto' // label & value
- ]
- })
- );
+ super(player, {
+ ...options, // you must assgin the options
+ name: 'QualityMenuItem', // component name, optional
+ label: 'Quality',
+ icon: 'vjs-icon-hd', // videojs icon classname, optional, for small screen
+ entries: [
+ {
+ label: 'HD',
+ value: 720,
+ defalut: true
+ },
+ {
+ label: 'SD',
+ value: 480
+ },
+ {
+ label: 'Smooth',
+ value: 240
+ },
+ 'Auto' // label & value
+ ]
+ });
this.addClass('vjs-setting-quality');
}
+ /**
+ * @param {Object} selectedItem - an object that must contains label and value attributes
+ * default return an videojs component {SettingSubMenuItem}
+ */
update(selectedItem) {
super.update(selectedItem);
- var value = selectedItem.value; // 720 / 480 / 240 / Auto
+ const { label, value } = selectedItem;
- console.log(value);
+ console.log(label, value);
}
}
diff --git a/guide/Angular.md b/guide/Angular.md
index 8072cd7..50659ba 100644
--- a/guide/Angular.md
+++ b/guide/Angular.md
@@ -42,8 +42,8 @@ export class VideoComponent {
onPlayerInit({ player }) {
player.src({
- src: '...',
- type: 'video/mp4'
+ src: 'demo.mp4',
+ type: 'video.mp4'
});
player.on('play', () => {
diff --git a/guide/Mobile.md b/guide/Mobile.md
index ca9e7e8..f57c965 100644
--- a/guide/Mobile.md
+++ b/guide/Mobile.md
@@ -3,12 +3,10 @@
${item.title}
+ 
-#### Usage
-
Mobile UI is controlled by class `vjs-mobile-view`.
This class will added if player initialize at screen smaller or equal 480px.
-### disable mobile view
+#### disable mobile view
```js
const player = videojs("example-video", {
diff --git a/guide/SettingMenu.md b/guide/SettingMenu.md
index 7faa734..9c947ce 100644
--- a/guide/SettingMenu.md
+++ b/guide/SettingMenu.md
@@ -4,6 +4,8 @@
[Demo](https://pong420.github.io/videojs-plus/examples/setting-menu.html)
+:warning: below example script could be outdated, visit the source code of above demo will be better
+
#### Create an on off menu item
```js
@@ -11,14 +13,12 @@ const SettingOnOffItem = videojs.getComponent('SettingOnOffItem');
class ToggleAnnotation extends SettingOnOffItem {
constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- name: 'ToggleAnnotation', // component name, optional
- label: 'Annotation',
- icon: 'vjs-icon-circle' // videojs icon classname, optional, for small screen
- })
- );
+ super(player, {
+ ...options, // you must assgin the options
+ name: 'ToggleAnnotation', // component name, optional
+ label: 'Annotation',
+ icon: 'vjs-icon-circle' // videojs icon classname, optional, for small screen
+ });
this.addClass('vjs-setting-annotation');
@@ -26,6 +26,9 @@ class ToggleAnnotation extends SettingOnOffItem {
this.update(true);
}
+ /**
+ * @param {Boolean} active
+ */
update(active) {
super.update(active);
@@ -40,44 +43,46 @@ videojs.registerComponent('ToggleAnnotation', ToggleAnnotation);
#### Create an optional menu item
```js
-const SettingMenuItem = videojs.getComponent('SettingMenuItem');
+const SettingOptionItem = videojs.getComponent('SettingOptionItem');
-class QualityMenuItem extends SettingMenuItem {
+class QualityMenuItem extends SettingOptionItem {
constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- name: 'QualityMenuItem', // component name, optional
- label: 'Quality',
- icon: 'vjs-icon-hd', // videojs icon classname, optional, for small screen
- entries: [
- {
- label: 'HD',
- value: 720,
- defalut: true
- },
- {
- label: 'SD',
- value: 480
- },
- {
- label: 'Smooth',
- value: 240
- },
- 'Auto' // label & value
- ]
- })
- );
+ super(player, {
+ ...options, // you must assgin the options
+ name: 'QualityMenuItem', // component name, optional
+ label: 'Quality',
+ icon: 'vjs-icon-hd', // videojs icon classname, optional, for small screen
+ entries: [
+ {
+ label: 'HD',
+ value: 720,
+ defalut: true
+ },
+ {
+ label: 'SD',
+ value: 480
+ },
+ {
+ label: 'Smooth',
+ value: 240
+ },
+ 'Auto' // label & value
+ ]
+ });
this.addClass('vjs-setting-quality');
}
+ /**
+ * @param {Object} selectedItem - an object that must contains label and value attributes
+ * default return an videojs component {SettingSubMenuItem}
+ */
update(selectedItem) {
super.update(selectedItem);
- var value = selectedItem.value; // 720 / 480 / 240 / Auto
+ const { label, value } = selectedItem;
- console.log(value);
+ console.log(label, value);
}
}
diff --git a/guide/Vue.md b/guide/Vue.md
index 7fabc26..a2841bb 100644
--- a/guide/Vue.md
+++ b/guide/Vue.md
@@ -23,8 +23,8 @@ export default {
computed: {
videoSource() {
return {
- src: "video/source/url.mp4",
- type: "video/mp4"
+ src: "demo.mp4",
+ type: "video.mp4"
}
},
playerOptions() {
diff --git a/guide/plugins/Audio.md b/guide/plugins/Audio.md
index cfdab36..27ecfe8 100644
--- a/guide/plugins/Audio.md
+++ b/guide/plugins/Audio.md
@@ -15,7 +15,7 @@ player.on('before-audio-setup', (_, entries) => {
});
```
-#### API
+#### API and Event
```js
// switch audio
@@ -28,21 +28,23 @@ player.audio().track;
player.audio().values();
// events
-player.on('audio', entries => {
- console.log('audio setup');
+player.on('audio', audio => {
+ console.log('audio setup', audio);
});
-player.on('audiochange', currentEntry => {
- /**
- * interface currentEntry {
- * attribute string id,
- * attribute string kind,
- * attribute string label,
- * attribute string language,
- * attribute number index
- * attribute AudioTrack track
- * };
- */
+/**
+ * interface audio {
+ * attribute string id,
+ * attribute string kind,
+ * attribute string label,
+ * attribute string language,
+ * attribute number index
+ * attribute AudioTrack track
+ * };
+ *
+ * @param {audio} currentAudio
+ */
+player.on('audiochange', currentAudio => {
console.log('audio changed');
});
```
diff --git a/guide/plugins/Autoplay.md b/guide/plugins/Autoplay.md
index 16a3a9a..2535eff 100644
--- a/guide/plugins/Autoplay.md
+++ b/guide/plugins/Autoplay.md
@@ -9,7 +9,20 @@ But some mobile device may not support autoplay start even player is muted.
#### Usage
-```html
-
-
+```js
+const player = videojs('example-video', {
+ autoplay: true
+});
+```
+
+#### Event
+
+```js
+player.on('autoplay-success', () => {
+ console.log('autoplay success');
+});
+
+player.on('autoplay-failure', () => {
+ console.log('autoplay failure');
+});
```
diff --git a/guide/plugins/FullWindow.md b/guide/plugins/FullWindow.md
index ccd09be..53758ea 100644
--- a/guide/plugins/FullWindow.md
+++ b/guide/plugins/FullWindow.md
@@ -9,9 +9,9 @@ Just include the plugin and the fullscreen button will be replaced by full windo
#### Usage
-```js
-// remember to import the css file
+Remember to include css file
+```js
const player = videojs('example-video', {
fullwindow: true
});
diff --git a/guide/plugins/Live.md b/guide/plugins/Live.md
index d695837..1731de9 100644
--- a/guide/plugins/Live.md
+++ b/guide/plugins/Live.md
@@ -4,11 +4,9 @@ Just a simple style plugin that create a live streaming notice on control bar an
-#### Usage
+#### API
```js
-// remember to include the css file
-
// initialize
player.live();
diff --git a/guide/plugins/PictureInPicture.md b/guide/plugins/PictureInPicture.md
index d6a1de2..28706a4 100644
--- a/guide/plugins/PictureInPicture.md
+++ b/guide/plugins/PictureInPicture.md
@@ -4,15 +4,6 @@
[Demo](https://pong420.github.io/videojs-plus/examples/picture-in-picture.html)
-#### Usage
-
-```html
-
-
-
-
-```
-
#### API
```js
diff --git a/guide/plugins/Playlist.md b/guide/plugins/Playlist.md
index 5b155de..2645397 100644
--- a/guide/plugins/Playlist.md
+++ b/guide/plugins/Playlist.md
@@ -17,7 +17,7 @@ The playlist UI at the right hand side need to created by yourself
```
```js
-const videos = [
+const playlist = [
{
source: [
{
@@ -27,20 +27,40 @@ const videos = [
],
title: 'some title',
poster: 'some poster'
+ },
+ {
+ source: [
+ {
+ src: 'demo.mp4',
+ type: 'video/mp4'
+ }
+ ],
+ title: 'demo title',
+ poster: 'demo poster',
+ default: true // you could set the start index of playlist
}
//....
];
// set playlist in options
const player = videojs('example-video', {
- playlist: videos
+ playlist
});
// or
-player.setPlayList(videos);
+/**
+ * @params {Array} playlist
+ * @params {Number|String} startIndex - index of the default video in the playlist
+ */
+player.setPlayList(playlist, startIndex);
+```
+
+#### API and Event
+
+```js
// switch video
-player.playlist.pick(1);
+player.playlist.play(1);
// get current video
player.playlist.current();
@@ -54,12 +74,27 @@ player.playlist.values;
// loop playlist, default true
player.playlist.loop(false);
-// events
-player.on('playlist', () => {
- console.log('playlist setup');
+// control player list should autoplay next or not
+player.playlist.autoplayNext(false);
+
+/**
+ * Fire when `setPlayList` called.
+ * But if you set playlist in options and listen after player initialized,
+ * the `setPlayList` function will called before you listen
+ */
+player.on('playlist', playlist => {
+ console.log('playlist setup', playlist);
+});
+
+/*
+ * @params {Object} selected `player.playlist.current()` but contains index;
+ */
+player.on('playlistchange', selected => {
+ console.log('playlist changed', selected);
});
-player.on('playlistchange', () => {
- console.log('playlist changed');
+// fire when autoplay next options changed
+player.on('autoplaynext', (_, autoplayNext) => {
+ console.log('autoplay next behaviour changed', autoplayNext);
});
```
diff --git a/guide/plugins/Quality.md b/guide/plugins/Quality.md
index 78da597..4864da7 100644
--- a/guide/plugins/Quality.md
+++ b/guide/plugins/Quality.md
@@ -5,13 +5,23 @@ This is a plugin for switch between different video quality by different video s
#### Usage
```js
-const quality = [
+const qualities = [
{
label: '1080p',
sources: [
{
+ src: 'video-1080p.mp4'
+ type: 'video/mp4',
+ }
+ ]
+ },
+ {
+ default: true
+ label: '720p',
+ sources: [
+ {
+ src: 'video-720p.mp4'
type: 'video/mp4',
- src: 'video-hd.mp4'
}
]
}
@@ -20,31 +30,47 @@ const quality = [
// set quality in options
const player = videojs('example-video', {
- quality,
- defaultQualityLevel: 0 // optiontal, default 0
+ qualities
});
// or
-player.setQuality(quality, defaultQualityLevel);
-// switch quality level
-player.quality.pick(1);
+/**
+ * @params {Array} qualities
+ * @params {Number|String} defaultQualityLevel - index of the default quality
+*/
+player.setQualities(qualities, defaultQualityLevel);
+
+```
+
+#### API and Event
+
+```js
+// switch quality
+player.qualities.pick(1);
-// get current quality level
-player.quality.current();
+// get current quality
+player.qualities.current();
-// get current quality level index
-player.quality.index();
+// get current quality index
+player.qualities.index();
-// get all quality levels
-player.quality.values;
+// get all qualities
+player.qualities.values;
-// events
-player.on('quality', () => {
- console.log('quality setup');
+/**
+ * Fire when `setQualities` called.
+ * But if you set qualities in options and listen after player initialized,
+ * the `setQualities` function will called before you listen *
+ */
+player.on('qualities', qualities => {
+ console.log('qualities setup', qualities);
});
-player.on('qualitychange', () => {
- console.log('quality changed');
+/**
+ * @params {Object} selected `player.qualities.current()` but contains index;
+ */
+player.on('qualitychange', selected => {
+ console.log('quality changed', selected);
});
```
diff --git a/guide/plugins/QualityHls.md b/guide/plugins/QualityHls.md
index 16c6825..4346381 100644
--- a/guide/plugins/QualityHls.md
+++ b/guide/plugins/QualityHls.md
@@ -1,22 +1,29 @@
This is a plugin for switch between different video quality by HLS playlists. You should also include [videojs-contrib-quality-levels](https://github.com/videojs/videojs-contrib-quality-levels)
+#### Usage
+
Quality menu item will display automatically.
+#### API and Event
+
```js
// get all quality levels, for more details refer to videojs-contrib-quality-levels
player.qualityLevels();
-// event
-player.on('quality', () => {
- console.log('quality setup');
+// Fire when all Hls playlist added.
+player.on('qualities', qualityLevels => {
+ console.log('qualities setup', qualityLevels);
});
-player.on('qualitychange', () => {
+/**
+ * @param {Object} selected - current quality level related value....
+ */
+player.on('qualitychange', selected => {
console.log('quality changed');
});
// If your hls manifest do not contain `height`,
-// you will need to assign it your self
+// you will need to assign it your self, otherwise the label will be undefined
player.on('before-quality-setup', function(_, { levels }) {
// levels === `player.qualityLevels()`
levels.forEach((lv, index) => {
@@ -25,8 +32,10 @@ player.on('before-quality-setup', function(_, { levels }) {
});
});
-// To change the label of HLS verison, you could
+// To change the label of HLS quality, you could
videojs.addLanguage('zh-hk', {
- '720p': 'HD'
+ '1080p': 'Full HD'
+ '720p': 'HD',
+ // ..
});
```
diff --git a/guide/plugins/Subtitles.md b/guide/plugins/Subtitles.md
index c49298a..a5ef967 100644
--- a/guide/plugins/Subtitles.md
+++ b/guide/plugins/Subtitles.md
@@ -25,7 +25,11 @@ const player = videojs('example-video', {
// or
player.subtitles().load(subtitles);
+```
+
+#### API and Event
+```js
// remove all subtitles
player.subtitles().remove();
@@ -41,12 +45,16 @@ player.subtitles().track;
// get all subtitles
player.subtitles().values();
-player.on('subtitles', () => {
- console.log('subtitles setup');
+player.on('subtitles', subtitles => {
+ console.log('subtitles setup', subtitles);
});
-// subtitlechange no "s"
-player.on('subtitlechange', () => {
+/**
+ * @param {Object} selected - {label, index}
+ *
+ * subtitlechange no "s"
+ */
+player.on('subtitlechange', selected => {
console.log('subtitles changed');
});
```
@@ -55,7 +63,7 @@ player.on('subtitlechange', () => {
- HLS In-Manifest WebVTT subtitles may not supported since i have not resources for testing
-- VideoJS only support textrack with `vtt` format. To load `srt` in videojs would be to convert the SRT to VTT. Then create a blob URL with `URL.createObjectURL()`. Inspired by this [comment](https://github.com/videojs/video.js/issues/4822#issuecomment-351939054) and here is a working example with [imshaikot/srt-webvtt
+- VideoJS only support `vtt` format. Here is one of the method to load `srt` in videojs. Inspired by this [comment](https://github.com/videojs/video.js/issues/4822#issuecomment-351939054) and here is a working example with [imshaikot/srt-webvtt
](https://github.com/imshaikot/srt-webvtt).
```js
diff --git a/source/Components/SettingMenu/Item/SettingItem.js b/source/Components/SettingMenu/Item/SettingItem.js
deleted file mode 100644
index 0ff5fe6..0000000
--- a/source/Components/SettingMenu/Item/SettingItem.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { getComponent, registerComponent, mergeOptions } from 'video.js';
-
-const MenuItem = getComponent('MenuItem');
-
-class SettingItem extends MenuItem {
- constructor(player, options) {
- super(
- player,
- mergeOptions(
- {
- selectable: false
- },
- options
- )
- );
-
- this.menu = options.menu;
- }
-}
-
-registerComponent('SettingItem', SettingItem);
-
-export default SettingItem;
diff --git a/source/Components/SettingMenu/Item/SettingMenuItem.js b/source/Components/SettingMenu/Item/SettingMenuItem.js
index 9529c0b..532bfbe 100644
--- a/source/Components/SettingMenu/Item/SettingMenuItem.js
+++ b/source/Components/SettingMenu/Item/SettingMenuItem.js
@@ -1,127 +1,20 @@
-import { registerComponent, dom } from 'video.js';
-
-import SettingItem from './SettingItem.js';
-import SettingSubMenuTitle from './SettingSubMenuTitle.js';
-import SettingSubMenuItem from './SettingSubMenuItem.js';
-import getMenuDimension from '../MenuDimension';
-
-function parseEntries(entries) {
- let currentValue;
-
- entries = entries.map((data, index) => {
- const isDefault = typeof data.defalut !== 'undefined' ? data.defalut : false;
- const entry = {
- ...data,
- label: typeof data.label !== 'undefined' ? data.label : data,
- value: typeof data.value !== 'undefined' ? data.value : data,
- defalut: isDefault,
- index
- };
-
- if (isDefault) {
- currentValue = entry;
- }
-
- return entry;
- });
-
- if (!currentValue) {
- currentValue = entries[0];
- }
-
- return {
- entries,
- currentValue
- };
-}
-
-class SettingMenuItem extends SettingItem {
- constructor(player, options = {}) {
- super(player, Object.assign(options, parseEntries(options.entries)));
-
- this.setEntries(this.options_.entries);
-
- if (!this.entries.length) {
- this.hide();
- }
- }
-
- createEl() {
- const { icon, label, currentValue } = this.options_;
- const el = dom.createEl('li', {
- className: 'vjs-menu-item vjs-setting-menu-item',
- innerHTML: `
-
- ${this.localize(label)}
-
- `
- });
-
- this.settingMenuItemValue = dom.createEl('div', {
- className: 'vjs-setting-menu-value',
- innerHTML: this.localize(currentValue ? currentValue.label : '')
- });
-
- el.appendChild(this.settingMenuItemValue);
-
- return el;
- }
-
- setEntries(entries_) {
- const { entries, currentValue } = parseEntries(entries_);
-
- this.entries = entries;
- this.currentValue = currentValue;
-
- if (currentValue) {
- this.settingMenuItemValue.innerHTML = this.localize(currentValue.label);
- }
-
- this.subMenuItems = this.entries.map(({ label, value }) => {
- return new SettingSubMenuItem(this.player_, {
- label,
- value,
- parent: this,
- menu: this.menu
- });
- });
-
- this.subMenuItems.splice(
- 0,
- 0,
- new SettingSubMenuTitle(this.player_, {
- label: this.options_.label,
- menu: this.menu
- })
+import { getComponent, registerComponent, mergeOptions } from 'video.js';
+
+const MenuItem = getComponent('MenuItem');
+
+class SettingMenuItem extends MenuItem {
+ constructor(player, options) {
+ super(
+ player,
+ mergeOptions(
+ {
+ selectable: false
+ },
+ options
+ )
);
- }
-
- handleClick() {
- const dimensions = getMenuDimension(this.player_, this.subMenuItems);
-
- this.menu.update(this.subMenuItems);
- this.menu.resize(dimensions);
- }
-
- update({ label, value }) {
- this.currentValue = {
- label,
- value
- };
-
- this.settingMenuItemValue.innerHTML = this.localize(label);
-
- this.subMenuItems.forEach(function(item) {
- item.update && item.update();
- });
-
- // this.menu.menuButton_.unpressButton()
- this.menu.restore();
- }
- show() {
- super.show();
- this.menu.reset();
+ this.menu = options.menu;
}
}
diff --git a/source/Components/SettingMenu/Item/SettingOnOffItem.js b/source/Components/SettingMenu/Item/SettingOnOffItem.js
index d17b916..3f00115 100644
--- a/source/Components/SettingMenu/Item/SettingOnOffItem.js
+++ b/source/Components/SettingMenu/Item/SettingOnOffItem.js
@@ -1,7 +1,7 @@
-import SettingItem from './SettingItem.js';
+import SettingMenuItem from './SettingMenuItem.js';
import { dom, registerComponent } from 'video.js';
-class SettingOnOffItem extends SettingItem {
+class SettingOnOffItem extends SettingMenuItem {
createEl() {
const options = this.options_;
const el = dom.createEl('li', {
diff --git a/source/Components/SettingMenu/Item/SettingOptionItem.js b/source/Components/SettingMenu/Item/SettingOptionItem.js
new file mode 100644
index 0000000..7924119
--- /dev/null
+++ b/source/Components/SettingMenu/Item/SettingOptionItem.js
@@ -0,0 +1,139 @@
+import { registerComponent, dom } from 'video.js';
+
+import SettingMenuItem from './SettingMenuItem.js';
+import SettingSubOptionTitle from './SettingSubOptionTitle.js';
+import SettingSubOptionItem from './SettingSubOptionItem.js';
+import getMenuDimension from '../MenuDimension';
+
+/**
+ * @param {Array${this.localize(label)}
+
+ `
+ });
+
+ this.selectedValueEl = dom.createEl('div', {
+ className: 'vjs-setting-menu-value'
+ });
+
+ el.appendChild(this.selectedValueEl);
+
+ return el;
+ }
+
+ setEntries(entries_ = []) {
+ Object.assign(this, parseEntries(entries_));
+
+ this.updateSelectedValue();
+
+ this.subMenuItems = this.entries.map(({ label, value }) => {
+ return new SettingSubOptionItem(this.player_, {
+ label,
+ value,
+ parent: this,
+ menu: this.menu
+ });
+ });
+
+ this.subMenuItems.splice(
+ 0,
+ 0,
+ new SettingSubOptionTitle(this.player_, {
+ label: this.options_.label,
+ menu: this.menu
+ })
+ );
+ }
+
+ handleClick() {
+ const dimensions = getMenuDimension(this.player_, this.subMenuItems);
+
+ this.menu.update(this.subMenuItems);
+ this.menu.resize(dimensions);
+ }
+
+ update({ label, value }) {
+ this.selected = {
+ label,
+ value
+ };
+
+ this.updateSelectedValue();
+
+ this.subMenuItems.forEach(function(item) {
+ item.update && item.update();
+ });
+
+ // this.menu.menuButton_.unpressButton()
+ this.menu.restore();
+ }
+
+ updateSelectedValue() {
+ if (this.selected) {
+ this.selectedValueEl.innerHTML = this.localize(this.selected.label);
+ }
+ }
+
+ show() {
+ super.show();
+ this.menu.reset();
+ }
+}
+
+registerComponent('SettingOptionItem', SettingOptionItem);
+
+export default SettingOptionItem;
diff --git a/source/Components/SettingMenu/Item/SettingSubMenuItem.js b/source/Components/SettingMenu/Item/SettingSubOptionItem.js
similarity index 60%
rename from source/Components/SettingMenu/Item/SettingSubMenuItem.js
rename to source/Components/SettingMenu/Item/SettingSubOptionItem.js
index 990ec61..c6c8681 100644
--- a/source/Components/SettingMenu/Item/SettingSubMenuItem.js
+++ b/source/Components/SettingMenu/Item/SettingSubOptionItem.js
@@ -1,8 +1,8 @@
import { registerComponent } from 'video.js';
-import SettingItem from './SettingItem.js';
+import SettingMenuItem from './SettingMenuItem.js';
-class SettingSubMenuItem extends SettingItem {
+class SettingSubOptionItem extends SettingMenuItem {
constructor(player, options) {
super(player, options);
@@ -18,7 +18,7 @@ class SettingSubMenuItem extends SettingItem {
}
update() {
- this.selected(this.value === this.parent.currentValue.value);
+ this.selected(this.value === this.parent.selected.value);
}
handleClick() {
@@ -26,6 +26,6 @@ class SettingSubMenuItem extends SettingItem {
}
}
-registerComponent('SettingSubMenuItem', SettingSubMenuItem);
+registerComponent('SettingSubOptionItem', SettingSubOptionItem);
-export default SettingSubMenuItem;
+export default SettingSubOptionItem;
diff --git a/source/Components/SettingMenu/Item/SettingSubMenuTitle.js b/source/Components/SettingMenu/Item/SettingSubOptionTitle.js
similarity index 59%
rename from source/Components/SettingMenu/Item/SettingSubMenuTitle.js
rename to source/Components/SettingMenu/Item/SettingSubOptionTitle.js
index 99fe47c..2cf554d 100644
--- a/source/Components/SettingMenu/Item/SettingSubMenuTitle.js
+++ b/source/Components/SettingMenu/Item/SettingSubOptionTitle.js
@@ -1,8 +1,8 @@
import { registerComponent } from 'video.js';
-import SettingItem from './SettingItem.js';
+import SettingMenuItem from './SettingMenuItem.js';
-class SettingSubMenuTitle extends SettingItem {
+class SettingSubOptionTitle extends SettingMenuItem {
constructor(player, options) {
super(player, options);
@@ -16,6 +16,6 @@ class SettingSubMenuTitle extends SettingItem {
}
}
-registerComponent('SettingSubMenuTitle', SettingSubMenuTitle);
+registerComponent('SettingSubOptionTitle', SettingSubOptionTitle);
-export default SettingSubMenuTitle;
+export default SettingSubOptionTitle;
diff --git a/source/Components/SettingMenu/PlaybackRate/PlaybackRate.js b/source/Components/SettingMenu/PlaybackRate/PlaybackRate.js
deleted file mode 100644
index 842d524..0000000
--- a/source/Components/SettingMenu/PlaybackRate/PlaybackRate.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import SettingMenuItem from '../Item/SettingMenuItem.js';
-import { registerComponent } from 'video.js';
-
-class PlaybackRateSettingMenuItem extends SettingMenuItem {
- constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- label: 'Speed',
- icon: 'vjs-icon-slow-motion-video',
- entries: [
- 0.5,
- 0.75,
- {
- label: 'Normal',
- value: 1,
- defalut: true
- },
- 1.25,
- 1.5,
- 2
- ]
- })
- );
-
- this.addClass('vjs-setting-playback-rate');
-
- this.ratechangeBySettingMenu = false;
-
- const _this = this;
- const entries = this.entries;
-
- player.on('ratechange', function() {
- if (!_this.ratechangeBySettingMenu) {
- const rate = player.playbackRate();
- const currentValue =
- entries.filter(value => {
- return rate === value;
- })[0] || entries[2];
-
- _this.update(currentValue);
- }
-
- _this.ratechangeBySettingMenu = false;
- });
- }
-
- handleClick() {
- this.ratechangeBySettingMenu = true;
-
- super.handleClick();
- }
-
- update(selectedItem) {
- super.update(selectedItem);
-
- this.player_.playbackRate(selectedItem.value);
- }
-}
-
-registerComponent('PlaybackRateSettingMenuItem', PlaybackRateSettingMenuItem);
-
-export default PlaybackRateSettingMenuItem;
diff --git a/source/Components/SettingMenu/PlaybackRate/PlaybackRateSettingItem.js b/source/Components/SettingMenu/PlaybackRate/PlaybackRateSettingItem.js
new file mode 100644
index 0000000..6d5315a
--- /dev/null
+++ b/source/Components/SettingMenu/PlaybackRate/PlaybackRateSettingItem.js
@@ -0,0 +1,47 @@
+import SettingOptionItem from '../Item/SettingOptionItem.js';
+import { registerComponent } from 'video.js';
+
+class PlaybackRateSettingItem extends SettingOptionItem {
+ constructor(player, options) {
+ super(player, {
+ ...options,
+ label: 'Speed',
+ icon: 'vjs-icon-slow-motion-video',
+ entries: [
+ 0.5,
+ 0.75,
+ {
+ label: 'Normal',
+ value: 1,
+ defalut: true
+ },
+ 1.25,
+ 1.5,
+ 2
+ ]
+ });
+
+ this.addClass('vjs-setting-playback-rate');
+
+ // Since playback rate will be reset to noraml when video source changed
+ // So we need to listen on `ratechange`
+ player.on('ratechange', () => {
+ const rate = player.playbackRate();
+ const currentEntry = this.entries.find(({ value }) => rate === value);
+
+ this.update(currentEntry);
+ });
+ }
+
+ update(entry) {
+ super.update(entry);
+
+ if (this.player_.playbackRate() !== entry.value) {
+ this.player_.playbackRate(entry.value);
+ }
+ }
+}
+
+registerComponent('PlaybackRateSettingItem', PlaybackRateSettingItem);
+
+export default PlaybackRateSettingItem;
diff --git a/source/Components/SettingMenu/SettingMenuButton.js b/source/Components/SettingMenu/SettingMenuButton.js
index 9f1b01c..fa1909e 100644
--- a/source/Components/SettingMenu/SettingMenuButton.js
+++ b/source/Components/SettingMenu/SettingMenuButton.js
@@ -1,8 +1,8 @@
import { getComponent, registerComponent } from 'video.js';
import SettingMenu from './SettingMenu.js';
-import './Item/SettingMenuItem.js';
import './Item/SettingOnOffItem';
-import './PlaybackRate/PlaybackRate.js';
+import './Item/SettingOptionItem.js';
+import './PlaybackRate/PlaybackRateSettingItem.js';
import './Setting.scss';
const MenuButton = getComponent('MenuButton');
@@ -78,7 +78,7 @@ class SettingMenuButton extends MenuButton {
SettingMenuButton.prototype.controlText_ = 'Settings';
SettingMenuButton.prototype.options_ = {
- entries: ['PlaybackRateSettingMenuItem']
+ entries: ['PlaybackRateSettingItem']
};
registerComponent('SettingMenuButton', SettingMenuButton);
diff --git a/source/Plugin/AudioTrack/AudioTrack.js b/source/Plugin/AudioTrack/AudioTrack.js
index 7e99878..3a83d0c 100644
--- a/source/Plugin/AudioTrack/AudioTrack.js
+++ b/source/Plugin/AudioTrack/AudioTrack.js
@@ -1,5 +1,5 @@
import { getPlugin, registerPlugin } from 'video.js';
-import './AudioSettingItem';
+import './AudioTrackSettingItem';
class audio extends getPlugin('plugin') {
constructor(player, options = {}) {
diff --git a/source/Plugin/AudioTrack/AudioSettingItem.js b/source/Plugin/AudioTrack/AudioTrackSettingItem.js
similarity index 69%
rename from source/Plugin/AudioTrack/AudioSettingItem.js
rename to source/Plugin/AudioTrack/AudioTrackSettingItem.js
index 86673e9..3ed4401 100644
--- a/source/Plugin/AudioTrack/AudioSettingItem.js
+++ b/source/Plugin/AudioTrack/AudioTrackSettingItem.js
@@ -1,18 +1,15 @@
import { getComponent, registerComponent } from 'video.js';
-const SettingMenuItem = getComponent('SettingMenuItem');
+const SettingOptionItem = getComponent('SettingOptionItem');
-class AudioSettingItem extends SettingMenuItem {
+class AudioTrackSettingItem extends SettingOptionItem {
constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- name: 'AudioSettingItem',
- label: 'Audio',
- icon: 'vjs-icon-audiotrack',
- entries: options.quality || []
- })
- );
+ super(player, {
+ ...options,
+ name: 'AudioTrackSettingItem',
+ label: 'Audio',
+ icon: 'vjs-icon-audiotrack'
+ });
this.addClass('vjs-setting-audio');
@@ -28,11 +25,11 @@ class AudioSettingItem extends SettingMenuItem {
};
// show when alternate audio detected
- player.tech().on('usage', onHlsUsageEvent);
+ player.tech_.on('usage', onHlsUsageEvent);
// unbind the callback on player dispose
player.on('dispose', () => {
- player.tech().off('usage', onHlsUsageEvent);
+ player.tech_.off('usage', onHlsUsageEvent);
});
// hide when new source set
@@ -44,7 +41,7 @@ class AudioSettingItem extends SettingMenuItem {
update(selectedItem) {
super.update(selectedItem);
- this.player_.audio().pick(selectedItem.value.index);
+ this.player_.audio().pick(selectedItem.value);
}
onAlternateAudio() {
@@ -53,12 +50,12 @@ class AudioSettingItem extends SettingMenuItem {
const audioEntries = audioTracks.map((track, index) => {
const { id, kind, label, language } = track;
- // Since track is an `AudioTrack` instead of a normal "Object",
- // so i redistribute the value
+ // label and value are necessary attributes
return {
+ label,
+ value: index,
id,
kind,
- label,
language,
index,
track
@@ -88,8 +85,8 @@ class AudioSettingItem extends SettingMenuItem {
}
}
-getComponent('SettingMenuButton').prototype.options_.entries.push('AudioSettingItem');
+getComponent('SettingMenuButton').prototype.options_.entries.push('AudioTrackSettingItem');
-registerComponent('AudioSettingItem', AudioSettingItem);
+registerComponent('AudioTrackSettingItem', AudioTrackSettingItem);
-export default AudioSettingItem;
+export default AudioTrackSettingItem;
diff --git a/source/Plugin/Autoplay/AutoPlay.js b/source/Plugin/Autoplay/AutoPlay.js
index 4d5fd5d..14939ea 100644
--- a/source/Plugin/Autoplay/AutoPlay.js
+++ b/source/Plugin/Autoplay/AutoPlay.js
@@ -57,7 +57,7 @@ const AutoplayHandler = player => {
};
player.one('loadedmetadata', function handleMutedAutoplay() {
- // without readym, `player.play()` may retutn `undefined` as `this.changingSrc_` is true
+ // without ready, `player.play()` may retutn `undefined` as `this.changingSrc_` is true
player.ready(() => {
const playPromise = player.play();
diff --git a/source/Plugin/PictureInPicture/PictureInPicture.js b/source/Plugin/PictureInPicture/PictureInPicture.js
index eb6a1b7..f7e21eb 100644
--- a/source/Plugin/PictureInPicture/PictureInPicture.js
+++ b/source/Plugin/PictureInPicture/PictureInPicture.js
@@ -1,12 +1,10 @@
import videojs, { dom, registerPlugin, getPlugin } from 'video.js';
+import PipPlayerWrapper from './PipPlayerWrapper';
import './PictureInPicture.scss';
import './PipButton';
-import PipPlayerWrapper from './PipPlayerWrapper';
-const Plugin = getPlugin('plugin');
-
-class pictureInPicture extends Plugin {
+class pictureInPicture extends getPlugin('plugin') {
constructor(player, options = {}) {
super(player, options);
@@ -41,23 +39,26 @@ class pictureInPicture extends Plugin {
document.body.appendChild(videoEl);
- const pipPlayerOptions = Object.assign(parentPlayer.options_, parentPlayer.cache_, {
+ const pipPlayerOptions = {
+ ...parentPlayer.options_,
+ ...parentPlayer.cache_,
autoplay: true,
muted: parentPlayer.muted()
- });
+ };
const pipPlayer = (this.pipPlayer = videojs(videoEl, pipPlayerOptions));
- this.wrapper = new PipPlayerWrapper(
- pipPlayer,
- Object.assign(options_, {
- parentPlayer
- })
- );
+ this.wrapper = new PipPlayerWrapper(pipPlayer, {
+ ...options_,
+ parentPlayer
+ });
this.dragzone = pipPlayer.getChild('PlayToggleLayer');
- this.updatePosition(Object.assign({}, this.cache_, options_));
+ this.updatePosition({
+ ...this.cache_,
+ ...options_
+ });
pipPlayer.ready(() => {
pipPlayer.currentTime(parentPlayer.currentTime());
diff --git a/source/Plugin/Playlist/Playlist.js b/source/Plugin/Playlist/Playlist.js
index cbf9b9a..0c53ec4 100644
--- a/source/Plugin/Playlist/Playlist.js
+++ b/source/Plugin/Playlist/Playlist.js
@@ -12,7 +12,7 @@ class PlayList extends List {
constructor(player, array, startIndex = 0) {
super(array, startIndex);
- this.player = player;
+ this.player_ = player;
this.loadPoster_ = true;
@@ -30,6 +30,8 @@ class PlayList extends List {
} else {
return this.autoPlayNext_;
}
+
+ this.player_.trigger('autoplaynext', this.autoPlayNext_);
}
play(index) {
@@ -39,7 +41,7 @@ class PlayList extends List {
const current = this.current();
const { poster, sources, title } = current;
- const player = this.player;
+ const player = this.player_;
const addPoster = () => {
player.poster(poster || '');
};
@@ -72,26 +74,27 @@ class PlayList extends List {
player.src(sources);
player.title(title || '');
- player.trigger(
- 'playlistchange',
- Object.assign(this.current(), {
- index: this.index()
- })
- );
+ player.trigger('playlistchange', {
+ ...current,
+ index: this.index()
+ });
}
}
-registerPlugin('setPlayList', function(playlist) {
+registerPlugin('setPlayList', function(playlist, startIndex) {
const player = this.player_;
- player.playlist = new PlayList(player, playlist);
- player.trigger('playlist');
+ player.playlist = new PlayList(player, playlist, startIndex);
+
+ player.trigger('playlist', playlist);
});
hook('setup', vjsPlayer => {
- const playlist = vjsPlayer.options_.playlist || [];
+ const { playlist } = vjsPlayer.options_;
+
+ if (playlist && playlist.length) {
+ const startIndex = playlist.findIndex(v => v.default);
- if (playlist.length) {
- vjsPlayer.setPlayList(playlist);
+ vjsPlayer.setPlayList(playlist, startIndex);
}
});
diff --git a/source/Plugin/Playlist/ToggleAutoPlayNext.js b/source/Plugin/Playlist/ToggleAutoPlayNext.js
index f109d13..36d8519 100644
--- a/source/Plugin/Playlist/ToggleAutoPlayNext.js
+++ b/source/Plugin/Playlist/ToggleAutoPlayNext.js
@@ -11,7 +11,6 @@ class ToggleAutoPlayNext extends SettingOnOffItem {
icon: 'vjs-icon-next-item'
});
- this.menu = options.menu;
this.updateVisibility();
this.addClass('vjs-setting-autoplay');
@@ -19,6 +18,10 @@ class ToggleAutoPlayNext extends SettingOnOffItem {
this.updateVisibility();
this.update(player.playlist.autoPlayNext_);
});
+
+ player.on('autoplaynext', (_, active) => {
+ this.update(active);
+ });
}
updateVisibility() {
@@ -34,7 +37,11 @@ class ToggleAutoPlayNext extends SettingOnOffItem {
update(active) {
super.update(active);
- this.player_.playlist.autoPlayNext(this.active);
+ const { playlist } = this.player_;
+
+ if (playlist.autoPlayNext_ !== this.active) {
+ this.player_.playlist.autoPlayNext(this.active);
+ }
}
}
diff --git a/source/Plugin/Quality/Quality.js b/source/Plugin/Quality/Quality.js
index 6379b40..5867557 100644
--- a/source/Plugin/Quality/Quality.js
+++ b/source/Plugin/Quality/Quality.js
@@ -1,13 +1,13 @@
import { hook, registerPlugin } from 'video.js';
-
import List from '../../Utils/List';
-import './QualityItem';
+
+import './QualitySettingItem';
class Quality extends List {
constructor(player, array, defaultQualityLevel = 0) {
super(array, defaultQualityLevel);
- this.player = player;
+ this.player_ = player;
this.pick(defaultQualityLevel, true);
}
@@ -17,7 +17,7 @@ class Quality extends List {
this.index(index);
}
- const player = this.player;
+ const player = this.player_;
const current = this.current();
const cachedCurrentTime = player.ended() ? 0 : player.currentTime();
@@ -33,40 +33,29 @@ class Quality extends List {
player.src(current.sources);
- player.trigger(
- 'qualitychange',
- Object.assign(current, {
- index: this.index()
- })
- );
+ player.trigger('qualitychange', {
+ ...current,
+ index: this.index()
+ });
}
}
-const setQuality = function(quality, defaultQualityLevel = 0) {
+const setQualities = function(qualities, defaultQualityLevel) {
const player = this.player_;
- const QualityItem = player.findChild('QualityItem')[0].component;
-
- player.quality = new Quality(player, quality, defaultQualityLevel);
- QualityItem.setEntries(
- quality.map(({ label, default: default_ }, index) => ({
- label,
- value: index,
- defalut: default_
- }))
- );
+ player.qualities = new Quality(player, qualities, defaultQualityLevel);
- QualityItem.show();
-
- player.trigger('quality');
+ player.trigger('quality', qualities);
};
-registerPlugin('setQuality', setQuality);
+registerPlugin('setQualities', setQualities);
hook('setup', vjsPlayer => {
- const { quality, defaultQualityLevel } = vjsPlayer.options_;
+ const { qualities } = vjsPlayer.options_;
+
+ if (qualities && qualities.length) {
+ const defaultQualityLevel = qualities.findIndex(v => v.default);
- if (quality && quality.length) {
- vjsPlayer.setQuality(quality, defaultQualityLevel);
+ vjsPlayer.setQualities(qualities, defaultQualityLevel);
}
});
diff --git a/source/Plugin/Quality/QualityItem.js b/source/Plugin/Quality/QualityItem.js
deleted file mode 100644
index 4b5f198..0000000
--- a/source/Plugin/Quality/QualityItem.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { getComponent, registerComponent } from 'video.js';
-
-const SettingMenuItem = getComponent('SettingMenuItem');
-
-class QualityItem extends SettingMenuItem {
- constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- name: 'QualityItem',
- label: 'Quality',
- icon: 'vjs-icon-hd',
- entries: options.quality || []
- })
- );
-
- this.addClass('vjs-setting-quality');
- }
-
- update(selectedItem) {
- super.update(selectedItem);
-
- this.player_.quality.pick(selectedItem.value);
- }
-}
-
-getComponent('SettingMenuButton').prototype.options_.entries.push('QualityItem');
-
-registerComponent('QualityItem', QualityItem);
-
-export default QualityItem;
diff --git a/source/Plugin/Quality/QualitySettingItem.js b/source/Plugin/Quality/QualitySettingItem.js
new file mode 100644
index 0000000..1374070
--- /dev/null
+++ b/source/Plugin/Quality/QualitySettingItem.js
@@ -0,0 +1,41 @@
+import { getComponent, registerComponent } from 'video.js';
+
+const SettingOptionItem = getComponent('SettingOptionItem');
+
+class QualitySettingItem extends SettingOptionItem {
+ constructor(player, options) {
+ super(player, {
+ ...options,
+ name: 'QualitySettingItem',
+ label: 'Quality',
+ icon: 'vjs-icon-hd',
+ entries: player.options_.quality || []
+ });
+
+ this.addClass('vjs-setting-quality');
+
+ player.on('quality', (_, qualities) => {
+ this.setEntries(
+ qualities.map((quality, index) => {
+ quality.value = index;
+
+ return quality;
+ })
+ );
+
+ this.show();
+ });
+ }
+
+ update(selectedItem) {
+ super.update(selectedItem);
+
+ this.player_.qualities.pick(selectedItem.value);
+ }
+}
+
+getComponent('SettingMenuButton').prototype.options_.entries.push('QualitySettingItem');
+
+registerComponent('QualitySettingItem', QualitySettingItem);
+
+export default QualitySettingItem;
diff --git a/source/Plugin/QualityHls/QualityHls.js b/source/Plugin/QualityHls/QualityHls.js
index d0f5616..749069b 100644
--- a/source/Plugin/QualityHls/QualityHls.js
+++ b/source/Plugin/QualityHls/QualityHls.js
@@ -1 +1 @@
-import './QualityHlsItem';
+import './QualityHlsSettingItem';
diff --git a/source/Plugin/QualityHls/QualityHlsItem.js b/source/Plugin/QualityHls/QualityHlsSettingItem.js
similarity index 76%
rename from source/Plugin/QualityHls/QualityHlsItem.js
rename to source/Plugin/QualityHls/QualityHlsSettingItem.js
index 90c858e..cb4be48 100644
--- a/source/Plugin/QualityHls/QualityHlsItem.js
+++ b/source/Plugin/QualityHls/QualityHlsSettingItem.js
@@ -1,18 +1,15 @@
import videojs, { getComponent, registerComponent } from 'video.js';
-const SettingMenuItem = getComponent('SettingMenuItem');
+const SettingOptionItem = getComponent('SettingOptionItem');
-class QualityHlsItem extends SettingMenuItem {
+class QualityHlsSettingItem extends SettingOptionItem {
constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- name: 'QualityItem',
- label: 'Quality',
- icon: 'vjs-icon-hd',
- entries: options.quality || []
- })
- );
+ super(player, {
+ ...options,
+ name: 'QualityHlsSettingItem',
+ label: 'Quality',
+ icon: 'vjs-icon-hd'
+ });
this.addClass('vjs-setting-quality');
@@ -74,9 +71,10 @@ class QualityHlsItem extends SettingMenuItem {
});
this.setEntries(entries);
+
this.show();
- this.player_.trigger('quality');
+ this.player_.trigger('qualities', this.levels);
}
update(selectedItem) {
@@ -92,9 +90,12 @@ class QualityHlsItem extends SettingMenuItem {
'qualitychange',
this.entries.reduce((acc, entry, index) => {
if (entry.value === value) {
- return {
+ const level = this.levels.find(v => v.height === value) || {};
+
+ acc = {
index,
- ...entry
+ ...entry,
+ ...level
};
}
@@ -104,8 +105,8 @@ class QualityHlsItem extends SettingMenuItem {
}
}
-getComponent('SettingMenuButton').prototype.options_.entries.push('QualityHlsItem');
+getComponent('SettingMenuButton').prototype.options_.entries.push('QualityHlsSettingItem');
-registerComponent('QualityHlsItem', QualityHlsItem);
+registerComponent('QualityHlsSettingItem', QualityHlsSettingItem);
-export default QualityHlsItem;
+export default QualityHlsSettingItem;
diff --git a/source/Plugin/Subtitles/SubtitleSettingMenuItem.js b/source/Plugin/Subtitles/SubtitleSettingMenuItem.js
new file mode 100644
index 0000000..d8b5caa
--- /dev/null
+++ b/source/Plugin/Subtitles/SubtitleSettingMenuItem.js
@@ -0,0 +1,49 @@
+import { getComponent, registerComponent } from 'video.js';
+
+const SettingOptionItem = getComponent('SettingOptionItem');
+
+class SubtitleSettingMenuItem extends SettingOptionItem {
+ constructor(player, options) {
+ super(player, {
+ ...options,
+ name: 'SubtitleSettingMenuItem',
+ label: 'Subtitles',
+ icon: 'vjs-icon-subtitles',
+ entries: player.options_.subtitles || []
+ });
+
+ this.addClass('vjs-setting-subtitles');
+
+ player.on('subtitles', (_, subtitles) => {
+ this.setEntries(
+ subtitles
+ .map(({ label, default: default_ }, index) => ({
+ label,
+ value: index,
+ defalut: default_
+ }))
+ .concat([
+ {
+ label: 'Close Subtitles',
+ value: -1,
+ defalut: false
+ }
+ ])
+ );
+
+ this.show();
+ });
+ }
+
+ update(selectedItem) {
+ super.update(selectedItem);
+
+ this.player_.subtitles().pick(selectedItem.value);
+ }
+}
+
+getComponent('SettingMenuButton').prototype.options_.entries.push('SubtitleSettingMenuItem');
+
+registerComponent('SubtitleSettingMenuItem', SubtitleSettingMenuItem);
+
+export default SubtitleSettingMenuItem;
diff --git a/source/Plugin/Subtitles/Subtitles.js b/source/Plugin/Subtitles/Subtitles.js
index 62afeeb..62fa88e 100644
--- a/source/Plugin/Subtitles/Subtitles.js
+++ b/source/Plugin/Subtitles/Subtitles.js
@@ -1,11 +1,9 @@
import { hook, registerPlugin, getPlugin } from 'video.js';
-import './SubtitlesItem';
+import './SubtitleSettingMenuItem';
import './Subtitles.scss';
-const Plugin = getPlugin('plugin');
-
-class subtitles extends Plugin {
+class subtitles extends getPlugin('plugin') {
constructor(player, options) {
super(player, options);
@@ -14,7 +12,7 @@ class subtitles extends Plugin {
let timeout;
- player.textTracks().on('change', () => {
+ const handleSubtitleChangeEvent = () => {
clearTimeout(timeout);
const subtitles = this.values();
@@ -33,6 +31,11 @@ class subtitles extends Plugin {
});
}
}, 10);
+ };
+
+ player.textTracks().on('change', handleSubtitleChangeEvent);
+ player.on('dispose', () => {
+ player.textTracks().off('change', handleSubtitleChangeEvent);
});
}
@@ -73,26 +76,6 @@ class subtitles extends Plugin {
}
});
- const SubtitlesMenuItem = player.findChild('SubtitlesMenuItem')[0].component;
-
- SubtitlesMenuItem.setEntries(
- subtitles
- .map(({ label, default: default_ }, index) => ({
- label,
- value: index,
- defalut: default_
- }))
- .concat([
- {
- label: 'Close Subtitles',
- value: -1,
- defalut: false
- }
- ])
- );
-
- SubtitlesMenuItem.show();
-
player.trigger('subtitles', subtitles);
}
}
diff --git a/source/Plugin/Subtitles/SubtitlesItem.js b/source/Plugin/Subtitles/SubtitlesItem.js
deleted file mode 100644
index edddb91..0000000
--- a/source/Plugin/Subtitles/SubtitlesItem.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { getComponent, registerComponent } from 'video.js';
-
-const SettingMenuItem = getComponent('SettingMenuItem');
-
-class SubtitlesMenuItem extends SettingMenuItem {
- constructor(player, options) {
- super(
- player,
- Object.assign(options, {
- name: 'SubtitlesMenuItem',
- label: 'Subtitles',
- icon: 'vjs-icon-subtitles',
- entries: options.subtitles || []
- })
- );
-
- this.addClass('vjs-setting-subtitles');
- }
-
- update(selectedItem) {
- super.update(selectedItem);
-
- this.player_.subtitles().pick(selectedItem.value);
- }
-}
-
-getComponent('SettingMenuButton').prototype.options_.entries.push('SubtitlesMenuItem');
-
-registerComponent('SubtitlesMenuItem', SubtitlesMenuItem);
-
-export default SubtitlesMenuItem;