From a077064bb9e0efb7f66c166fb2867ca42adc53cb Mon Sep 17 00:00:00 2001
From: "cedric@yterium.com" <>
Date: Mon, 2 Mar 2015 09:04:00 +0000
Subject: [PATCH] Mise a jour de l'initialisation : chargement plus rapide de
la CSS (en meme temps qu'on lance le chargement du js, et pas lors de l'init
du player) + mise a jour optimisation du js d'initialisation (report du
plugin player)
---
javascript/mejs-init.js | 150 ++++++++++++++++++++----------------
javascript/mejs-init.min.js | 2 +-
modeles/audio.html | 7 +-
modeles/video.html | 7 +-
paquet.xml | 2 +-
5 files changed, 91 insertions(+), 77 deletions(-)
diff --git a/javascript/mejs-init.js b/javascript/mejs-init.js
index d1b5aa60..24dc65ca 100644
--- a/javascript/mejs-init.js
+++ b/javascript/mejs-init.js
@@ -1,78 +1,94 @@
var mejsloader;
-var mejsplugins={};
-var mejscss={};
(function(){
- var mejs_counter = 0;
- function mejs_init(){
- (function($) {
- jQuery("audio.mejs,video.mejs").not('.done').each(function(){
- jQuery(this).addClass('done');
- //console.log(this);
- mejs_counter++;
- var id = "mejs-" + (jQuery(this).attr('data-id')) + "-" + mejs_counter;
- jQuery(this).attr('id',id);
- 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;
- //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);
- }
+ var L=mejsloader;
+ if (typeof L == "undefined")
+ mejsloader = L = {gs:null,plug:{},css:{},init:null,c:0,cssload:null};
+ if (!L.init){
+ L.cssload = function (f){
+ if (typeof L.css[f]=="undefined"){
+ L.css[f] = true;
+ var stylesheet = document.createElement('link');
+ stylesheet.href = f;
+ stylesheet.rel = 'stylesheet';
+ stylesheet.type = 'text/css';
+ document.getElementsByTagName('head')[0].appendChild(stylesheet);
+ }
+ }
+ L.init = function (){
+ if (!(L.gs===true)) return;
+ (function ($){
+ jQuery("audio.mejs,video.mejs").not('.done').each(function (){
+ var me = jQuery(this).addClass('done');
+ //console.log(this);
+ var id;
+ if (!(id = me.attr('id'))){
+ id = "mejs-"+(me.attr('data-id'))+"-"+(L.c++);
+ me.attr('id', id);
}
- for(var p in opt.plugins){
- //console.log(p);
- //console.log(mejsplugins[p]);
- // load this plugin
- if (typeof mejsplugins[p]=="undefined"){
- //console.log("Load Plugin "+p);
- run = false;
- mejsplugins[p] = false;
- jQuery.getScript(opt.plugins[p],function(){mejsplugins[p] = true;runthisplayer();});
- }
- // this plugin is loading
- else if(mejsplugins[p]==false){
- //console.log("Plugin "+p+" loading...");
- run = false;
+ var opt = {options: {}, plugins: {}, css: []}, i, v;
+ for (i in opt){
+ if (v = me.attr('data-mejs'+i)) opt[i] = jQuery.parseJSON(v);
+ }
+ function runthisplayer(){
+ var run = true;
+ //console.log(css);
+ for (var c in opt.css){
+ L.cssload(opt.css[c]);
}
- else {
- //console.log("Plugin "+p+" loaded");
+ for (var p in opt.plugins){
+ //console.log(p);
+ //console.log(L.plug[p]);
+ // load this plugin
+ if (typeof L.plug[p]=="undefined"){
+ //console.log("Load Plugin "+p);
+ run = false;
+ L.plug[p] = false;
+ jQuery.getScript(opt.plugins[p], function (){
+ L.plug[p] = true;
+ runthisplayer();
+ });
+ }
+ // this plugin is loading
+ else if (L.plug[p]==false){
+ //console.log("Plugin "+p+" loading...");
+ run = false;
+ }
+ else {
+ //console.log("Plugin "+p+" loaded");
+ }
}
- }
- if (run) {
- 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');
+ if (run){
+ 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 (me.attr('autoplay')) media.play();
}
- 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();
- }
- }));
+ }));
+ }
}
- }
- runthisplayer();
- })
- })(jQuery);
+
+ runthisplayer();
+ })
+ })(jQuery);
+ }
}
- if (typeof mejsloader=="undefined"){
- mejsloader = jQuery.getScript(mejspath,function(){
- mejs_init(); // init immediate des premiers players dans la page
- jQuery(mejs_init); // init exhaustive de tous les players
- onAjaxLoad(mejs_init); // init lors d'un load ajax
+ if (!L.gs){
+ if (typeof mejscss !== "undefined"){
+ L.cssload(mejscss);
+ }
+ L.gs = jQuery.getScript(mejspath,function(){
+ L.gs = true;
+ L.init(); // init immediate des premiers players dans la page
+ jQuery(L.init); // init exhaustive de tous les players
+ onAjaxLoad(L.init); // init lors d'un load ajax
});
}
})();
diff --git a/javascript/mejs-init.min.js b/javascript/mejs-init.min.js
index 1515ef9c..69e0262e 100644
--- a/javascript/mejs-init.min.js
+++ b/javascript/mejs-init.min.js
@@ -1 +1 @@
-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
+var mejsloader; (function(){var a=mejsloader;"undefined"==typeof a&&(mejsloader=a={gs:null,plug:{},css:{},init:null,c:0,cssload:null});a.init||(a.cssload=function(b){if("undefined"==typeof a.css[b]){a.css[b]=!0;var c=document.createElement("link");c.href=b;c.rel="stylesheet";c.type="text/css";document.getElementsByTagName("head")[0].appendChild(c)}},a.init=function(){!0===a.gs&&function(b){jQuery("audio.mejs,video.mejs").not(".done").each(function(){function c(){var e=!0,h;for(h in d.css)a.cssload(d.css[h]);for(var f in d.plugins)"undefined"== typeof a.plug[f]?(e=!1,a.plug[f]=!1,jQuery.getScript(d.plugins[f],function(){a.plug[f]=!0;c()})):0==a.plug[f]&&(e=!1);e&&new MediaElementPlayer("#"+b,jQuery.extend(d.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);g.attr("autoplay")&&a.play()}}))}var g=jQuery(this).addClass("done"), b;(b=g.attr("id"))||(b="mejs-"+g.attr("data-id")+"-"+a.c++,g.attr("id",b));var d={options:{},plugins:{},css:[]},e,h;for(e in d)if(h=g.attr("data-mejs"+e))d[e]=jQuery.parseJSON(h);c()})}(jQuery)});a.gs||("undefined"!==typeof mejscss&&a.cssload(mejscss),a.gs=jQuery.getScript(mejspath,function(){a.gs=!0;a.init();jQuery(a.init);onAjaxLoad(a.init)}))})();
\ No newline at end of file
diff --git a/modeles/audio.html b/modeles/audio.html
index e11c9586..2a59fa6f 100644
--- a/modeles/audio.html
+++ b/modeles/audio.html
@@ -9,14 +9,13 @@
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}|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>]]
+[<script>/*<!\[CDATA\[*/var mejspath='[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]',mejscss='[(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp)]';
+(#INCLURE{javascript/mejs-init.min.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>]]</span>
</div>
</BOUCLE_tous>
\ No newline at end of file
diff --git a/modeles/video.html b/modeles/video.html
index 713f495a..dd73c69b 100644
--- a/modeles/video.html
+++ b/modeles/video.html
@@ -14,7 +14,6 @@
<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,8 +34,8 @@
</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}|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>]]
+[<script>/*<!\[CDATA\[*/var mejspath='[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]',mejscss='[(#CHEMIN{lib/mejs/mediaelementplayer.min.css}|timestamp)]';
+(#INCLURE{javascript/mejs-init.min.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>]]</span>
</div>
</BOUCLE_tous>
\ No newline at end of file
diff --git a/paquet.xml b/paquet.xml
index c1e2752c..35e19dd7 100644
--- a/paquet.xml
+++ b/paquet.xml
@@ -1,7 +1,7 @@
<paquet
prefix="medias"
categorie="multimedia"
- version="2.10.8"
+ version="2.10.9"
etat="stable"
compatibilite="[3.0.0;3.1.*]"
logo="prive/themes/spip/images/portfolio-32.png"
--
GitLab