Changeset 87075 in spip-zone


Ignore:
Timestamp:
Jan 11, 2015, 11:00:32 PM (5 years ago)
Author:
cedric@…
Message:

Refactoring : le mini-player insere devant les liens mp3 est implemente par un player mejs cache en fin de page, et un event sur chaque lien pour modifier le src et play/pause le mejs.
Deplacement des images et refactoring du rendu par simple css
On revise le script d'init pour permettre de partager la fonction d'init et de la lancer plusieurs fois sans risque

Location:
_plugins_/player/trunk
Files:
4 added
5 edited
10 moved

Legend:

Unmodified
Added
Removed
  • _plugins_/player/trunk/css/player.css

    r54784 r87075  
    1 span.play_{cursor:pointer;vertical-align: middle;}
    2 span.play_on{cursor:pointer;vertical-align: middle;}
     1.link-player .icon-play,
     2.link-player .icon-pause {
     3        width: 16px;
     4        height: 16px;
     5        display: inline-block;
     6        margin-right: 5px;
     7        background: url(img/controls-16.png) no-repeat -32px center;
     8}
     9.link-player .icon-pause {
     10        background-position: -64px center;
     11}
  • _plugins_/player/trunk/javascript/mejs-init.js

    r87065 r87075  
    11var mejsloader;
    2 var mejsplugins={};
    3 var mejscss={};
    42(function(){
    5         var mejs_counter = 0;
    6         function mejs_init(){
    7                 (function($) {
    8                         jQuery("audio.mejs,video.mejs").not('.done').each(function(){
    9                                 jQuery(this).addClass('done');
    10                                 //console.log(this);
    11                                 mejs_counter++;
    12                                 var id = "mejs-" + (jQuery(this).attr('data-id')) + "-" + mejs_counter;
    13                                 jQuery(this).attr('id',id);
    14                                 var autoplay = jQuery(this).attr('autoplay');
    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                                 }
    19                                 function runthisplayer(){
    20                                         var run = true;
    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);
     3        if (typeof mejsloader == "undefined")
     4                mejsloader = {gs:null,plug:{},css:{},init:null,c:0};
     5        if (!mejsloader.init){
     6                mejsloader.init = function (){
     7                        if (!(mejsloader.gs===true)) return;
     8                        (function ($){
     9                                jQuery("audio.mejs,video.mejs").not('.done').each(function (){
     10                                        var me = jQuery(this).addClass('done');
     11                                        //console.log(this);
     12                                        var id;
     13                                        if (!(id = me.attr('id'))){
     14                                                id = "mejs-"+(me.attr('data-id'))+"-"+(mejsloader.c++);
     15                                                me.attr('id', id);
     16                                        }
     17                                        var opt = {options: {}, plugins: {}, css: []}, i, v;
     18                                        for (i in opt){
     19                                                if (v = me.attr('data-mejs'+i)) opt[i] = jQuery.parseJSON(v);
     20                                        }
     21                                        function runthisplayer(){
     22                                                var run = true;
     23                                                //console.log(css);
     24                                                for (var c in opt.css){
     25                                                        if (typeof mejsloader.css[opt.css[c]]=="undefined"){
     26                                                                mejsloader.css[opt.css[c]] = true;
     27                                                                var stylesheet = document.createElement('link');
     28                                                                stylesheet.href = opt.css[c];
     29                                                                stylesheet.rel = 'stylesheet';
     30                                                                stylesheet.type = 'text/css';
     31                                                                document.getElementsByTagName('head')[0].appendChild(stylesheet);
     32                                                        }
     33                                                }
     34                                                for (var p in opt.plugins){
     35                                                        //console.log(p);
     36                                                        //console.log(mejsloader.plug[p]);
     37                                                        // load this plugin
     38                                                        if (typeof mejsloader.plug[p]=="undefined"){
     39                                                                //console.log("Load Plugin "+p);
     40                                                                run = false;
     41                                                                mejsloader.plug[p] = false;
     42                                                                jQuery.getScript(opt.plugins[p], function (){
     43                                                                        mejsloader.plug[p] = true;
     44                                                                        runthisplayer();
     45                                                                });
     46                                                        }
     47                                                        // this plugin is loading
     48                                                        else if (mejsloader.plug[p]==false){
     49                                                                //console.log("Plugin "+p+" loading...");
     50                                                                run = false;
     51                                                        }
     52                                                        else {
     53                                                                //console.log("Plugin "+p+" loaded");
     54                                                        }
     55                                                }
     56                                                if (run){
     57                                                        new MediaElementPlayer('#'+id, jQuery.extend(opt.options, {
     58                                                                "success": function (media){
     59                                                                        function togglePlayingState(){
     60                                                                                jQuery(media).closest('.mejs-inner').removeClass(media.paused ? 'playing' : 'paused').addClass(media.paused ? 'paused' : 'playing');
     61                                                                        }
     62
     63                                                                        togglePlayingState();
     64                                                                        media.addEventListener('play', togglePlayingState, false);
     65                                                                        media.addEventListener('playing', togglePlayingState, false);
     66                                                                        media.addEventListener('pause', togglePlayingState, false);
     67                                                                        media.addEventListener('paused', togglePlayingState, false);
     68                                                                        if (me.attr('autoplay')) media.play();
     69                                                                }
     70                                                        }));
    3071                                                }
    3172                                        }
    32                                         for(var p in opt.plugins){
    33                                                 //console.log(p);
    34                                                 //console.log(mejsplugins[p]);
    35                                                 // load this plugin
    36                                                 if (typeof mejsplugins[p]=="undefined"){
    37                                                         //console.log("Load Plugin "+p);
    38                                                         run = false;
    39                                                         mejsplugins[p] = false;
    40                                                         jQuery.getScript(opt.plugins[p],function(){mejsplugins[p] = true;runthisplayer();});
    41                                                 }
    42                                                 // this plugin is loading
    43                                                 else if(mejsplugins[p]==false){
    44                                                         //console.log("Plugin "+p+" loading...");
    45                                                         run = false;
    46                                                 }
    47                                                 else {
    48                                                         //console.log("Plugin "+p+" loaded");
    49                                                 }
    50                                         }
    51                                         if (run) {
    52                                                 new MediaElementPlayer('#'+id,jQuery.extend(opt.options,{
    53                                                         "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);
    62                                                                 if (autoplay) media.play();
    63                                                         }
    64                                                 }));
    65                                         }
    66                                 }
    67                                 runthisplayer();
    68                         })
    69                 })(jQuery);
     73
     74                                        runthisplayer();
     75                                })
     76                        })(jQuery);
     77                }
    7078        }
    71         if (typeof mejsloader=="undefined"){
    72                 mejsloader = jQuery.getScript(mejspath,function(){
    73                         mejs_init(); // init immediate des premiers players dans la page
    74                         jQuery(mejs_init); // init exhaustive de tous les players
    75                         onAjaxLoad(mejs_init); // init lors d'un load ajax
     79        if (!mejsloader.gs){
     80                mejsloader.gs = jQuery.getScript(mejspath,function(){
     81                        mejsloader.gs = true;
     82                        mejsloader.init(); // init immediate des premiers players dans la page
     83                        jQuery(mejsloader.init); // init exhaustive de tous les players
     84                        onAjaxLoad(mejsloader.init); // init lors d'un load ajax
    7685                });
    7786        }
  • _plugins_/player/trunk/javascript/mejs-init.min.js

    r87065 r87075  
    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)}))})();
     1var mejsloader; (function(){"undefined"==typeof mejsloader&&(mejsloader={gs:null,plug:{},css:{},init:null,c:0});mejsloader.init||(mejsloader.init=function(){!0===mejsloader.gs&&function(l){jQuery("audio.mejs,video.mejs").not(".done").each(function(){function h(){var b=!0,e;for(e in a.css)if("undefined"==typeof mejsloader.css[a.css[e]]){mejsloader.css[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 c in a.plugins)"undefined"==typeof mejsloader.plug[c]? (b=!1,mejsloader.plug[c]=!1,jQuery.getScript(a.plugins[c],function(){mejsloader.plug[c]=!0;h()})):0==mejsloader.plug[c]&&(b=!1);b&&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);d.attr("autoplay")&&a.play()}}))} var d=jQuery(this).addClass("done"),g;(g=d.attr("id"))||(g="mejs-"+d.attr("data-id")+"-"+mejsloader.c++,d.attr("id",g));var a={options:{},plugins:{},css:[]},b,k;for(b in a)if(k=d.attr("data-mejs"+b))a[b]=jQuery.parseJSON(k);h()})}(jQuery)});mejsloader.gs||(mejsloader.gs=jQuery.getScript(mejspath,function(){mejsloader.gs=!0;mejsloader.init();jQuery(mejsloader.init);onAjaxLoad(mejsloader.init)}))})();
  • _plugins_/player/trunk/player_fonctions.php

    r87069 r87075  
    1515function player_call_js() {
    1616        include_spip('inc/filtres');
    17         $flux = "\n"
    18                 . '<script type="text/javascript" src="'.timestamp(find_in_path('javascript/soundmanager/soundmanager2.js')).'"></script>'
    19                 . '<script type="text/javascript" src="'.timestamp(find_in_path('javascript/player_enclosure.js')).'"></script>'."\n"
    20                 ;
     17        lire_fichier(find_in_path("javascript/mejs-enclosure.min.js"),$enclosure);
     18        lire_fichier(find_in_path("javascript/mejs-init.min.js"),$init);
     19        $mejspath = timestamp(find_in_path("lib/mejs/mediaelement-and-player.min.js"));
     20        $flux = '<script type="text/javascript">/*<![CDATA[*/'
     21                . "var mejspath='$mejspath';\n$enclosure\n$init\n"
     22                . "/*]]>*/</script>\n";
     23
    2124        return $flux;
    2225}
     
    2932 */
    3033function player_insert_head_css($flux){
    31         $flux =
    32                 '<script type="text/javascript">/*<![CDATA[*/' . "\n"
    33                 . 'player_data={'
    34                 // sert uniquement en fallback player sur les enclosure, si flash<8
    35           . 'key_espace_stop:true,'
    36           . 'image_play:"'.find_in_path('players/controls/play-16.png').'",'
    37                 . 'image_pause:"'.find_in_path('players/controls/pause-16.png').'",'
    38                 . 'soundManager_url:"'.find_in_path('javascript/soundmanager/soundmanager2.swf').'",'
    39                 . 'soundManager_nullURL:"'.find_in_path('javascript/soundmanager/null.mp3').'",'
    40                 . 'dir:"' . _DIR_PLUGIN_PLAYER . '"'
    41           . '};'
    42                 . "/*]]>*/</script>\n"
    43                 . $flux;
    44 
    45         lire_fichier(direction_css(find_in_path('css/player.css')),$css);
    46         $flux .= "\n".'<style type="text/css">'.$css.'</style>';
     34        $css = timestamp(find_in_path('css/player.css'));
     35        $flux .= "\n".'<link href="'.$css.'" rel="stylesheet" />';
    4736
    4837        return $flux;
  • _plugins_/player/trunk/players/mejs/player.html

    r87068 r87075  
    1515        </div><span style="display: none;">
    1616        [<script>/*<!\[CDATA\[*/var mejspath = '[(#CHEMIN{lib/mejs/mediaelement-and-player.min.js}|timestamp)]';
    17         (#INCLURE{javascript/mejs-init.min.js}|compacte{js})/*\]\]>*/</script>]
     17        (#INCLURE{javascript/mejs-init.js}|compacte{js})/*\]\]>*/</script>]
    1818        [(#ENV{skin}|oui)[<style>(#INCLURE{#CHEMIN{css/mejs-skin-#ENV{skin}.css}|sinon{#CHEMIN{lib/mejs/mejs-skins.css}}|url_absolue_css})</style>]]</span>
    1919</dt>
Note: See TracChangeset for help on using the changeset viewer.