\n \n '});return this.path=e.querySelector("path"),e},i.handleClick=function(){this.player_.getChild("BeforePlayNextLayer").timeup()},n}(o);a.prototype.controlText_="PlayNext",t.registerComponent("PlayNextSpinner",a);var l=t.getComponent("Component"),s=function(i){function o(t,e){var o;o=i.call(this,t,e)||this,o.addChild("PlayNextSpinner",{},2),o.addChild("CancelPlayNextEl",{text:"✕",className:"vjs-cancel-playnext-cross"},{},2),o.addChild("CancelPlayNextEl",{text:"Cancel",className:"vjs-cancel-playnext-button"},{},2),o.originPoster=t.poster()||t.playlist.current().poster,t.poster(o.getNext().poster);var a=o.dispose.bind(n(n(o))),l=["timeupdate","loadstart"];return t.one(l,a),o.on("dispose",function(){t.off(l,a),t.removeClass("vjs-play-next-ready")}),o.countdown(t.options_.playNextCountDown),t.addClass("vjs-play-next-ready"),o}e(o,i);var a=o.prototype;return a.getNext=function(){var t=this.player_.playlist;return this.next=t.values[t.calc(1)],this.next},a.createEl=function(){var e=this.getNext().title,n=t.dom.createEl("div",{className:"vjs-before-playnext"});return this.contentEl_=t.dom.createEl("div",{className:"vjs-before-playnext-content",innerHTML:'\n '+this.localize("Up Next")+'
\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\n \n '});return this.path=e.querySelector("path"),e},i.handleClick=function(){this.player_.getChild("BeforePlayNextLayer").timeup()},e}(a);l.prototype.controlText_="PlayNext",t.registerComponent("PlayNextSpinner",l);var r=t.getComponent("Component"),s=function(e){function o(t,n){var o;o=e.call(this,t,n)||this,o.addChild("PlayNextSpinner",{},2),o.addChild("CancelPlayNextEl",{text:"✕",className:"vjs-cancel-playnext-cross"},{},2),o.addChild("CancelPlayNextEl",{text:"Cancel",className:"vjs-cancel-playnext-button"},{},2),o.originPoster=t.poster()||t.playlist.current().poster,t.poster(o.getNext().poster);var a=o.dispose.bind(i(i(o))),l=["timeupdate","loadstart"];return t.one(l,a),o.on("dispose",function(){t.off(l,a),t.removeClass("vjs-play-next-ready")}),o.countdown(t.options_.playNextCountDown),t.addClass("vjs-play-next-ready"),o}n(o,e);var a=o.prototype;return a.getNext=function(){var t=this.player_.playlist;return this.next=t.values[t.calc(1)],this.next},a.createEl=function(){var e=this.getNext().title,n=t.dom.createEl("div",{className:"vjs-before-playnext"});return this.contentEl_=t.dom.createEl("div",{className:"vjs-before-playnext-content",innerHTML:'\n '+this.localize("Up Next")+'
\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-1&&(ControlBar.prototype.options_.children=[{name:"ControlSeparator",className:"top",children:[]},{name:"ControlSeparator",className:"middle",children:n.splice(0,i+1)},{name:"ControlSeparator",className:"bottom",children:n}]),t}),video_js.hook("setup",function(e){var t=!1!==e.options_.mobileView;(function(e){return window.matchMedia?window.matchMedia("(max-width: "+e+"px)").matches:window.innerWidth<=e})(480)&&t&&(e.controlBar.hide(),e.one("playing",function(){var t=["mouseover","userinactive","touchstart"];e.one(t,function n(){e.off(t,n),e.controlBar.show()}),e.one("touchend",function(){e.userActive(!0)})}),e.addClass("vjs-mobile-view"))});var SeekBar=video_js.getComponent("SeekBar");SeekBar.prototype.getPercent=function(){var e=this.player_.currentTime(),t=e/this.player_.duration();return t>=1?1:t},SeekBar.prototype.handleMouseMove=function(e){var t=this.player_;if(video_js.dom.isSingleLeftClick(e)){var n=this.calculateDistance(e)*t.duration();n===t.duration()&&(n-=.1),t.currentTime(n),this.update()}},video_js.getComponent("ControlBar").prototype.options_.children=["PlayToggle","CustomControlSpacer","VolumePanel","CurrentTimeDisplay","TimeDivider","DurationDisplay","ProgressControl","CustomControlSpacer","SettingMenuButton","FullscreenToggle"],video_js.hook("setup",function(e){e.on("mouseleave",function(){e.userActive(!1)}),e.ready(function(){e.controls(!1!==e.options_.controls)})});var Title=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,i.title_=n.playerOptions.title||"",i.update(i.title_),i}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){var t=e.prototype.createEl.call(this,"div",{className:"vjs-title"});return this.contentEl_=video_js.dom.createEl("div",{className:"vjs-title-field"}),t.appendChild(this.contentEl_),t},n.update=function(e){e?this.show():this.hide(),this.player_.cache_.title=this.title_,this.title_=e,this.contentEl_.innerHTML=e},t}(video_js.getComponent("Component")),title=function(e){var t=this.player_.getChild("VideoTitle");if(void 0===e)return t.title_;t.update(e)};video_js.registerPlugin("title",title),video_js.registerComponent("VideoTitle",Title),video_js.getComponent("Player").prototype.options_.children.splice(2,0,"VideoTitle");var PlayToggleButton=video_js.getComponent("PlayToggle"),ClickableComponent=video_js.getComponent("ClickableComponent"),PlayToggleLayer=function(e){function t(t,n){return e.call(this,t,n)||this}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){return video_js.dom.createEl("div",{className:"vjs-play-toggle-layer"})},n.handleClick=function(e){(this.player_.userActive()||this.player_.paused())&&PlayToggleButton.prototype.handleClick.call(this,e)},t}(ClickableComponent);video_js.registerComponent("PlayToggleLayer",PlayToggleLayer);var playerChildren=video_js.getComponent("Player").prototype.options_.children,loadSpinnerIndex=playerChildren.indexOf("loadingSpinner");playerChildren.splice(loadSpinnerIndex,0,"PlayToggleLayer");var MenuItem=video_js.getComponent("MenuItem"),ContextMenuItem=function(e){function t(t,n){var i;return i=e.call(this,t,_extends({},n,{selectable:!0}))||this,i.addClass("vjs-context-menu-item"),i.controlText(n.label),i}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){for(var t,n=arguments.length,i=new Array(n),o=0;o'),s},n.handleClick=function(){this.player_.findChild("ContextMenu")[0].component.hide()},t}(MenuItem);video_js.registerComponent("ContextMenuItem",ContextMenuItem);var ContextMenuToggleLoop=function(e){function t(t){var n;return n=e.call(this,t,{name:"ContextMenuToggleLoop",label:"Loop",icon:"vjs-icon-loop"})||this,n.addClass("vjs-checkbox"),t.on("loadstart",n.update.bind(_assertThisInitialized(_assertThisInitialized(n)))),n}_inheritsLoose(t,e);var n=t.prototype;return n.update=function(){this.selected(this.player_.loop())},n.handleClick=function(){e.prototype.handleClick.call(this),this.player_.loop(!this.player_.loop()),this.update()},t}(ContextMenuItem);video_js.registerComponent("ContextMenuToggleLoop",ContextMenuToggleLoop);var AboutThisPlayer=function(e){function t(t){return e.call(this,t,{name:"AboutThisPlayer",label:"About This Player",icon:"vjs-icon-github"})||this}return _inheritsLoose(t,e),t.prototype.handleClick=function(){e.prototype.handleClick.call(this),window.open("https://github.com/Pong420/videojs-plus","_blank")},t}(ContextMenuItem);video_js.registerComponent("AboutThisPlayer",AboutThisPlayer);var ClickableComponent$1=video_js.getComponent("ClickableComponent"),CloseContextMenu=function(e){function t(){return e.apply(this,arguments)||this}_inheritsLoose(t,e);var n=t.prototype;return n.buildCSSClass=function(){return"vjs-close-menu-layer vjs-close-context-menu"},n.handleClick=function(){this.options_.menu.hide()},t}(ClickableComponent$1);video_js.registerComponent("CloseContextMenu",CloseContextMenu);var Menu=video_js.getComponent("Menu"),ContextMenu=function(e){function t(t,n){var i;i=e.call(this,t,n)||this,i.addClass("vjs-context-menu"),i.hide(),i.player_.on("contextmenu",i.onContextmenu.bind(_assertThisInitialized(_assertThisInitialized(i))));var o=i.handleClick.bind(_assertThisInitialized(_assertThisInitialized(i)));return window.addEventListener("click",o),i.on("dispose",function(){window.removeEventListener("click",o)}),i}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){for(var t,n=arguments.length,i=new Array(n),o=0;o\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.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-1&&(ControlBar.prototype.options_.children=[{name:"ControlSeparator",className:"top",children:[]},{name:"ControlSeparator",className:"middle",children:n.splice(0,i+1)},{name:"ControlSeparator",className:"bottom",children:n}]),t}),video_js.hook("setup",function(e){var t=!1!==e.options_.mobileView;(function(e){return window.matchMedia?window.matchMedia("(max-width: "+e+"px)").matches:window.innerWidth<=e})(480)&&t&&(e.controlBar.hide(),e.one("playing",function(){var t=["mouseover","userinactive","touchstart"];e.one(t,function n(){e.off(t,n),e.controlBar.show()}),e.one("touchend",function(){e.userActive(!0)})}),e.addClass("vjs-mobile-view"))});var SeekBar=video_js.getComponent("SeekBar");SeekBar.prototype.getPercent=function(){var e=this.player_.currentTime(),t=e/this.player_.duration();return t>=1?1:t},SeekBar.prototype.handleMouseMove=function(e){var t=this.player_;if(video_js.dom.isSingleLeftClick(e)){var n=this.calculateDistance(e)*t.duration();n===t.duration()&&(n-=.1),t.currentTime(n),this.update()}},video_js.getComponent("ControlBar").prototype.options_.children=["PlayToggle","CustomControlSpacer","VolumePanel","CurrentTimeDisplay","TimeDivider","DurationDisplay","ProgressControl","CustomControlSpacer","SettingMenuButton","FullscreenToggle"],video_js.hook("setup",function(e){e.on("mouseleave",function(){e.userActive(!1)}),e.ready(function(){e.controls(!1!==e.options_.controls)})});var Title=function(e){function t(t,n){var i;return i=e.call(this,t,n)||this,i.title_=n.playerOptions.title||"",i.update(i.title_),i}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){var t=e.prototype.createEl.call(this,"div",{className:"vjs-title"});return this.contentEl_=video_js.dom.createEl("div",{className:"vjs-title-field"}),t.appendChild(this.contentEl_),t},n.update=function(e){e?this.show():this.hide(),this.player_.cache_.title=this.title_,this.title_=e,this.contentEl_.innerHTML=e},t}(video_js.getComponent("Component")),title=function(e){var t=this.player_.getChild("VideoTitle");if(void 0===e)return t.title_;t.update(e)};video_js.registerPlugin("title",title),video_js.registerComponent("VideoTitle",Title),video_js.getComponent("Player").prototype.options_.children.splice(2,0,"VideoTitle");var PlayToggleButton=video_js.getComponent("PlayToggle"),ClickableComponent=video_js.getComponent("ClickableComponent"),PlayToggleLayer=function(e){function t(t,n){return e.call(this,t,n)||this}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){return video_js.dom.createEl("div",{className:"vjs-play-toggle-layer"})},n.handleClick=function(e){(this.player_.userActive()||this.player_.paused())&&PlayToggleButton.prototype.handleClick.call(this,e)},t}(ClickableComponent);video_js.registerComponent("PlayToggleLayer",PlayToggleLayer);var playerChildren=video_js.getComponent("Player").prototype.options_.children,loadSpinnerIndex=playerChildren.indexOf("loadingSpinner");playerChildren.splice(loadSpinnerIndex,0,"PlayToggleLayer");var MenuItem=video_js.getComponent("MenuItem"),ContextMenuItem=function(e){function t(t,n){var i;return i=e.call(this,t,_extends({},n,{selectable:!0}))||this,i.addClass("vjs-context-menu-item"),i.controlText(n.label),i}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){for(var t,n=arguments.length,i=new Array(n),o=0;o'),s},n.handleClick=function(){this.player_.findChild("ContextMenu")[0].component.hide()},t}(MenuItem);video_js.registerComponent("ContextMenuItem",ContextMenuItem);var ContextMenuToggleLoop=function(e){function t(t){var n;return n=e.call(this,t,{name:"ContextMenuToggleLoop",label:"Loop",icon:"vjs-icon-loop"})||this,n.addClass("vjs-checkbox"),t.on("loadstart",n.update.bind(_assertThisInitialized(_assertThisInitialized(n)))),n}_inheritsLoose(t,e);var n=t.prototype;return n.update=function(){this.selected(this.player_.loop())},n.handleClick=function(){e.prototype.handleClick.call(this),this.player_.loop(!this.player_.loop()),this.update()},t}(ContextMenuItem);video_js.registerComponent("ContextMenuToggleLoop",ContextMenuToggleLoop);var AboutThisPlayer=function(e){function t(t){return e.call(this,t,{name:"AboutThisPlayer",label:"About This Player",icon:"vjs-icon-github"})||this}return _inheritsLoose(t,e),t.prototype.handleClick=function(){e.prototype.handleClick.call(this),window.open("https://github.com/Pong420/videojs-plus","_blank")},t}(ContextMenuItem);video_js.registerComponent("AboutThisPlayer",AboutThisPlayer);var ClickableComponent$1=video_js.getComponent("ClickableComponent"),CloseContextMenu=function(e){function t(){return e.apply(this,arguments)||this}_inheritsLoose(t,e);var n=t.prototype;return n.buildCSSClass=function(){return"vjs-close-menu-layer vjs-close-context-menu"},n.handleClick=function(){this.options_.menu.hide()},t}(ClickableComponent$1);video_js.registerComponent("CloseContextMenu",CloseContextMenu);var Menu=video_js.getComponent("Menu"),ContextMenu=function(e){function t(t,n){var i;i=e.call(this,t,n)||this,i.addClass("vjs-context-menu"),i.hide(),i.player_.on("contextmenu",i.onContextmenu.bind(_assertThisInitialized(_assertThisInitialized(i))));var o=i.handleClick.bind(_assertThisInitialized(_assertThisInitialized(i)));return window.addEventListener("click",o),i.on("dispose",function(){window.removeEventListener("click",o)}),i}_inheritsLoose(t,e);var n=t.prototype;return n.createEl=function(){for(var t,n=arguments.length,i=new Array(n),o=0;o\n '+this.localize(e.label)+'
\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 \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-1&&(c.prototype.options_.children=[{name:"ControlSeparator",className:"top",children:[]},{name:"ControlSeparator",className:"middle",children:n.splice(0,i+1)},{name:"ControlSeparator",className:"bottom",children:n}]),t}),e.hook("setup",function(e){var t=!1!==e.options_.mobileView;(function(e){return window.matchMedia?window.matchMedia("(max-width: "+e+"px)").matches:window.innerWidth<=e})(480)&&t&&(e.controlBar.hide(),e.one("playing",function(){var t=["mouseover","userinactive","touchstart"];e.one(t,function n(){e.off(t,n),e.controlBar.show()}),e.one("touchend",function(){e.userActive(!0)})}),e.addClass("vjs-mobile-view"))});var h=e.getComponent("SeekBar");h.prototype.getPercent=function(){var e=this.player_.currentTime(),t=e/this.player_.duration();return t>=1?1:t},h.prototype.handleMouseMove=function(t){var n=this.player_;if(e.dom.isSingleLeftClick(t)){var i=this.calculateDistance(t)*n.duration();i===n.duration()&&(i-=.1),n.currentTime(i),this.update()}},e.getComponent("ControlBar").prototype.options_.children=["PlayToggle","CustomControlSpacer","VolumePanel","CurrentTimeDisplay","TimeDivider","DurationDisplay","ProgressControl","CustomControlSpacer","SettingMenuButton","FullscreenToggle"],e.hook("setup",function(e){e.on("mouseleave",function(){e.userActive(!1)}),e.ready(function(){e.controls(!1!==e.options_.controls)})});var d=function(t){function n(e,n){var i;return i=t.call(this,e,n)||this,i.title_=n.playerOptions.title||"",i.update(i.title_),i}i(n,t);var o=n.prototype;return o.createEl=function(){var n=t.prototype.createEl.call(this,"div",{className:"vjs-title"});return this.contentEl_=e.dom.createEl("div",{className:"vjs-title-field"}),n.appendChild(this.contentEl_),n},o.update=function(e){e?this.show():this.hide(),this.player_.cache_.title=this.title_,this.title_=e,this.contentEl_.innerHTML=e},n}(e.getComponent("Component")),v=function(e){var t=this.player_.getChild("VideoTitle");if(void 0===e)return t.title_;t.update(e)};e.registerPlugin("title",v),e.registerComponent("VideoTitle",d),e.getComponent("Player").prototype.options_.children.splice(2,0,"VideoTitle");var m=e.getComponent("PlayToggle"),f=e.getComponent("ClickableComponent"),C=function(t){function n(e,n){return t.call(this,e,n)||this}i(n,t);var o=n.prototype;return o.createEl=function(){return e.dom.createEl("div",{className:"vjs-play-toggle-layer"})},o.handleClick=function(e){(this.player_.userActive()||this.player_.paused())&&m.prototype.handleClick.call(this,e)},n}(f);e.registerComponent("PlayToggleLayer",C);var g=e.getComponent("Player").prototype.options_.children,y=g.indexOf("loadingSpinner");g.splice(y,0,"PlayToggleLayer");var b=e.getComponent("MenuItem"),_=function(e){function t(t,i){var o;return o=e.call(this,t,n({},i,{selectable:!0}))||this,o.addClass("vjs-context-menu-item"),o.controlText(i.label),o}i(t,e);var o=t.prototype;return o.createEl=function(){for(var t,n=arguments.length,i=new Array(n),o=0;o'),r},o.handleClick=function(){this.player_.findChild("ContextMenu")[0].component.hide()},t}(b);e.registerComponent("ContextMenuItem",_);var j=function(e){function t(t){var n;return n=e.call(this,t,{name:"ContextMenuToggleLoop",label:"Loop",icon:"vjs-icon-loop"})||this,n.addClass("vjs-checkbox"),t.on("loadstart",n.update.bind(o(o(n)))),n}i(t,e);var n=t.prototype;return n.update=function(){this.selected(this.player_.loop())},n.handleClick=function(){e.prototype.handleClick.call(this),this.player_.loop(!this.player_.loop()),this.update()},t}(_);e.registerComponent("ContextMenuToggleLoop",j);var M=function(e){function t(t){return e.call(this,t,{name:"AboutThisPlayer",label:"About This Player",icon:"vjs-icon-github"})||this}return i(t,e),t.prototype.handleClick=function(){e.prototype.handleClick.call(this),window.open("https://github.com/Pong420/videojs-plus","_blank")},t}(_);e.registerComponent("AboutThisPlayer",M);var S=e.getComponent("ClickableComponent"),w=function(e){function t(){return e.apply(this,arguments)||this}i(t,e);var n=t.prototype;return n.buildCSSClass=function(){return"vjs-close-menu-layer vjs-close-context-menu"},n.handleClick=function(){this.options_.menu.hide()},t}(S);e.registerComponent("CloseContextMenu",w);var k=e.getComponent("Menu"),E=function(e){function t(t,n){var i;i=e.call(this,t,n)||this,i.addClass("vjs-context-menu"),i.hide(),i.player_.on("contextmenu",i.onContextmenu.bind(o(o(i))));var r=i.handleClick.bind(o(o(i)));return window.addEventListener("click",r),i.on("dispose",function(){window.removeEventListener("click",r)}),i}i(t,e);var n=t.prototype;return n.createEl=function(){for(var t,n=arguments.length,i=new Array(n),o=0;o\n \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 '})},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-1&&(c.prototype.options_.children=[{name:"ControlSeparator",className:"top",children:[]},{name:"ControlSeparator",className:"middle",children:n.splice(0,i+1)},{name:"ControlSeparator",className:"bottom",children:n}]),t}),e.hook("setup",function(e){var t=!1!==e.options_.mobileView;(function(e){return window.matchMedia?window.matchMedia("(max-width: "+e+"px)").matches:window.innerWidth<=e})(480)&&t&&(e.controlBar.hide(),e.one("playing",function(){var t=["mouseover","userinactive","touchstart"];e.one(t,function n(){e.off(t,n),e.controlBar.show()}),e.one("touchend",function(){e.userActive(!0)})}),e.addClass("vjs-mobile-view"))});var h=e.getComponent("SeekBar");h.prototype.getPercent=function(){var e=this.player_.currentTime(),t=e/this.player_.duration();return t>=1?1:t},h.prototype.handleMouseMove=function(t){var n=this.player_;if(e.dom.isSingleLeftClick(t)){var i=this.calculateDistance(t)*n.duration();i===n.duration()&&(i-=.1),n.currentTime(i),this.update()}},e.getComponent("ControlBar").prototype.options_.children=["PlayToggle","CustomControlSpacer","VolumePanel","CurrentTimeDisplay","TimeDivider","DurationDisplay","ProgressControl","CustomControlSpacer","SettingMenuButton","FullscreenToggle"],e.hook("setup",function(e){e.on("mouseleave",function(){e.userActive(!1)}),e.ready(function(){e.controls(!1!==e.options_.controls)})});var d=function(t){function n(e,n){var i;return i=t.call(this,e,n)||this,i.title_=n.playerOptions.title||"",i.update(i.title_),i}i(n,t);var o=n.prototype;return o.createEl=function(){var n=t.prototype.createEl.call(this,"div",{className:"vjs-title"});return this.contentEl_=e.dom.createEl("div",{className:"vjs-title-field"}),n.appendChild(this.contentEl_),n},o.update=function(e){e?this.show():this.hide(),this.player_.cache_.title=this.title_,this.title_=e,this.contentEl_.innerHTML=e},n}(e.getComponent("Component")),v=function(e){var t=this.player_.getChild("VideoTitle");if(void 0===e)return t.title_;t.update(e)};e.registerPlugin("title",v),e.registerComponent("VideoTitle",d),e.getComponent("Player").prototype.options_.children.splice(2,0,"VideoTitle");var m=e.getComponent("PlayToggle"),f=e.getComponent("ClickableComponent"),C=function(t){function n(e,n){return t.call(this,e,n)||this}i(n,t);var o=n.prototype;return o.createEl=function(){return e.dom.createEl("div",{className:"vjs-play-toggle-layer"})},o.handleClick=function(e){(this.player_.userActive()||this.player_.paused())&&m.prototype.handleClick.call(this,e)},n}(f);e.registerComponent("PlayToggleLayer",C);var y=e.getComponent("Player").prototype.options_.children,g=y.indexOf("loadingSpinner");y.splice(g,0,"PlayToggleLayer");var b=e.getComponent("MenuItem"),_=function(e){function t(t,i){var o;return o=e.call(this,t,n({},i,{selectable:!0}))||this,o.addClass("vjs-context-menu-item"),o.controlText(i.label),o}i(t,e);var o=t.prototype;return o.createEl=function(){for(var t,n=arguments.length,i=new Array(n),o=0;o'),r},o.handleClick=function(){this.player_.findChild("ContextMenu")[0].component.hide()},t}(b);e.registerComponent("ContextMenuItem",_);var j=function(e){function t(t){var n;return n=e.call(this,t,{name:"ContextMenuToggleLoop",label:"Loop",icon:"vjs-icon-loop"})||this,n.addClass("vjs-checkbox"),t.on("loadstart",n.update.bind(o(o(n)))),n}i(t,e);var n=t.prototype;return n.update=function(){this.selected(this.player_.loop())},n.handleClick=function(){e.prototype.handleClick.call(this),this.player_.loop(!this.player_.loop()),this.update()},t}(_);e.registerComponent("ContextMenuToggleLoop",j);var S=function(e){function t(t){return e.call(this,t,{name:"AboutThisPlayer",label:"About This Player",icon:"vjs-icon-github"})||this}return i(t,e),t.prototype.handleClick=function(){e.prototype.handleClick.call(this),window.open("https://github.com/Pong420/videojs-plus","_blank")},t}(_);e.registerComponent("AboutThisPlayer",S);var w=e.getComponent("ClickableComponent"),E=function(e){function t(){return e.apply(this,arguments)||this}i(t,e);var n=t.prototype;return n.buildCSSClass=function(){return"vjs-close-menu-layer vjs-close-context-menu"},n.handleClick=function(){this.options_.menu.hide()},t}(w);e.registerComponent("CloseContextMenu",E);var k=e.getComponent("Menu"),M=function(e){function t(t,n){var i;i=e.call(this,t,n)||this,i.addClass("vjs-context-menu"),i.hide(),i.player_.on("contextmenu",i.onContextmenu.bind(o(o(i))));var r=i.handleClick.bind(o(o(i)));return window.addEventListener("click",r),i.on("dispose",function(){window.removeEventListener("click",r)}),i}i(t,e);var n=t.prototype;return n.createEl=function(){for(var t,n=arguments.length,i=new Array(n),o=0;o\n '+this.localize(t.label)+'
\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 \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 += `
-
- `;
+ `;
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 @@
-#### 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.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