Changeset 87066 in spip-zone


Ignore:
Timestamp:
Jan 10, 2015, 10:24:45 AM (5 years ago)
Author:
cedric@…
Message:

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

Location:
_core_/plugins/medias
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • _core_/plugins/medias/javascript/mejs-init.js

    r86839 r87066  
    11var mejsloader;
    22var mejsplugins={};
     3var mejscss={};
    34(function(){
    45        var mejs_counter = 0;
     
    1011                                mejs_counter++;
    1112                                var id = "mejs-" + (jQuery(this).attr('data-id')) + "-" + mejs_counter;
     13                                jQuery(this).attr('id',id);
    1214                                var autoplay = jQuery(this).attr('autoplay');
    13                                 jQuery(this).attr('id',id);
    14                                 var options = jQuery.parseJSON(jQuery(this).attr('data-mejsoptions'));
    15                                 var plugins = jQuery.parseJSON(jQuery(this).attr('data-mejsplugins'));
     15                                var opt = {options:{},plugins:{},css:[]}, i,v;
     16                                for (i in opt){
     17                                        if (v = jQuery(this).attr('data-mejs'+i)) opt[i] = jQuery.parseJSON(v);
     18                                }
    1619                                function runthisplayer(){
    1720                                        var run = true;
    18                                         for(var p in plugins){
     21                                        //console.log(css);
     22                                        for(var c in opt.css){
     23                                                if (typeof mejscss[opt.css[c]]=="undefined"){
     24                                                        mejscss[opt.css[c]] = true;
     25                                                        var stylesheet = document.createElement('link');
     26                                                        stylesheet.href = opt.css[c];
     27                                                        stylesheet.rel = 'stylesheet';
     28                                                        stylesheet.type = 'text/css';
     29                                                        document.getElementsByTagName('head')[0].appendChild(stylesheet);
     30                                                }
     31                                        }
     32                                        for(var p in opt.plugins){
    1933                                                //console.log(p);
    2034                                                //console.log(mejsplugins[p]);
     
    2438                                                        run = false;
    2539                                                        mejsplugins[p] = false;
    26                                                         jQuery.getScript(plugins[p],function(){mejsplugins[p] = true;runthisplayer();});
     40                                                        jQuery.getScript(opt.plugins[p],function(){mejsplugins[p] = true;runthisplayer();});
    2741                                                }
    2842                                                // this plugin is loading
     
    3650                                        }
    3751                                        if (run) {
    38                                                 new MediaElementPlayer('#'+id,jQuery.extend(options,{
     52                                                new MediaElementPlayer('#'+id,jQuery.extend(opt.options,{
    3953                                                        "success": function(media) {
     54                                                                function togglePlayingState(){
     55                                                                        jQuery(media).closest('.mejs-inner').removeClass(media.paused?'playing':'paused').addClass(media.paused?'paused':'playing');
     56                                                                }
     57                                                                togglePlayingState();
     58                                                                media.addEventListener('play',togglePlayingState, false);
     59                                                                media.addEventListener('playing',togglePlayingState, false);
     60                                                                media.addEventListener('pause',togglePlayingState, false);
     61                                                                media.addEventListener('paused',togglePlayingState, false);
    4062                                                                if (autoplay) media.play();
    4163                                                        }
  • _core_/plugins/medias/javascript/mejs-init.min.js

    r86839 r87066  
    1 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)}))})();
     1var 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)}))})();
  • _core_/plugins/medias/modeles/audio.html

    r86840 r87066  
    1010               type="#MIME_TYPE"
    1111               data-mejsoptions='{"alwaysShowControls": true[,"loop":(#ENV{loop}|?{true,false})],"audioWidth":"100%"[,"audioHeight":"(#ENV{hauteur})"][,"startVolume":"(#ENV{volume})"]}'
     12               data-mejscss='[(#LISTE{#CHEMIN{lib/mejs/mediaelementplayer.min.css}}|json_encode)]'
    1213               controls="controls"
    1314                                 [autoplay="autoplay"(#ENV{autoplay}|oui)]></audio>
     
    1617[<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
    1718[<script>/*<!\[CDATA\[*/var mejspath = '[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]';
    18 (#INCLURE{javascript/mejs-init.min.js})/*\]\]>*/</script>]
    19 [<style>(#INCLURE{#CHEMIN{lib/mejs/mediaelementplayer.min.css}|url_absolue_css})</style>]
     19(#INCLURE{javascript/mejs-init.min.js}|compacte{js})/*\]\]>*/</script>]
     20[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
    2021</div>
    2122</BOUCLE_tous>
  • _core_/plugins/medias/modeles/video.html

    r86683 r87066  
    1515                       data-id="[(#VAL{mejs-#ID_DOCUMENT}|concat{#ENV{skin}}|md5)]"
    1616                       data-mejsoptions='{"alwaysShowControls": true,"pluginPath":"[(#CHEMIN{lib/mejs/flashmediaelement.swf}|dirname)/]"[,"loop":(#ENV{loop}|?{true,false})],"videoWidth":"100%",videoHeight:"100%"[,startVolume:"(#ENV{volume})"]}'
     17                       data-mejscss='[(#LISTE{#CHEMIN{lib/mejs/mediaelementplayer.min.css}}|json_encode)]'
    1718                       width="100%"
    1819                       height="100%"
     
    3637[<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
    3738[<script>/*<!\[CDATA\[*/var mejspath = '[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]';
    38 (#INCLURE{javascript/mejs_init.js}|compacte{js})/*\]\]>*/</script>]
    39 <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>
     39(#INCLURE{javascript/mejs-init.min.js}|compacte{js})/*\]\]>*/</script>]
     40[(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]
    4041</div>
    4142</BOUCLE_tous>
  • _core_/plugins/medias/paquet.xml

    r86840 r87066  
    22        prefix="medias"
    33        categorie="multimedia"
    4         version="2.10.6"
     4        version="2.10.7"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.1.*]"
Note: See TracChangeset for help on using the changeset viewer.