New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
mediaelement-plugins
Advanced tools
mediaelement-plugins - npm Package Compare versions
Comparing version 2.6.7 to 3.0.0
| # Version History | ||
| ## *3.0.0 (2024/03/06)* | ||
| ### QUALITY PLUGIN | ||
| #### New Feature: Inline SVG icons for quality button | ||
| * Using `iconPath`: By setting the `iconPath` option, you can specify the path to your SVG icon. Once set, an inline SVG icon will be dynamically generated and displayed on the quality button. Further information can be found [here](docs/quality.md). | ||
| * Default Behavior: If you choose not to utilize the `iconPath` option, the quality button will continue to operate as before, displaying the default quality value as its text. | ||
| ### A11Y PLUGIN | ||
| #### New Feature: Inline SVG icons for audio and video description buttons | ||
| * Setting `iconSpritePath`: This option enables you to define the path to your SVG icon sprite. When specified, it allows for dynamic generation of inline SVG icons, which will be displayed on the audio and/or video description buttons. Further information can be found [here](docs/a11y.md). | ||
| * Important CSS Adjustment: If you're planning to use `iconSpritePath` and your current setup includes background icons defined in CSS, you'll need to make a small but crucial update to your CSS file. Please remove any CSS rules that apply background icons to these buttons. This step is necessary to prevent the display of both SVG and background icons simultaneously. | ||
| ## *2.6.7 (2023/08/02)* | ||
@@ -4,0 +15,0 @@ ### QUALITY PLUGIN |
@@ -34,3 +34,5 @@ /*! | ||
| audioDescriptionCanPlay: false | ||
| audioDescriptionCanPlay: false, | ||
| iconSpritePath: 'mejs-a11y-icons.svg' | ||
| }); | ||
@@ -71,9 +73,12 @@ | ||
| }, | ||
| _generateIconHtml: function _generateIconHtml(id, classPrefix, iconSpritePath, iconId) { | ||
| return '<svg xmlns="http://www.w3.org/2000/svg" id="' + id + '" class="' + classPrefix + iconId + '" aria-hidden="true" focusable="false">\n <use xlink:href="' + iconSpritePath + '#' + iconId + '"></use></svg>'; | ||
| }, | ||
| _createAudioDescription: function _createAudioDescription() { | ||
| var t = this; | ||
| var iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-audio'); | ||
| var audioDescriptionTitle = mejs.i18n.t('mejs.a11y-audio-description'); | ||
| var audioDescriptionButton = document.createElement('div'); | ||
| audioDescriptionButton.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'audio-description-button'; | ||
| audioDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + audioDescriptionTitle + '" aria-label="' + audioDescriptionTitle + '" tabindex="0"></button>'; | ||
| audioDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + audioDescriptionTitle + '" aria-label="' + audioDescriptionTitle + '" tabindex="0">' + iconHtml + '</button>'; | ||
@@ -91,6 +96,7 @@ t.addControlElement(audioDescriptionButton, 'audio-description'); | ||
| var t = this; | ||
| var iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-video'); | ||
| var videoDescriptionTitle = mejs.i18n.t('mejs.a11y-video-description'); | ||
| var videoDescriptionButton = document.createElement('div'); | ||
| videoDescriptionButton.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'video-description-button'; | ||
| videoDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + videoDescriptionTitle + '" aria-label="' + videoDescriptionTitle + '" tabindex="0"></button>'; | ||
| videoDescriptionButton.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + videoDescriptionTitle + '" aria-label="' + videoDescriptionTitle + '" tabindex="0">' + iconHtml + '</button>'; | ||
| t.addControlElement(videoDescriptionButton, 'video-description'); | ||
@@ -97,0 +103,0 @@ |
@@ -12,2 +12,2 @@ /*! | ||
| */ | ||
| !function r(s,d,a){function u(i,e){if(!d[i]){if(!s[i]){var o="function"==typeof require&&require;if(!e&&o)return o(i,!0);if(c)return c(i,!0);var t=new Error("Cannot find module '"+i+"'");throw t.code="MODULE_NOT_FOUND",t}var n=d[i]={exports:{}};s[i][0].call(n.exports,function(e){return u(s[i][1][e]||e)},n,n.exports,r,s,d,a)}return d[i].exports}for(var c="function"==typeof require&&require,e=0;e<a.length;e++)u(a[e]);return u}({1:[function(e,i,o){"use strict";mejs.i18n.en["mejs.a11y-audio-description"]="Toggle audio description",mejs.i18n.en["mejs.a11y-video-description"]="Toggle sign language",Object.assign(mejs.MepDefaults,{videoDescriptionToggled:!1,audioDescriptionToggled:!1,defaultSource:null,audioDescriptionSource:null,videoDescriptionSource:null,isPlaying:!1,isVoiceover:!1,audioDescriptionCanPlay:!1}),Object.assign(MediaElementPlayer.prototype,{builda11y:function(){var e=this;e.options.defaultSource={src:e.node.src,type:e.node.type},e.options.isVoiceover=e._loadBooleanFromAttribute("data-audio-description-voiceover"),e.options.audioDescriptionSource=e._loadSourceFromAttribute("data-audio-description"),e.options.videoDescriptionSource=e._loadSourceFromAttribute("data-video-description"),e.options.audioDescriptionSource&&e._createAudioDescription(),e.options.videoDescriptionSource&&e._createVideoDescription(),e.media.addEventListener("play",function(){return e.options.isPlaying=!0}),e.media.addEventListener("playing",function(){return e.options.isPlaying=!0}),e.media.addEventListener("pause",function(){return e.options.isPlaying=!1}),e.media.addEventListener("ended",function(){return e.options.isPlaying=!1})},_getFirstChildNodeByClassName:function(e,i){return[].concat(function(e){if(Array.isArray(e)){for(var i=0,o=Array(e.length);i<e.length;i++)o[i]=e[i];return o}return Array.from(e)}(e.childNodes)).find(function(e){return-1<e.className.indexOf(i)})},_createAudioDescription:function(){var e=this,i=mejs.i18n.t("mejs.a11y-audio-description"),o=document.createElement("div");o.className=e.options.classPrefix+"button "+e.options.classPrefix+"audio-description-button",o.innerHTML='<button type="button" aria-controls="'+e.id+'" title="'+i+'" aria-label="'+i+'" tabindex="0"></button>',e.addControlElement(o,"audio-description"),o.addEventListener("click",function(){e.options.audioDescriptionToggled=!e.options.audioDescriptionToggled,mejs.Utils.toggleClass(o,"audio-description-on"),e._toggleAudioDescription()})},_createVideoDescription:function(){var e=this,i=mejs.i18n.t("mejs.a11y-video-description"),o=document.createElement("div");o.className=e.options.classPrefix+"button "+e.options.classPrefix+"video-description-button",o.innerHTML='<button type="button" aria-controls="'+e.id+'" title="'+i+'" aria-label="'+i+'" tabindex="0"></button>',e.addControlElement(o,"video-description"),o.addEventListener("click",function(){e.options.videoDescriptionToggled=!e.options.videoDescriptionToggled,mejs.Utils.toggleClass(o,"video-description-on"),e._toggleVideoDescription()})},_loadSourceFromAttribute:function(i){if(!this.node.hasAttribute(i))return null;var e,o=void 0;try{var t=this.node.getAttribute(i);o=JSON.parse(t)}catch(e){console.error("error loading "+i+": "+e.message)}finally{e=o}return e?this._evaluateBestMatchingSource(e):null},_loadBooleanFromAttribute:function(e){if(!this.node.hasAttribute(e))return!1;var i=this.node.getAttribute(e);return"true"===i||""===i},_evaluateBestMatchingSource:function(e){var t=this,i=function(e){return o=e.type,i=mejs.Utils.getMimeFromType(o),t.node.canPlayType(i);var i,o},o=e.find(function(e){return"probably"===i(e)});if(o)return o;var n=e.find(function(e){return"maybe"===i(e)});return n||null},_createAudioDescriptionPlayer:function(){var o=this,e=document.createElement("audio");if(e.setAttribute("preload","auto"),e.classList.add(o.options.classPrefix+"audio-description-player"),e.setAttribute("src",o.options.audioDescriptionSource.src),e.setAttribute("type",o.options.audioDescriptionSource.type),e.load(),document.body.appendChild(e),o.audioDescription=new mejs.MediaElementPlayer(e,{features:["volume"],audioVolume:o.options.videoVolume,startVolume:o.node.volume,pauseOtherPlayers:!1,iconSprite:o.options.iconSprite,fakeNodeName:o.options.fakeNodeName||"mediaelementwrapper"}),o.audioDescription.node.addEventListener("canplay",function(){return o.options.audioDescriptionCanPlay=!0}),o.media.addEventListener("play",function(){return o.audioDescription.node.play().catch(function(e){return console.error(e)})}),o.media.addEventListener("playing",function(){return o.audioDescription.node.play().catch(function(e){return console.error(e)})}),o.media.addEventListener("pause",function(){return o.audioDescription.node.pause()}),o.media.addEventListener("waiting",function(){return o.audioDescription.node.pause()}),o.media.addEventListener("ended",function(){return o.audioDescription.node.pause()}),o.media.addEventListener("timeupdate",function(){var e=.35<Math.abs(o.currentTime-o.audioDescription.node.currentTime),i=o.options.audioDescriptionCanPlay;e&&i&&(o.audioDescription.node.currentTime=o.currentTime)}),o.options.isVoiceover)o.media.addEventListener("volumechange",function(){return o.audioDescription.node.volume=o.node.volume});else{var i=o.options.classPrefix+"volume-button",t=o._getFirstChildNodeByClassName(o.controls,i);if(o.videoVolumeButton=t){var n=o._getFirstChildNodeByClassName(o.audioDescription.controls,i);t.classList.add("hidden"),o.controls.insertBefore(n,t.nextSibling),o.descriptiveVolumeButton=n}}},_toggleAudioDescription:function(){var e=this;e.audioDescription||e._createAudioDescriptionPlayer(),e.options.audioDescriptionToggled?(e.audioDescription.node.volume=e.volume,e.options.isPlaying&&e.audioDescription&&(e.audioDescription.node.muted=!1,e.audioDescription.node.play().catch(function(e){return console.error(e)})),e.options.isVoiceover||(e.muted=!0,e.audioDescription.node.muted=!1),!e.options.isVoiceover&&e.videoVolumeButton&&e.descriptiveVolumeButton&&(mejs.Utils.addClass(e.videoVolumeButton,"hidden"),mejs.Utils.removeClass(e.descriptiveVolumeButton,"hidden"))):(e.volume=e.audioDescription.node.volume,e.audioDescription.node.pause(),e.audioDescription.node.muted=!0,e.options.isVoiceover||(e.muted=!1,e.audioDescription.node.muted=!0),!e.options.isVoiceover&&e.videoVolumeButton&&e.descriptiveVolumeButton&&(mejs.Utils.removeClass(e.videoVolumeButton,"hidden"),mejs.Utils.addClass(e.descriptiveVolumeButton,"hidden")))},_toggleVideoDescription:function(){var e=this,i=e.node.currentTime,o=e.options.isPlaying,t=e.options.videoDescriptionToggled;e.node.pause(),e.node.src=t?e.options.videoDescriptionSource.src:e.options.defaultSource.src,e.node.type=t?e.options.videoDescriptionSource.type:e.options.defaultSource.type,e.node.load(),o?e.node.play().then(function(){return e.node.currentTime=i}).catch(function(e){return console.error(e)}):e.node.setCurrentTime(i)}})},{}]},{},[1]); | ||
| !function r(s,a,d){function u(i,e){if(!a[i]){if(!s[i]){var o="function"==typeof require&&require;if(!e&&o)return o(i,!0);if(c)return c(i,!0);var t=new Error("Cannot find module '"+i+"'");throw t.code="MODULE_NOT_FOUND",t}var n=a[i]={exports:{}};s[i][0].call(n.exports,function(e){return u(s[i][1][e]||e)},n,n.exports,r,s,a,d)}return a[i].exports}for(var c="function"==typeof require&&require,e=0;e<d.length;e++)u(d[e]);return u}({1:[function(e,i,o){"use strict";mejs.i18n.en["mejs.a11y-audio-description"]="Toggle audio description",mejs.i18n.en["mejs.a11y-video-description"]="Toggle sign language",Object.assign(mejs.MepDefaults,{videoDescriptionToggled:!1,audioDescriptionToggled:!1,defaultSource:null,audioDescriptionSource:null,videoDescriptionSource:null,isPlaying:!1,isVoiceover:!1,audioDescriptionCanPlay:!1,iconSpritePath:"mejs-a11y-icons.svg"}),Object.assign(MediaElementPlayer.prototype,{builda11y:function(){var e=this;e.options.defaultSource={src:e.node.src,type:e.node.type},e.options.isVoiceover=e._loadBooleanFromAttribute("data-audio-description-voiceover"),e.options.audioDescriptionSource=e._loadSourceFromAttribute("data-audio-description"),e.options.videoDescriptionSource=e._loadSourceFromAttribute("data-video-description"),e.options.audioDescriptionSource&&e._createAudioDescription(),e.options.videoDescriptionSource&&e._createVideoDescription(),e.media.addEventListener("play",function(){return e.options.isPlaying=!0}),e.media.addEventListener("playing",function(){return e.options.isPlaying=!0}),e.media.addEventListener("pause",function(){return e.options.isPlaying=!1}),e.media.addEventListener("ended",function(){return e.options.isPlaying=!1})},_getFirstChildNodeByClassName:function(e,i){return[].concat(function(e){if(Array.isArray(e)){for(var i=0,o=Array(e.length);i<e.length;i++)o[i]=e[i];return o}return Array.from(e)}(e.childNodes)).find(function(e){return-1<e.className.indexOf(i)})},_generateIconHtml:function(e,i,o,t){return'<svg xmlns="http://www.w3.org/2000/svg" id="'+e+'" class="'+i+t+'" aria-hidden="true" focusable="false">\n <use xlink:href="'+o+"#"+t+'"></use></svg>'},_createAudioDescription:function(){var e=this,i=e._generateIconHtml(e.id,e.options.classPrefix,e.options.iconSpritePath,"icon-audio"),o=mejs.i18n.t("mejs.a11y-audio-description"),t=document.createElement("div");t.className=e.options.classPrefix+"button "+e.options.classPrefix+"audio-description-button",t.innerHTML='<button type="button" aria-controls="'+e.id+'" title="'+o+'" aria-label="'+o+'" tabindex="0">'+i+"</button>",e.addControlElement(t,"audio-description"),t.addEventListener("click",function(){e.options.audioDescriptionToggled=!e.options.audioDescriptionToggled,mejs.Utils.toggleClass(t,"audio-description-on"),e._toggleAudioDescription()})},_createVideoDescription:function(){var e=this,i=e._generateIconHtml(e.id,e.options.classPrefix,e.options.iconSpritePath,"icon-video"),o=mejs.i18n.t("mejs.a11y-video-description"),t=document.createElement("div");t.className=e.options.classPrefix+"button "+e.options.classPrefix+"video-description-button",t.innerHTML='<button type="button" aria-controls="'+e.id+'" title="'+o+'" aria-label="'+o+'" tabindex="0">'+i+"</button>",e.addControlElement(t,"video-description"),t.addEventListener("click",function(){e.options.videoDescriptionToggled=!e.options.videoDescriptionToggled,mejs.Utils.toggleClass(t,"video-description-on"),e._toggleVideoDescription()})},_loadSourceFromAttribute:function(i){if(!this.node.hasAttribute(i))return null;var e,o=void 0;try{var t=this.node.getAttribute(i);o=JSON.parse(t)}catch(e){console.error("error loading "+i+": "+e.message)}finally{e=o}return e?this._evaluateBestMatchingSource(e):null},_loadBooleanFromAttribute:function(e){if(!this.node.hasAttribute(e))return!1;var i=this.node.getAttribute(e);return"true"===i||""===i},_evaluateBestMatchingSource:function(e){var t=this,i=function(e){return o=e.type,i=mejs.Utils.getMimeFromType(o),t.node.canPlayType(i);var i,o},o=e.find(function(e){return"probably"===i(e)});if(o)return o;var n=e.find(function(e){return"maybe"===i(e)});return n||null},_createAudioDescriptionPlayer:function(){var o=this,e=document.createElement("audio");if(e.setAttribute("preload","auto"),e.classList.add(o.options.classPrefix+"audio-description-player"),e.setAttribute("src",o.options.audioDescriptionSource.src),e.setAttribute("type",o.options.audioDescriptionSource.type),e.load(),document.body.appendChild(e),o.audioDescription=new mejs.MediaElementPlayer(e,{features:["volume"],audioVolume:o.options.videoVolume,startVolume:o.node.volume,pauseOtherPlayers:!1,iconSprite:o.options.iconSprite,fakeNodeName:o.options.fakeNodeName||"mediaelementwrapper"}),o.audioDescription.node.addEventListener("canplay",function(){return o.options.audioDescriptionCanPlay=!0}),o.media.addEventListener("play",function(){return o.audioDescription.node.play().catch(function(e){return console.error(e)})}),o.media.addEventListener("playing",function(){return o.audioDescription.node.play().catch(function(e){return console.error(e)})}),o.media.addEventListener("pause",function(){return o.audioDescription.node.pause()}),o.media.addEventListener("waiting",function(){return o.audioDescription.node.pause()}),o.media.addEventListener("ended",function(){return o.audioDescription.node.pause()}),o.media.addEventListener("timeupdate",function(){var e=.35<Math.abs(o.currentTime-o.audioDescription.node.currentTime),i=o.options.audioDescriptionCanPlay;e&&i&&(o.audioDescription.node.currentTime=o.currentTime)}),o.options.isVoiceover)o.media.addEventListener("volumechange",function(){return o.audioDescription.node.volume=o.node.volume});else{var i=o.options.classPrefix+"volume-button",t=o._getFirstChildNodeByClassName(o.controls,i);if(o.videoVolumeButton=t){var n=o._getFirstChildNodeByClassName(o.audioDescription.controls,i);t.classList.add("hidden"),o.controls.insertBefore(n,t.nextSibling),o.descriptiveVolumeButton=n}}},_toggleAudioDescription:function(){var e=this;e.audioDescription||e._createAudioDescriptionPlayer(),e.options.audioDescriptionToggled?(e.audioDescription.node.volume=e.volume,e.options.isPlaying&&e.audioDescription&&(e.audioDescription.node.muted=!1,e.audioDescription.node.play().catch(function(e){return console.error(e)})),e.options.isVoiceover||(e.muted=!0,e.audioDescription.node.muted=!1),!e.options.isVoiceover&&e.videoVolumeButton&&e.descriptiveVolumeButton&&(mejs.Utils.addClass(e.videoVolumeButton,"hidden"),mejs.Utils.removeClass(e.descriptiveVolumeButton,"hidden"))):(e.volume=e.audioDescription.node.volume,e.audioDescription.node.pause(),e.audioDescription.node.muted=!0,e.options.isVoiceover||(e.muted=!1,e.audioDescription.node.muted=!0),!e.options.isVoiceover&&e.videoVolumeButton&&e.descriptiveVolumeButton&&(mejs.Utils.removeClass(e.videoVolumeButton,"hidden"),mejs.Utils.addClass(e.descriptiveVolumeButton,"hidden")))},_toggleVideoDescription:function(){var e=this,i=e.node.currentTime,o=e.options.isPlaying,t=e.options.videoDescriptionToggled;e.node.pause(),e.node.src=t?e.options.videoDescriptionSource.src:e.options.defaultSource.src,e.node.type=t?e.options.videoDescriptionSource.type:e.options.defaultSource.type,e.node.load(),o?e.node.play().then(function(){return e.node.currentTime=i}).catch(function(e){return console.error(e)}):e.node.setCurrentTime(i)}})},{}]},{},[1]); |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -27,3 +27,5 @@ /*! | ||
| qualityChangeCallback: null | ||
| qualityChangeCallback: null, | ||
| iconPath: 'mejs-quality.svg' | ||
| }); | ||
@@ -124,5 +126,6 @@ | ||
| var generateId = Math.floor(Math.random() * 100); | ||
| var iconHtml = '<svg xmlns="http://www.w3.org/2000/svg" id="' + generateId + '" class="' + t.options.classPrefix + '" aria-hidden="true" focusable="false">\n\t\t\t<use xlink:href="' + t.options.iconPath + '#default-icon"></use></svg>'; | ||
| player.qualitiesContainer = document.createElement('div'); | ||
| player.qualitiesContainer.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'qualities-button'; | ||
| player.qualitiesContainer.innerHTML = '<button type="button" title="' + qualityTitle + '" aria-label="' + qualityTitle + '" aria-controls="qualitieslist-' + generateId + '" aria-expanded="false">' + defaultValue + '</button>' + ('<div class="' + t.options.classPrefix + 'qualities-selector ' + t.options.classPrefix + 'offscreen">') + ('<ul class="' + t.options.classPrefix + 'qualities-selector-list" id="qualitieslist-' + generateId + '" tabindex="-1"></ul></div>'); | ||
| player.qualitiesContainer.innerHTML = '<button type="button" title="' + qualityTitle + '" aria-label="' + qualityTitle + '" aria-controls="qualitieslist-' + generateId + '" aria-expanded="false">\n\t\t' + (t.options.iconPath ? iconHtml : defaultValue) + '</button>' + ('<div class="' + t.options.classPrefix + 'qualities-selector ' + t.options.classPrefix + 'offscreen">') + ('<ul class="' + t.options.classPrefix + 'qualities-selector-list" id="qualitieslist-' + generateId + '" tabindex="-1"></ul></div>'); | ||
@@ -129,0 +132,0 @@ t.addControlElement(player.qualitiesContainer, 'qualities'); |
@@ -12,2 +12,2 @@ /*! | ||
| */ | ||
| !function s(l,o,r){function u(t,e){if(!o[t]){if(!l[t]){var i="function"==typeof require&&require;if(!e&&i)return i(t,!0);if(c)return c(t,!0);var a=new Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}var n=o[t]={exports:{}};l[t][0].call(n.exports,function(e){return u(l[t][1][e]||e)},n,n.exports,s,l,o,r)}return o[t].exports}for(var c="function"==typeof require&&require,e=0;e<r.length;e++)u(r[e]);return u}({1:[function(e,t,i){"use strict";mejs.i18n.en["mejs.quality-chooser"]="Quality Chooser",Object.assign(mejs.MepDefaults,{defaultQuality:"auto",qualityText:null,autoGenerate:!1,autoDash:!1,autoHLS:!1,qualityChangeCallback:null}),Object.assign(MediaElementPlayer.prototype,{buildquality:function(i,e,t,a){for(var n=this,s=n.mediaFiles?n.mediaFiles:n.node.children,l=new Map,o=0,r=s.length;o<r;o++){var u=s[o],c=u instanceof HTMLElement?u.getAttribute("data-quality"):u["data-quality"];if("undefined"===c&&(c="Auto",n.options.autoGenerate=!0),n.mediaFiles){var d=document.createElement("source");d.src=u.src,d.type=u.type,n.addValueToKey(l,c,d)}else"SOURCE"===u.nodeName&&n.addValueToKey(l,c,u)}if(!(l.size<=1)){var f=0;a.addEventListener("error",function(e){if("No renderer found"===e.message&&l.get("").length>f+1){f+=1;var t=l.get("")[f].src;a.setSrc(t),a.load()}}),a.addEventListener("loadedmetadata",function(){if(a.hlsPlayer){var e=a.hlsPlayer.levels;n.options.autoGenerate&&1<e.length&&(e.forEach(function(e){var t=e.height,i=n.getQualityFromHeight(t);n.addValueToKey(l,i,"")}),n.options.autoHLS=!0,n.generateQualityButton(n,i,a,l,""))}else if(a.dashPlayer){var t=a.dashPlayer.getBitrateInfoListFor("video");n.options.autoGenerate&&1<t.length&&(t.forEach(function(e){var t=e.height,i=n.getQualityFromHeight(t);n.addValueToKey(l,i,"")}),n.options.autoDash=!0,n.generateQualityButton(n,i,a,l,""))}}),n.generateQualityButton(n,i,a,l,"")}},generateQualityButton:function(s,l,i,a,n){s.cleanquality(l);var e=mejs.Utils.isString(s.options.qualityText)?s.options.qualityText:mejs.i18n.t("mejs.quality-chooser"),o=function(e){var t=void 0;t="auto"===e?s.keyExist(a,e)?e:s.getMapIndex(a,0).key:e;return t}(s.options.defaultQuality);n=o;var t=Math.floor(100*Math.random());l.qualitiesContainer=document.createElement("div"),l.qualitiesContainer.className=s.options.classPrefix+"button "+s.options.classPrefix+"qualities-button",l.qualitiesContainer.innerHTML='<button type="button" title="'+e+'" aria-label="'+e+'" aria-controls="qualitieslist-'+t+'" aria-expanded="false">'+o+'</button><div class="'+s.options.classPrefix+"qualities-selector "+s.options.classPrefix+'offscreen"><ul class="'+s.options.classPrefix+'qualities-selector-list" id="qualitieslist-'+t+'" tabindex="-1"></ul></div>',s.addControlElement(l.qualitiesContainer,"qualities"),a.forEach(function(e,t){if("map_keys_1"!==t){var i=e[0],a=t,n=s.id+"-qualities-"+a;l.qualitiesContainer.querySelector("ul").innerHTML+='<li class="'+s.options.classPrefix+'qualities-selector-list-item"><input class="'+s.options.classPrefix+"qualities-selector-input "+(a===o?s.options.classPrefix+"qualities-selected-input":"")+'" type="radio" name="'+s.id+'_qualities" disabled="disabled" value="'+a+'" id="'+n+'" '+(a===o?' checked="checked"':"")+' /><label for="'+n+'" class="'+s.options.classPrefix+"qualities-selector-label "+(a===o?" "+s.options.classPrefix+"qualities-selected":"")+'">'+(i.title||a)+" </label></li>"}});var r=!0,u=l.qualitiesContainer,c=l.qualitiesContainer.querySelector("button"),d=l.qualitiesContainer.querySelector("."+s.options.classPrefix+"qualities-selector"),f=l.qualitiesContainer.querySelector("."+s.options.classPrefix+"qualities-selector-list"),p=l.qualitiesContainer.querySelectorAll('input[type="radio"]'),y=l.qualitiesContainer.querySelectorAll("."+s.options.classPrefix+"qualities-selector-label");function h(){mejs.Utils.addClass(d,s.options.classPrefix+"offscreen"),c.setAttribute("aria-expanded","false"),c.focus(),r=!0}function q(){mejs.Utils.removeClass(d,s.options.classPrefix+"offscreen"),d.style.height=d.querySelector("ul").offsetHeight+"px",d.style.top=-1*parseFloat(d.offsetHeight)+"px",c.setAttribute("aria-expanded","true"),d.querySelector("."+s.options.classPrefix+"qualities-selected-input").focus(),r=!1}c.addEventListener("click",function(){!0===r?q():h()}),f.addEventListener("focusout",function(e){u.contains(e.relatedTarget)||h()}),c.addEventListener("mouseenter",function(){q()}),u.addEventListener("mouseleave",function(){h()}),u.addEventListener("keydown",function(e){"Escape"===e.key&&h(),e.stopPropagation()});for(var v=0,m=p.length;v<m;v++){var g=p[v];g.disabled=!1,g.addEventListener("change",function(){if(s.options.autoDash)s.updateQualityButton(this,l,n),s.switchDashQuality(l,i);else if(s.options.autoHLS)s.updateQualityButton(this,l,n),s.switchHLSQuality(l,i);else{n=s.updateQualityButton(this,l,n);var t=i.currentTime,e=i.paused;e||i.pause(),s.updateVideoSource(i,a,n),i.setSrc(a.get(n)[0].src),i.load(),i.dispatchEvent(mejs.Utils.createEvent("seeking",i)),e||i.play(),i.addEventListener("canplay",function e(){i.setCurrentTime(t),i.removeEventListener("canplay",e)})}s.options.qualityChangeCallback&&s.options.qualityChangeCallback(i,i.originalNode,newQuality)})}for(var x=0,E=y.length;x<E;x++)y[x].addEventListener("click",function(){var e=mejs.Utils.siblings(this,function(e){return"INPUT"===e.tagName})[0],t=mejs.Utils.createEvent("click",e);e.dispatchEvent(t)})},cleanquality:function(e){e&&e.qualitiesContainer&&e.qualitiesContainer.remove()},addValueToKey:function(e,t,i){e.has("map_keys_1")?e.get("map_keys_1").push(t):e.set("map_keys_1",[]),e.has(t)||e.set(t,[]),e.get(t).push(i)},updateVideoSource:function(i,e,t){this.cleanMediaSource(i);for(var a=e.get(t),n=function(e){var t=i.children[e];"VIDEO"===t.tagName&&a.forEach(function(e){t.appendChild(e)})},s=0;s<i.children.length;s++)n(s)},cleanMediaSource:function(a){for(var e=function(e){var t=a.children[e];if("VIDEO"===t.tagName){var i=t.querySelectorAll("source");Array.from(i).forEach(function(e){t.removeChild(e)})}},t=0;t<a.children.length;t++)e(t)},getMapIndex:function(e,i){var a=-1,n={};return e.forEach(function(e,t){a===i&&(n.key=t,n.value=e),a++}),n},keyExist:function(e,t){return-1<e.get("map_keys_1").indexOf(t)},switchDashQuality:function(e,t){for(var i=e.qualitiesContainer.querySelectorAll('input[type="radio"]'),a=0;a<i.length;a++)i[a].checked&&(0===a?t.dashPlayer.setAutoSwitchQuality(!0):(t.dashPlayer.setAutoSwitchQuality(!1),t.dashPlayer.setQualityFor("video",a-1)))},switchHLSQuality:function(e,t){for(var i=e.qualitiesContainer.querySelectorAll('input[type="radio"]'),a=0;a<i.length;a++)i[a].checked&&(t.hlsPlayer.currentLevel=0===a?-1:a-1)},updateQualityButton:function(e,t){for(var i=this,a=e.value,n=t.qualitiesContainer.querySelectorAll("."+i.options.classPrefix+"qualities-selected"),s=0,l=n.length;s<l;s++)mejs.Utils.removeClass(n[s],i.options.classPrefix+"qualities-selected"),n[s].parentElement.querySelector("input").classList.remove(i.options.classPrefix+"qualities-selected-input");e.checked=!0;for(var o=mejs.Utils.siblings(e,function(e){return mejs.Utils.hasClass(e,i.options.classPrefix+"qualities-selector-label")}),r=0,u=o.length;r<u;r++)mejs.Utils.addClass(o[r],i.options.classPrefix+"qualities-selected"),o[r].parentElement.querySelector("input").classList.add(i.options.classPrefix+"qualities-selected-input");return t.qualitiesContainer.querySelector("button").innerHTML=a},getQualityFromHeight:function(e){return 4320<=e?"8K UHD":2160<=e?"UHD":1440<=e?"QHD":1080<=e?"FHD":720<=e?"HD":"SD"}})},{}]},{},[1]); | ||
| !function n(l,o,r){function u(t,e){if(!o[t]){if(!l[t]){var i="function"==typeof require&&require;if(!e&&i)return i(t,!0);if(c)return c(t,!0);var a=new Error("Cannot find module '"+t+"'");throw a.code="MODULE_NOT_FOUND",a}var s=o[t]={exports:{}};l[t][0].call(s.exports,function(e){return u(l[t][1][e]||e)},s,s.exports,n,l,o,r)}return o[t].exports}for(var c="function"==typeof require&&require,e=0;e<r.length;e++)u(r[e]);return u}({1:[function(e,t,i){"use strict";mejs.i18n.en["mejs.quality-chooser"]="Quality Chooser",Object.assign(mejs.MepDefaults,{defaultQuality:"auto",qualityText:null,autoGenerate:!1,autoDash:!1,autoHLS:!1,qualityChangeCallback:null,iconPath:"mejs-quality.svg"}),Object.assign(MediaElementPlayer.prototype,{buildquality:function(i,e,t,a){for(var s=this,n=s.mediaFiles?s.mediaFiles:s.node.children,l=new Map,o=0,r=n.length;o<r;o++){var u=n[o],c=u instanceof HTMLElement?u.getAttribute("data-quality"):u["data-quality"];if("undefined"===c&&(c="Auto",s.options.autoGenerate=!0),s.mediaFiles){var d=document.createElement("source");d.src=u.src,d.type=u.type,s.addValueToKey(l,c,d)}else"SOURCE"===u.nodeName&&s.addValueToKey(l,c,u)}if(!(l.size<=1)){var f=0;a.addEventListener("error",function(e){if("No renderer found"===e.message&&l.get("").length>f+1){f+=1;var t=l.get("")[f].src;a.setSrc(t),a.load()}}),a.addEventListener("loadedmetadata",function(){if(a.hlsPlayer){var e=a.hlsPlayer.levels;s.options.autoGenerate&&1<e.length&&(e.forEach(function(e){var t=e.height,i=s.getQualityFromHeight(t);s.addValueToKey(l,i,"")}),s.options.autoHLS=!0,s.generateQualityButton(s,i,a,l,""))}else if(a.dashPlayer){var t=a.dashPlayer.getBitrateInfoListFor("video");s.options.autoGenerate&&1<t.length&&(t.forEach(function(e){var t=e.height,i=s.getQualityFromHeight(t);s.addValueToKey(l,i,"")}),s.options.autoDash=!0,s.generateQualityButton(s,i,a,l,""))}}),s.generateQualityButton(s,i,a,l,"")}},generateQualityButton:function(n,l,i,a,s){n.cleanquality(l);var e=mejs.Utils.isString(n.options.qualityText)?n.options.qualityText:mejs.i18n.t("mejs.quality-chooser"),o=function(e){var t=void 0;t="auto"===e?n.keyExist(a,e)?e:n.getMapIndex(a,0).key:e;return t}(n.options.defaultQuality);s=o;var t=Math.floor(100*Math.random()),r='<svg xmlns="http://www.w3.org/2000/svg" id="'+t+'" class="'+n.options.classPrefix+'" aria-hidden="true" focusable="false">\n\t\t\t<use xlink:href="'+n.options.iconPath+'#default-icon"></use></svg>';l.qualitiesContainer=document.createElement("div"),l.qualitiesContainer.className=n.options.classPrefix+"button "+n.options.classPrefix+"qualities-button",l.qualitiesContainer.innerHTML='<button type="button" title="'+e+'" aria-label="'+e+'" aria-controls="qualitieslist-'+t+'" aria-expanded="false">\n\t\t'+(n.options.iconPath?r:o)+'</button><div class="'+n.options.classPrefix+"qualities-selector "+n.options.classPrefix+'offscreen"><ul class="'+n.options.classPrefix+'qualities-selector-list" id="qualitieslist-'+t+'" tabindex="-1"></ul></div>',n.addControlElement(l.qualitiesContainer,"qualities"),a.forEach(function(e,t){if("map_keys_1"!==t){var i=e[0],a=t,s=n.id+"-qualities-"+a;l.qualitiesContainer.querySelector("ul").innerHTML+='<li class="'+n.options.classPrefix+'qualities-selector-list-item"><input class="'+n.options.classPrefix+"qualities-selector-input "+(a===o?n.options.classPrefix+"qualities-selected-input":"")+'" type="radio" name="'+n.id+'_qualities" disabled="disabled" value="'+a+'" id="'+s+'" '+(a===o?' checked="checked"':"")+' /><label for="'+s+'" class="'+n.options.classPrefix+"qualities-selector-label "+(a===o?" "+n.options.classPrefix+"qualities-selected":"")+'">'+(i.title||a)+" </label></li>"}});var u=!0,c=l.qualitiesContainer,d=l.qualitiesContainer.querySelector("button"),f=l.qualitiesContainer.querySelector("."+n.options.classPrefix+"qualities-selector"),p=l.qualitiesContainer.querySelector("."+n.options.classPrefix+"qualities-selector-list"),y=l.qualitiesContainer.querySelectorAll('input[type="radio"]'),h=l.qualitiesContainer.querySelectorAll("."+n.options.classPrefix+"qualities-selector-label");function q(){mejs.Utils.addClass(f,n.options.classPrefix+"offscreen"),d.setAttribute("aria-expanded","false"),d.focus(),u=!0}function v(){mejs.Utils.removeClass(f,n.options.classPrefix+"offscreen"),f.style.height=f.querySelector("ul").offsetHeight+"px",f.style.top=-1*parseFloat(f.offsetHeight)+"px",d.setAttribute("aria-expanded","true"),f.querySelector("."+n.options.classPrefix+"qualities-selected-input").focus(),u=!1}d.addEventListener("click",function(){!0===u?v():q()}),p.addEventListener("focusout",function(e){c.contains(e.relatedTarget)||q()}),d.addEventListener("mouseenter",function(){v()}),c.addEventListener("mouseleave",function(){q()}),c.addEventListener("keydown",function(e){"Escape"===e.key&&q(),e.stopPropagation()});for(var g=0,m=y.length;g<m;g++){var x=y[g];x.disabled=!1,x.addEventListener("change",function(){if(n.options.autoDash)n.updateQualityButton(this,l,s),n.switchDashQuality(l,i);else if(n.options.autoHLS)n.updateQualityButton(this,l,s),n.switchHLSQuality(l,i);else{s=n.updateQualityButton(this,l,s);var t=i.currentTime,e=i.paused;e||i.pause(),n.updateVideoSource(i,a,s),i.setSrc(a.get(s)[0].src),i.load(),i.dispatchEvent(mejs.Utils.createEvent("seeking",i)),e||i.play(),i.addEventListener("canplay",function e(){i.setCurrentTime(t),i.removeEventListener("canplay",e)})}n.options.qualityChangeCallback&&n.options.qualityChangeCallback(i,i.originalNode,newQuality)})}for(var P=0,E=h.length;P<E;P++)h[P].addEventListener("click",function(){var e=mejs.Utils.siblings(this,function(e){return"INPUT"===e.tagName})[0],t=mejs.Utils.createEvent("click",e);e.dispatchEvent(t)})},cleanquality:function(e){e&&e.qualitiesContainer&&e.qualitiesContainer.remove()},addValueToKey:function(e,t,i){e.has("map_keys_1")?e.get("map_keys_1").push(t):e.set("map_keys_1",[]),e.has(t)||e.set(t,[]),e.get(t).push(i)},updateVideoSource:function(i,e,t){this.cleanMediaSource(i);for(var a=e.get(t),s=function(e){var t=i.children[e];"VIDEO"===t.tagName&&a.forEach(function(e){t.appendChild(e)})},n=0;n<i.children.length;n++)s(n)},cleanMediaSource:function(a){for(var e=function(e){var t=a.children[e];if("VIDEO"===t.tagName){var i=t.querySelectorAll("source");Array.from(i).forEach(function(e){t.removeChild(e)})}},t=0;t<a.children.length;t++)e(t)},getMapIndex:function(e,i){var a=-1,s={};return e.forEach(function(e,t){a===i&&(s.key=t,s.value=e),a++}),s},keyExist:function(e,t){return-1<e.get("map_keys_1").indexOf(t)},switchDashQuality:function(e,t){for(var i=e.qualitiesContainer.querySelectorAll('input[type="radio"]'),a=0;a<i.length;a++)i[a].checked&&(0===a?t.dashPlayer.setAutoSwitchQuality(!0):(t.dashPlayer.setAutoSwitchQuality(!1),t.dashPlayer.setQualityFor("video",a-1)))},switchHLSQuality:function(e,t){for(var i=e.qualitiesContainer.querySelectorAll('input[type="radio"]'),a=0;a<i.length;a++)i[a].checked&&(t.hlsPlayer.currentLevel=0===a?-1:a-1)},updateQualityButton:function(e,t){for(var i=this,a=e.value,s=t.qualitiesContainer.querySelectorAll("."+i.options.classPrefix+"qualities-selected"),n=0,l=s.length;n<l;n++)mejs.Utils.removeClass(s[n],i.options.classPrefix+"qualities-selected"),s[n].parentElement.querySelector("input").classList.remove(i.options.classPrefix+"qualities-selected-input");e.checked=!0;for(var o=mejs.Utils.siblings(e,function(e){return mejs.Utils.hasClass(e,i.options.classPrefix+"qualities-selector-label")}),r=0,u=o.length;r<u;r++)mejs.Utils.addClass(o[r],i.options.classPrefix+"qualities-selected"),o[r].parentElement.querySelector("input").classList.add(i.options.classPrefix+"qualities-selected-input");return t.qualitiesContainer.querySelector("button").innerHTML=a},getQualityFromHeight:function(e){return 4320<=e?"8K UHD":2160<=e?"UHD":1440<=e?"QHD":1080<=e?"FHD":720<=e?"HD":"SD"}})},{}]},{},[1]); |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -0,0 +0,0 @@ /*! |
@@ -17,2 +17,3 @@ # Accessibility | ||
| `data-audio-description-voiceover` | boolean | false | If set as data attribute only or with value `true` audio description will be started in voice-over mode. | ||
| `iconSpritePath` | string | `mejs-a11y-icons.svg` | Path for the SVG icon sprite file. | ||
@@ -19,0 +20,0 @@ #### Audio-description node |
@@ -19,2 +19,3 @@ # Quality | ||
| qualityText | string | `null` | Title for Quality button for WARIA purposes | ||
| qualityChangeCallback | callback | | Action that will be executed as soon as the user change video quality; passes 3 arguments: media (the wrapper that mimics all the native events/properties/methods for all renderers), node (the original HTML video, audio or iframe tag where the media was loaded originally and string newQuality | ||
| qualityChangeCallback | callback | | Action that will be executed as soon as the user change video quality; passes 3 arguments: media (the wrapper that mimics all the native events/properties/methods for all renderers), node (the original HTML video, audio or iframe tag where the media was loaded originally and string newQuality | ||
| iconPath | string | `mejs-quality-icon.svg` | Path for the SVG icon file |
| { | ||
| "name": "mediaelement-plugins", | ||
| "version": "2.6.7", | ||
| "version": "3.0.0", | ||
| "repository": { | ||
@@ -5,0 +5,0 @@ "type": "git", |
@@ -54,2 +54,8 @@ 'use strict'; | ||
| audioDescriptionCanPlay: false, | ||
| /** | ||
| * The path where the icon sprite is located | ||
| * @type {String} | ||
| */ | ||
| iconSpritePath: 'mejs-a11y-icons.svg', | ||
| }); | ||
@@ -91,2 +97,16 @@ | ||
| /** | ||
| * Generates an HTML for an SVG icon. | ||
| * @private | ||
| * @param {String} id - ID of the MediaElement player | ||
| * @param {String} classPrefix - Prefix for the class attribute | ||
| * @param {String} iconSpritePath - Path to the SVG sprite containing icons | ||
| * @param {String} iconId - Specific ID of the icon within the SVG sprite | ||
| * @returns {String} The complete HTML string for the SVG element | ||
| */ | ||
| _generateIconHtml(id, classPrefix, iconSpritePath, iconId) { | ||
| return `<svg xmlns="http://www.w3.org/2000/svg" id="${id}" class="${classPrefix}${iconId}" aria-hidden="true" focusable="false"> | ||
| <use xlink:href="${iconSpritePath}#${iconId}"></use></svg>`; | ||
| }, | ||
| /** | ||
| * Create audio description button and bind events | ||
@@ -98,7 +118,7 @@ * @private | ||
| const t = this; | ||
| const iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-audio'); | ||
| const audioDescriptionTitle = mejs.i18n.t('mejs.a11y-audio-description'); | ||
| const audioDescriptionButton = document.createElement('div'); | ||
| audioDescriptionButton.className = `${t.options.classPrefix}button ${t.options.classPrefix}audio-description-button`; | ||
| audioDescriptionButton.innerHTML = `<button type="button" aria-controls="${t.id}" title="${audioDescriptionTitle}" aria-label="${audioDescriptionTitle}" tabindex="0"></button>`; | ||
| audioDescriptionButton.innerHTML = `<button type="button" aria-controls="${t.id}" title="${audioDescriptionTitle}" aria-label="${audioDescriptionTitle}" tabindex="0">${iconHtml}</button>`; | ||
@@ -122,6 +142,7 @@ t.addControlElement(audioDescriptionButton, 'audio-description'); | ||
| const t = this; | ||
| const iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-video'); | ||
| const videoDescriptionTitle = mejs.i18n.t('mejs.a11y-video-description'); | ||
| const videoDescriptionButton = document.createElement('div'); | ||
| videoDescriptionButton.className = `${t.options.classPrefix}button ${t.options.classPrefix}video-description-button`; | ||
| videoDescriptionButton.innerHTML = `<button type="button" aria-controls="${t.id}" title="${videoDescriptionTitle}" aria-label="${videoDescriptionTitle}" tabindex="0"></button>`; | ||
| videoDescriptionButton.innerHTML = `<button type="button" aria-controls="${t.id}" title="${videoDescriptionTitle}" aria-label="${videoDescriptionTitle}" tabindex="0">${iconHtml}</button>`; | ||
| t.addControlElement(videoDescriptionButton, 'video-description'); | ||
@@ -128,0 +149,0 @@ |
@@ -38,3 +38,8 @@ 'use strict'; | ||
| */ | ||
| qualityChangeCallback: null | ||
| qualityChangeCallback: null, | ||
| /** | ||
| * The path where the icon file is located | ||
| * @type {String} | ||
| */ | ||
| iconPath: 'mejs-quality.svg', | ||
| }); | ||
@@ -155,5 +160,8 @@ | ||
| const generateId = Math.floor(Math.random() * 100); | ||
| const iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" id="${generateId}" class="${t.options.classPrefix}" aria-hidden="true" focusable="false"> | ||
| <use xlink:href="${t.options.iconPath}#default-icon"></use></svg>`; | ||
| player.qualitiesContainer = document.createElement('div'); | ||
| player.qualitiesContainer.className = `${t.options.classPrefix}button ${t.options.classPrefix}qualities-button`; | ||
| player.qualitiesContainer.innerHTML = `<button type="button" title="${qualityTitle}" aria-label="${qualityTitle}" aria-controls="qualitieslist-${generateId}" aria-expanded="false">${defaultValue}</button>` + | ||
| player.qualitiesContainer.innerHTML = `<button type="button" title="${qualityTitle}" aria-label="${qualityTitle}" aria-controls="qualitieslist-${generateId}" aria-expanded="false"> | ||
| ${t.options.iconPath ? iconHtml : defaultValue}</button>` + | ||
| `<div class="${t.options.classPrefix}qualities-selector ${t.options.classPrefix}offscreen">` + | ||
@@ -160,0 +168,0 @@ `<ul class="${t.options.classPrefix}qualities-selector-list" id="qualitieslist-${generateId}" tabindex="-1"></ul></div>`; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.51%
758650
- Number of package files
- increased by0.82%
246
Worsened metrics
- Lines of code
- decreased by-0.06%
13186
No dependency changes