Report de js init du plugin player : le css est injecte en async dans un link...

Report de js init du plugin player : le css est injecte en async dans un link plutot que inline repete a chaque player

javascript/mejs-init.js

 var mejsloader;
 var mejsplugins={};
+var mejscss={};
 (function(){
 	var mejs_counter = 0;
 	function mejs_init(){
@@ -9,13 +10,26 @@ var mejsplugins={};
 				//console.log(this);
 				mejs_counter++;
 				var id = "mejs-" + (jQuery(this).attr('data-id')) + "-" + mejs_counter;
-				var autoplay = jQuery(this).attr('autoplay');
 				jQuery(this).attr('id',id);
-				var options = jQuery.parseJSON(jQuery(this).attr('data-mejsoptions'));
-				var plugins = jQuery.parseJSON(jQuery(this).attr('data-mejsplugins'));
+				var autoplay = jQuery(this).attr('autoplay');
+				var opt = {options:{},plugins:{},css:[]}, i,v;
+				for (i in opt){
+					if (v = jQuery(this).attr('data-mejs'+i)) opt[i] = jQuery.parseJSON(v);
+				}
 				function runthisplayer(){
 					var run = true;
-					for(var p in plugins){
+					//console.log(css);
+					for(var c in opt.css){
+						if (typeof mejscss[opt.css[c]]=="undefined"){
+							mejscss[opt.css[c]] = true;
+							var stylesheet = document.createElement('link');
+							stylesheet.href = opt.css[c];
+							stylesheet.rel = 'stylesheet';
+							stylesheet.type = 'text/css';
+							document.getElementsByTagName('head')[0].appendChild(stylesheet);
+						}
+					}
+					for(var p in opt.plugins){
 						//console.log(p);
 						//console.log(mejsplugins[p]);
 						// load this plugin
@@ -23,7 +37,7 @@ var mejsplugins={};
 							//console.log("Load Plugin "+p);
 							run = false;
 							mejsplugins[p] = false;
-							jQuery.getScript(plugins[p],function(){mejsplugins[p] = true;runthisplayer();});
+							jQuery.getScript(opt.plugins[p],function(){mejsplugins[p] = true;runthisplayer();});
 						}
 						// this plugin is loading
 						else if(mejsplugins[p]==false){
@@ -35,8 +49,16 @@ var mejsplugins={};
 						}
 					}
 					if (run) {
-						new MediaElementPlayer('#'+id,jQuery.extend(options,{
+						new MediaElementPlayer('#'+id,jQuery.extend(opt.options,{
 							"success": function(media) {
+								function togglePlayingState(){
+									jQuery(media).closest('.mejs-inner').removeClass(media.paused?'playing':'paused').addClass(media.paused?'paused':'playing');
+								}
+								togglePlayingState();
+								media.addEventListener('play',togglePlayingState, false);
+								media.addEventListener('playing',togglePlayingState, false);
+								media.addEventListener('pause',togglePlayingState, false);
+								media.addEventListener('paused',togglePlayingState, false);
 								if (autoplay) media.play();
 							}
 						}));

javascript/mejs-init.min.js

-var mejsloader,mejsplugins={}; (function(){function a(){(function(a){jQuery("audio.mejs,video.mejs").not(".done").each(function(){function a(){var c=!0,b;for(b in d)"undefined"==typeof mejsplugins[b]?(c=!1,mejsplugins[b]=!1,jQuery.getScript(d[b],function(){mejsplugins[b]=!0;a()})):0==mejsplugins[b]&&(c=!1);c&&new MediaElementPlayer("#"+e,jQuery.extend(g,{success:function(a){h&&a.play()}}))}jQuery(this).addClass("done");f++;var e="mejs-"+jQuery(this).attr("data-id")+"-"+f,h=jQuery(this).attr("autoplay");jQuery(this).attr("id",e); var g=jQuery.parseJSON(jQuery(this).attr("data-mejsoptions")),d=jQuery.parseJSON(jQuery(this).attr("data-mejsplugins"));a()})})(jQuery)}var f=0;"undefined"==typeof mejsloader&&(mejsloader=jQuery.getScript(mejspath,function(){a();jQuery(a);onAjaxLoad(a)}))})();
\ No newline at end of file
+var mejsloader,mejsplugins={},mejscss={}; (function(){function b(){(function(b){jQuery("audio.mejs,video.mejs").not(".done").each(function(){function b(){var c=!0,e;for(e in a.css)if("undefined"==typeof mejscss[a.css[e]]){mejscss[a.css[e]]=!0;var f=document.createElement("link");f.href=a.css[e];f.rel="stylesheet";f.type="text/css";document.getElementsByTagName("head")[0].appendChild(f)}for(var d in a.plugins)"undefined"==typeof mejsplugins[d]?(c=!1,mejsplugins[d]=!1,jQuery.getScript(a.plugins[d],function(){mejsplugins[d]=!0;b()})):0==mejsplugins[d]&& (c=!1);c&&new MediaElementPlayer("#"+g,jQuery.extend(a.options,{success:function(a){function b(){jQuery(a).closest(".mejs-inner").removeClass(a.paused?"playing":"paused").addClass(a.paused?"paused":"playing")}b();a.addEventListener("play",b,!1);a.addEventListener("playing",b,!1);a.addEventListener("pause",b,!1);a.addEventListener("paused",b,!1);l&&a.play()}}))}jQuery(this).addClass("done");h++;var g="mejs-"+jQuery(this).attr("data-id")+"-"+h;jQuery(this).attr("id",g);var l=jQuery(this).attr("autoplay"), a={options:{},plugins:{},css:[]},c,k;for(c in a)if(k=jQuery(this).attr("data-mejs"+c))a[c]=jQuery.parseJSON(k);b()})})(jQuery)}var h=0;"undefined"==typeof mejsloader&&(mejsloader=jQuery.getScript(mejspath,function(){b();jQuery(b);onAjaxLoad(b)}))})();
\ No newline at end of file

modeles/audio.html

@@ -9,13 +9,14 @@
 	       src="#FICHIER"
 	       type="#MIME_TYPE"
 	       data-mejsoptions='{"alwaysShowControls": true[,"loop":(#ENV{loop}|?{true,false})],"audioWidth":"100%"[,"audioHeight":"(#ENV{hauteur})"][,"startVolume":"(#ENV{volume})"]}'
+	       data-mejscss='[(#LISTE{#CHEMIN{lib/mejs/mediaelementplayer.min.css}}|json_encode)]'
 	       controls="controls"
 				 [autoplay="autoplay"(#ENV{autoplay}|oui)]></audio>
 </div>
 [<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>]
 [<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
 [<script>/*<!\[CDATA\[*/var mejspath = '[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]';
-(#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
-[<style>(#INCLURE{#CHEMIN{lib/mejs/mediaelementplayer.min.css}|url_absolue_css})</style>]
+(#INCLURE{javascript/mejs-init.min.js}|compacte{js})/*\]\]>*/</script>]
+[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
 </div>
 </BOUCLE_tous>
\ No newline at end of file

modeles/video.html

@@ -14,6 +14,7 @@
 		<video class="mejs mejs-#ID_DOCUMENT [ mejs-(#ENV{skin})]"
 		       data-id="[(#VAL{mejs-#ID_DOCUMENT}|concat{#ENV{skin}}|md5)]"
 		       data-mejsoptions='{"alwaysShowControls": true,"pluginPath":"[(#CHEMIN{lib/mejs/flashmediaelement.swf}|dirname)/]"[,"loop":(#ENV{loop}|?{true,false})],"videoWidth":"100%",videoHeight:"100%"[,startVolume:"(#ENV{volume})"]}'
+		       data-mejscss='[(#LISTE{#CHEMIN{lib/mejs/mediaelementplayer.min.css}}|json_encode)]'
 		       width="100%"
 		       height="100%"
 		       poster="[(#LOGO_DOCUMENT{vignette}|image_reduire{#GET{largeur},0}|extraire_attribut{src})]"
@@ -35,7 +36,7 @@
 [<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>]
 [<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
 [<script>/*<!\[CDATA\[*/var mejspath = '[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]';
-(#INCLURE{javascript/mejs_init.js}|compacte{js})/*\]\]>*/</script>]
-<style>[(#INCLURE{#CHEMIN{lib/mejs/mediaelementplayer.min.css}|url_absolue_css})].spip_document_video .me-cannotplay {width:100% !important;height:100% !important;}.spip_document_video .me-cannotplay a {display: block;}</style>
+(#INCLURE{javascript/mejs-init.min.js}|compacte{js})/*\]\]>*/</script>]
+[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
 </div>
 </BOUCLE_tous>
\ No newline at end of file

paquet.xml

 <paquet
 	prefix="medias"
 	categorie="multimedia"
-	version="2.10.6"
+	version="2.10.7"
 	etat="stable"
 	compatibilite="[3.0.0;3.1.*]"
 	logo="prive/themes/spip/images/portfolio-32.png"