Ignore:
Timestamp:
11/23/12 11:17:12 (7 years ago)
Author:
kent1
Message:

Beaucoup de remodélisation mais on doit être compatible avec IE 7 dorénavant sans erreurs

Location:
plugins_spip/html5/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/html5/trunk/javascript/mediaspip_fallback_flash.js

    r7157 r7170  
    44 * HTML5 to fallback flash
    55 *
    6  * $version : 1.2.4
     6 * $version : 1.2.5
    77 * © GNU/GPL v3 - kent1 (http://kent1.info - kent1@arscenic.info)
    88 * cf : http://www.mediaspip.net/technical-documentation/plugins-used-by-mediaspip/html5-player-video-sound-media/
     
    1111(function($){
    1212        var slider = (typeof($.ui) == 'object') && (typeof($.ui.slider) == 'function'),
    13                 cookies = (typeof($.cookie) == 'function'),
    14                 timer = false;
     13                cookies = (typeof($.cookie) == 'function');
    1514
    1615        $.extend($.fn, {
     
    4039                        liens = [];
    4140                       
    42                         if(media.is('audio'))
    43                                 var isSound = true, isVideo = false;
    44                         else
    45                                 var isVideo = true, isSound = false;
    46                        
    4741                        options = $.extend(defaults, options);
     42                        options.isVideo = true;
     43                        options.isSound = false;
     44                       
     45                        if(media.is('audio')){
     46                                options.isSound = true;
     47                                options.isVideo = false;
     48                        }
     49                       
    4850                        liens = sm2_chercher_liens(options.sources,liens);
    4951                       
     
    5355                               
    5456                                if(!width){
    55                                         if(media.attr('width'))
    56                                                 width = media.attr('width');
    57                                         else if(media.width() > 0)
    58                                                 width = media.width();
     57                                        if(media.attr('width')) width = media.attr('width');
     58                                        else if(media.width() > 0) width = media.width();
    5959                                }
    6060                                if(!height){
     
    7676                                         */
    7777                                        lecteur += (options.messages) ? '<div class="messages" style="display:none"></div>' : '';
    78                                         lecteur += (options.poster) ? '<div class="html5_cover"><img src="'+options.poster+'" /></div>' : '';
     78                                        lecteur += (options.poster) ? '<div class="html5_cover"></div>' : '';
    7979                                        lecteur +='<div class="flowplayer"></div>';
    8080                                        lecteur +='<div class="controls small">'
     
    8383                                        +'</div>'
    8484                                        +'<div class="progress_bar">'
    85                                                 +'<em class="elapsed_time" title="'+ms_player_lang.info_ecoule+'"></em>'
     85                                                +'<em class="elapsed_time" title="'+ms_player_lang.info_ecoule+'">00:00</em>'
    8686                                                +'<div class="progress_back">'
    8787                                                        +'<div class="progress_loading_wrapper">'
     
    102102                                        lecteur += ($.inArray('loop',options.boutons_caches) == '-1') ? '<span class="loop_button" title="'+ms_player_lang.bouton_loop+'"></span>' : '';
    103103                                        lecteur +='</div>';
    104 
    105                                 wrapper.height(height).width(width).html(lecteur);
    106                                
    107                                 var controls = wrapper.find('.controls');
    108                            
     104                               
     105                                        wrapper.html(lecteur);
     106
     107                                if(options.poster && options.isSound){
     108                                        wrapper.find('.html5_cover').html('<img src="'+options.poster+'" />');
     109                                        var width_poster = ((parseInt(wrapper.find('.html5_cover img').width()) > 0) ? wrapper.find('.html5_cover img').width() : width),
     110                                                height_poster = ((parseInt(wrapper.find('.html5_cover img').height()) > 0) ? wrapper.find('.html5_cover img').height() : height);
     111                                        wrapper.height(height_poster).width(width_poster).find('.flowplayer').height(height_poster).width(width_poster);
     112                                }else wrapper.height(height).width(width);
     113                               
     114                               
    109115                                /**
    110116                                 * Si le wrapper est vraiment petit, pas de messages
    111117                                 */
    112118                                if(wrapper.height() < 100) options.messages = false;
    113 
     119                               
    114120                                wrapper[0].options = options;
    115 
    116                                 if(options.poster && isSound){
    117                                         var width = wrapper.find('.html5_cover img').width(),
    118                                                 height = wrapper.find('.html5_cover img').height();
    119                                         wrapper.height(height).width(width).find('.flowplayer').height(height).width(width);
    120                                 }
    121                             var timer = null, bufferfull = null;
    122                                 var allowfullscreen = isSound ? false : true,
     121                                var allowfullscreen = options.isSound ? false : true,
    123122                                        media_options = {
    124                                                 onLoad:function(clip){
     123                                                onLoad:function(){
     124                                                        this.timer = null;
    125125                                                        this.options = options;
    126                                                 var player = this;
    127                                                         wrapper.removeClass('loading').addClass('paused');
    128                                                         controls.find('.play_pause_button').attr('title',ms_player_lang.bouton_lire).unbind('click').click(function(e){
    129                                                                 if (player.isLoaded())
    130                                                                         player.toggle();
    131                                                                 else player.load();
     126                                                        this.bufferfull = false;
     127                                                        this.slider_done = false;
     128                                                        this.former_duration = 0;
     129                                                       
     130                                                var player = this,
     131                                                        wrapper = $(this.getParent()).parents('.media_wrapper'),
     132                                                        controls = wrapper.find('.controls');
     133                                               
     134                                                wrapper.removeClass('loading').addClass('paused');
     135                                                       
     136                                                        if(wrapper[0].options.isSound){
     137                                                                wrapper.find('.flowplayer').click(function(){
     138                                                                        if (player.isLoaded() && !options.poster) player.toggle();
     139                                                                        else if(!options.poster) player.play();
     140                                                                });
     141                                                        }
     142                                                        wrapper.find('.play_pause_button').attr('title',ms_player_lang.bouton_lire).unbind('click').click(function(e){
     143                                                                player.toggle();
    132144                                                        });
    133                                                         if(isSound){
    134                                                                 wrapper.find('.flowplayer').click(function(){
    135                                                                         if (player.isLoaded()) player.toggle();
    136                                                                         else player.play();
    137                                                                 });
    138                                                                 if(!wrapper[0].options.autoplay){
    139                                                                         /**
    140                                                                          * Play / pause pour récupérer les metadonnées
    141                                                                          */
    142                                                                         this.forceplayformetadata = true;
    143                                                                         this.mute();
    144                                                                         if(!this.options.muted){
    145                                                                                 this.forcemuteformetadata = true;
    146                                                                         }
    147                                                                         this.play();
    148                                                                 }
    149                                                         }
    150                                                         if($.inArray('volume',options.boutons_caches) == '-1' && !options.muted_bloque){
    151                                                         controls.find('.volume_button').click(function(e){
     145                                                        if($.inArray('volume',wrapper[0].options.boutons_caches) == '-1' && !wrapper[0].options.muted_bloque){
     146                                                                wrapper.find('.volume_button').click(function(e){
    152147                                                                var status = player.getStatus();
    153148                                                                        if(status.muted){
    154                                                                                 if(cookies && options.cookie_volume) $.cookie('ms_volume_muted',null);
     149                                                                                if(cookies && wrapper[0].options.cookie_volume) $.cookie('ms_volume_muted',null);
    155150                                                                                if(typeof(player.slider_volume) == 'object') player.slider_volume.slider('enable');
    156151                                                                                var volume_title = ms_player_lang.bouton_volume+' ('+Math.floor(player.getVolume())+'%)';
    157                                                                                 controls.find('.volume_button').removeClass('muted').attr('title',volume_title);
     152                                                                                wrapper.find('.volume_button').removeClass('muted').attr('title',volume_title);
    158153                                                                                player.unmute();
    159                                                                                 wrapper.ms_messages('mute',ms_player_lang.statut_unmute,options);
     154                                                                                wrapper.ms_messages('mute',ms_player_lang.statut_unmute,wrapper[0].options);
    160155                                                                        }else{
    161                                                                                 if(cookies && options.cookie_volume) $.cookie('ms_volume_muted','muted');
     156                                                                                if(cookies && wrapper[0].options.cookie_volume) $.cookie('ms_volume_muted','muted');
    162157                                                                                if(typeof(player.slider_volume) == 'object') player.slider_volume.slider('disable');
    163                                                                                 controls.find('.volume_button').addClass('muted').attr('title',ms_player_lang.bouton_volume_muted);
     158                                                                                wrapper.find('.volume_button').addClass('muted').attr('title',ms_player_lang.bouton_volume_muted);
    164159                                                                                player.mute();
    165                                                                                 wrapper.ms_messages('mute',ms_player_lang.statut_mute,options);
     160                                                                                wrapper.ms_messages('mute',ms_player_lang.statut_mute,wrapper[0].options);
    166161                                                                        }
    167162                                                                });
    168163                                                        }
     164                                                        if(slider){
     165                                                                wrapper.find('.progress_indicator').hide();
     166                                                                if($.inArray('volume',wrapper[0].options.boutons_caches) == '-1'){
     167                                                                        player.slider_volume = wrapper.find('.volume_slider').slider({
     168                                                                                value:100,
     169                                                                                orientation: wrapper[0].options.volume_slider_orientation,
     170                                                                                min:0,
     171                                                                                max:100,
     172                                                                                disabled: (wrapper[0].options.volume_bloque) ? true : false,
     173                                                                                range: "min",
     174                                                                                slide: function(event,ui){
     175                                                                                        /**
     176                                                                                         * On change le volume
     177                                                                                         */
     178                                                                                        if((ui.value <= 100) && (ui.value >= 0)){
     179                                                                                                player.setVolume(ui.value);
     180                                                                                                wrapper.flow_change_volume(ui.value,player.slider_volume,false,wrapper[0].options);
     181                                                                                                if(cookies && wrapper[0].options.cookie_volume) $.cookie('ms_volume', ui.value/100);
     182                                                                                        }
     183                                                                                },
     184                                                                                stop: function(event,ui){
     185                                                                                        /**
     186                                                                                         * On change le volume et on le sauvegarde dans le cookie si nécessaire
     187                                                                                         */
     188                                                                                        if((ui.value <= 100) && (ui.value >= 0)){
     189                                                                                                player.setVolume(ui.value);
     190                                                                                                wrapper.flow_change_volume(ui.value,player.slider_volume,false,wrapper[0].options);
     191                                                                                                if(cookies && wrapper[0].options.cookie_volume) $.cookie('ms_volume', ui.value/100);
     192                                                                                        }
     193                                                                                }
     194                                                                        });
     195                                                                }
     196                                                }
     197                                               
     198                                                        wrapper.dblclick(function(e){ return false; });
    169199                                                        wrapper.flow_resize_controls();
    170200                                        },
     
    174204                                        onBeforeKeyPress:function(e){
    175205                                                if(e == 76){
    176                                                         if($.inArray('loop',this.options.boutons_caches) == '-1'){
    177                                                                 wrapper.find('.loop_button').click();
    178                                                 }
     206                                                        if($.inArray('loop',$(this.getParent()).parents('.media_wrapper')[0].options.boutons_caches) == '-1')
     207                                                                $(this.getParent()).parents('.media_wrapper').find('.loop_button').click();
    179208                                                        return false;
    180209                                                }
    181210                                        },
    182211                                        onKeyPress: function(e){
     212                                                var wrapper = $(this.getParent()).parents('.media_wrapper');
    183213                                                if(e == 39 || e == 37){
    184214                                                        if(this.isPaused()){
     
    187217                                                        }
    188218                                                }
    189                                                 if(e == 70 && !this.isFullscreen()){
     219                                                if(e == 70 && !this.isFullscreen())
    190220                                                        this.toggleFullscreen();
    191                                                 }
     221
    192222                                                if(e == 38 || e == 40){
    193                                                         if(!this.options.volume_bloque){
     223                                                        if(!wrapper[0].options.volume_bloque){
    194224                                                                var volume = this.getVolume(),
    195225                                                                                volume_diff = (e == 38) ? '10' : '-10',
    196226                                                                                volume_new = Math.round((volume + parseFloat(volume_diff))*10)/10;
    197                                                                 wrapper.flow_change_volume(volume_new,this.slider_volume,false,this.options);
     227                                                                wrapper.flow_change_volume(volume_new,this.slider_volume,false,wrapper[0].options);
    198228                                                        }
    199229                                                }
    200230                                                if(e == 186 || e == 77){
    201                                                         if($.inArray('volume',this.options.boutons_caches) == '-1' && !this.options.muted_bloque){
    202                                                                 wrapper.find('.volume_button').click();
     231                                                        if($.inArray('volume',this.options.boutons_caches) == '-1' && !wrapper[0].options.muted_bloque){
     232                                                                wrapper.find('.volume_button').click();
    203233                                                        }
    204234                                                }
     
    206236                                clip:{
    207237                                        url:liens[0],
     238                                        coverImage: options.poster,
    208239                                    autoPlay:options.autoplay,
    209240                                    scaling:'fit',
    210                                     autoBuffering: (isSound ? (options.autoplay ? true : false) : options.autoload),
     241                                    autoBuffering: (options.isSound ? (options.autoplay ? true : false) : options.autoload),
    211242                                    bufferLength:5,
    212243                                onBeforeLoad:function(){},
    213244                                onBeforeBegin:function(){},
    214245                                    onBegin:function(clip){
    215                                         var player = this;
    216                                         if(player.options.loop){
     246                                        var player = this,
     247                                                wrapper = $(this.getParent()).parents('.media_wrapper');
     248                                        if(wrapper[0].options.loop){
    217249                                                clip.looped = true;
    218250                                                wrapper.addClass('loop');
     
    220252                                        if(typeof(clip.looped) == 'undefined')
    221253                                                clip.looped = false;
    222                                         if($.inArray('loop',options.boutons_caches) == '-1'){
     254                                       
     255                                        if($.inArray('loop',wrapper[0].options.boutons_caches) == '-1'){
    223256                                                        wrapper.find('.loop_button').unbind('click').click(function(e){
    224257                                                                if(clip.looped){
    225258                                                                        clip.looped = false;
    226                                                                         delete(player.options.loop);
     259                                                                        delete(wrapper[0].options.loop);
    227260                                                                        $(this).attr('title',ms_player_lang.bouton_loop);
    228                                                                         wrapper.removeClass('loop').ms_messages('loop',ms_player_lang.statut_unloop,options);
     261                                                                        wrapper.removeClass('loop').ms_messages('loop',ms_player_lang.statut_unloop,wrapper[0].options);
    229262                                                                }else{
    230263                                                                        clip.looped = true;
    231264                                                                        $(this).attr('title',ms_player_lang.bouton_loop_looped);
    232                                                                         wrapper.addClass('loop').ms_messages('loop',ms_player_lang.statut_loop,options);
     265                                                                        wrapper.addClass('loop').ms_messages('loop',ms_player_lang.statut_loop,wrapper[0].options);
    233266                                                                }
    234267                                                                });
     
    243276                                        }else
    244277                                                wrapper.flow_resize_controls();
    245                                         wrapper.flow_play_pause('play',options);
     278                                        wrapper.flow_play_pause('play',wrapper[0].options);
    246279                                },
    247280                                onStart:function(clip) {
    248                                                         var duration = false;
    249                                                         var player = this, status_start = player.getStatus();
    250                                                        
    251                                                         if(slider){
    252                                                                 controls.find('.progress_indicator').hide();
    253                                                                 if($.inArray('volume',options.boutons_caches) == '-1'){
    254                                                                         player.slider_volume = controls.find('.volume_slider').slider({
    255                                                                                 value:100,
    256                                                                                 orientation: options.volume_slider_orientation,
    257                                                                                 min:0,
    258                                                                                 max:100,
    259                                                                                 disabled: (options.volume_bloque) ? true : false,
    260                                                                                 range: "min",
    261                                                                                 slide: function(event,ui){
    262                                                                                         /**
    263                                                                                          * On change le volume
    264                                                                                          */
    265                                                                                         if((ui.value <= 100) && (ui.value >= 0)){
    266                                                                                                 player.setVolume(ui.value);
    267                                                                                                 wrapper.flow_change_volume(ui.value,player.slider_volume,false,options);
    268                                                                                                 if(cookies && options.cookie_volume) $.cookie('ms_volume', ui.value/100);
    269                                                                                         }
    270                                                                                 },
    271                                                                                 stop: function(event,ui){
    272                                                                                         /**
    273                                                                                          * On change le volume et on le sauvegarde dans le cookie si nécessaire
    274                                                                                          */
    275                                                                                         if((ui.value <= 100) && (ui.value >= 0)){
    276                                                                                                 player.setVolume(ui.value);
    277                                                                                                 wrapper.flow_change_volume(ui.value,player.slider_volume,false,options);
    278                                                                                                 if(cookies && options.cookie_volume) $.cookie('ms_volume', ui.value/100);
    279                                                                                         }
    280                                                                                 }
    281                                                                         });
    282                                                                 }
    283                                                 }
    284                                                
    285                                                         wrapper.flow_resize_controls();
    286                                                
    287                                                         wrapper.dblclick(function(e){ return false; });
    288                                                        
    289                                                 bufferfull = false;
    290                                                 var statustime = 0;
    291                                                 player.slider_done = false;
     281                                        // clear previous timer
     282                                                clearInterval(this.timer);
     283
     284                                                        var player = this,
     285                                                                statustime = 0,
     286                                                                wrapper = $(this.getParent()).parents('.media_wrapper');
    292287
    293288                                                // begin timer
    294                                                 var timer_function = function(){
    295                                                        
     289                                                this.timer = setInterval(function(){
    296290                                                        if(typeof(clip.duration) == 'undefined') return;
    297291                                                       
    298292                                                        var statustime = player.getStatus().time;
    299                                                         if (typeof(statustime) == 'undefined') {
    300                                                                 clearInterval(timer);
    301                                                                 return;
    302                                                         }
     293                                                        if (typeof(statustime) == 'undefined') return;
    303294                                                       
    304295                                                        if((typeof(statustime) != 'undefined')){
     
    309300                                                                if(!player.slider_done && slider){
    310301                                                                        var replay = false;
    311                                                                                 this.slider_control = controls.find('.progress_back').slider({
     302                                                                                player.slider_control = wrapper.find('.progress_back').slider({
    312303                                                                                        min: 0,
    313304                                                                                        max: player.former_duration ? player.former_duration : 100,
     
    321312                                                                                        },
    322313                                                                                        slide: function(event,ui){
    323                                                                                                 if(isSound){
     314                                                                                                if(wrapper[0].options.isSound){
    324315                                                                                                        if(replay){
    325316                                                                                                                player.seek(ui.value);
     
    337328                                                                                                }
    338329                                                                                                else{
    339                                                                                                         if(isSound){
     330                                                                                                        if(wrapper[0].options.isSound){
    340331                                                                                                                player.play();
    341332                                                                                                                player.seek(ui.value);
     
    351342                                                                                player.slider_done = true;
    352343                                                                }
    353                                                                 if(wrapper.find(".remaining_time").html() == '-00:00')
    354                                                                                 wrapper.flow_resize_controls();
    355344                                                                if (!player.isPaused()) {
    356345                                                                        var timer2 = statustime / player.former_duration * 100,
     
    363352                                                                                wrapper.flow_resize_controls();
    364353                                                                }
    365                                                                 if(!bufferfull){
     354                                                                       
     355                                                                if(!player.bufferfull){
    366356                                                                        var buffer = ms_anything_to_percent(player.getStatus().bufferEnd,player.former_duration);
    367357                                                                        if(buffer > 100) buffer = 100;
    368                                                                         if(buffer == 100) bufferfull = true;
     358                                                                        if(buffer == 100) player.bufferfull = true;
    369359                                                                                wrapper.find('.progress_buffered').css('width',buffer+'%');
    370360                                                                }
    371361                                                        }
    372                                                 };
    373                                                
    374                                                 // clear previous timer
    375                                                 clearInterval(this.timer);
    376                                                 this.timer = setInterval(timer_function, 500);
     362                                                },100);
    377363                                                wrapper.find(".remaining_time").unbind('click').click(function(e){
    378364                                                                if($(this).is('.remaining'))
     
    389375                                onCuepoint:function(content) {},
    390376                                onMetaData:function(clip) {
    391                                         if(isVideo){
     377                                        var wrapper = $(this.getParent()).parents('.media_wrapper'),
     378                                                options = wrapper[0].options;
     379                                        if((clip.duration != 'undefined') && (clip.duration != this.former_duration)){
     380                                                this.former_duration = clip.duration;
     381                                                var duration = ms_second_to_time(this.former_duration);
     382                                                if(typeof(this.slider_control) == 'object')
     383                                                        this.slider_control.slider('option', 'max',this.former_duration);
     384                                                if(wrapper.find(".remaining_time").is('.remaining'))
     385                                                        wrapper.find(".remaining_time").html('-'+duration);
     386                                                                else
     387                                                                        wrapper.find(".remaining_time").html(duration);
     388                                                wrapper.find(".elapsed_time").html(ms_second_to_time(this.getStatus().time || 0));
     389                                        }
     390                                        if(options.isVideo){
    392391                                                var ratio_video = clip.metaData.width/clip.metaData.height;
    393392                                                        wrapper[0].ratio = ratio_video;
     
    413412                                                        }
    414413                                        }
    415                                         if(typeof(clip.duration) != 'undefined'){
    416                                                 var duration = ms_second_to_time(clip.duration);
    417                                                 if(wrapper.find(".remaining_time").is('.remaining'))
    418                                                         wrapper.find(".remaining_time").html('-'+duration);
    419                                                                 else
    420                                                                         wrapper.find(".remaining_time").html(duration);
    421                                                                 wrapper.find(".elapsed_time").html(ms_second_to_time(0));
    422                                                                 this.former_duration = clip.duration;
    423                                                                 wrapper.flow_resize_controls();
    424                                         }
    425                                         if(this.forceplayformetadata){
    426                                                 this.forceplayformetadata = false;
    427                                                 if(this.forcemuteformetadata){
    428                                                         this.forcemuteformetadata = false;
    429                                                         this.unmute();
    430                                                 }
    431                                                 this.pause();
    432                                         }
     414                                        wrapper.flow_resize_controls();
    433415                                    },
    434416                                    onLastSecond:function(){},
    435417                                    onBeforeFinish: function(clip) {},
    436418                                onFinish:function(clip){
     419                                        clearInterval(this.timer);
    437420                                        if(clip.looped) {this.play(clip);}
    438                                         else wrapper.flow_play_pause('stop',options);
     421                                        else{
     422                                                var wrapper = $(this.getParent()).parents('.media_wrapper');
     423                                                var duration = ms_second_to_time(this.former_duration);
     424                                                wrapper.find(".remaining_time").html(duration);
     425                                                wrapper.find(".elapsed_time").html('00:00');
     426                                                if(typeof(this.slider_control) == 'object'){
     427                                                        this.slider_control.slider('value', 0);
     428                                                }
     429                                                wrapper.flow_play_pause('stop',wrapper[0].options);
     430                                                wrapper.flow_resize_controls();
     431                                        }
    439432                                },
    440433                                    onPause:function(clip){
    441                                         wrapper.flow_play_pause('pause',options);
     434                                        var wrapper = $(this.getParent()).parents('.media_wrapper');
     435                                        wrapper.flow_play_pause('pause',wrapper[0].options);
    442436                                },
    443437                                onResume:function(clip){
    444                                         if((clip.duration != 'undefined') && (clip.duration != this.former_duration)){
    445                                                 this.former_duration = clip.duration;
    446                                                 var duration = ms_second_to_time(this.former_duration);
    447                                                 if(typeof(this.slider_control) == 'object')
    448                                                         this.slider_control.slider('option', 'max',this.former_duration);
    449                                                 if(wrapper.find(".remaining_time").is('.remaining'))
    450                                                         wrapper.find(".remaining_time").html('-'+duration);
    451                                                                 else
    452                                                                         wrapper.find(".remaining_time").html(duration);
    453                                                 wrapper.find(".elapsed_time").html(ms_second_to_time(this.getStatus().time || 0));
    454                                                                 wrapper.flow_resize_controls();
    455                                         }
    456                                         wrapper.flow_play_pause('play',options);
     438                                        var wrapper = $(this.getParent()).parents('.media_wrapper');
     439                                        wrapper.flow_resize_controls();
     440                                        wrapper.flow_play_pause('play',wrapper[0].options);
    457441                                },
    458442                                onBeforeSeek:function(clip,time){
    459443                                        this.former_time = this.getStatus().time;
    460                                                         wrapper.addClass('seeking').find('.play_pause_button').attr('title',ms_player_lang.bouton_seeking);
     444                                        $(this.getParent()).parents('.media_wrapper').addClass('seeking').find('.play_pause_button').attr('title',ms_player_lang.bouton_seeking);
    461445                                                        if(this.isPlaying()) clip.status = 'playing';
    462446                                                        else if(this.isPaused()) clip.status = 'paused';
    463447                                },
    464448                                onSeek:function(clip,time){
    465                                         var time_affiche = ms_second_to_time(time);
     449                                        var wrapper = $(this.getParent()).parents('.media_wrapper'),
     450                                                time_affiche = ms_second_to_time(time);
    466451                                        wrapper.removeClass('seeking');
    467452                                        if(this.former_time < time)
    468                                                 wrapper.ms_messages('seek_to',ms_player_lang.statut_seek_to+' '+time_affiche,options);
     453                                                wrapper.ms_messages('seek_to',ms_player_lang.statut_seek_to+' '+time_affiche,wrapper[0].options);
    469454                                        else
    470                                                 wrapper.ms_messages('seek_to',ms_player_lang.statut_seek_back+' '+time_affiche,options);
     455                                                wrapper.ms_messages('seek_to',ms_player_lang.statut_seek_back+' '+time_affiche,wrapper[0].options);
    471456                                        if(clip.status == 'paused')
    472457                                                                wrapper.find('.play_pause_button').removeClass('pause').attr('title',ms_player_lang.bouton_pause);
     
    487472                                },
    488473                                onStop:function(){
    489                                         wrapper.flow_play_pause('stop',options);
     474                                        var wrapper = $(this.getParent()).parents('.media_wrapper');
     475                                        wrapper.flow_play_pause('stop',wrapper[0].options);
    490476                                },
    491477                                onUpdate:function(clip){},
     
    506492                                }
    507493                            };
    508 
     494                               
    509495                            wrapper.find('.flowplayer').flowplayer({
    510496                                cachebusting: $.browser.msie,
     
    514500                                allowfullscreen: allowfullscreen,
    515501                                onFail: function() {
    516                                         wrapper.removeClass('loading').addClass('error').css('background-color','inherit').find('.controls').detach();
     502                                        var wrapper = $(this.getParent()).parents('.media_wrapper');
     503                                        wrapper.removeClass('loading').addClass('player_error').css('background-color','inherit').find('.controls').detach();
    517504                                        wrapper.find('.html5_cover').css('background-color','#ffffff').find('.img').fadeTo('slow', 0.4);
    518                                         wrapper.find('.flowplayer').css('position','relative').html(options.flasherror);
     505                                        wrapper.find('.flowplayer').css('position','relative').html(' ');
     506                                        wrapper.ms_messages('error',wrapper[0].options.flasherror);
    519507                                }
    520508                            }, media_options);
     
    560548                },
    561549                flow_change_volume : function(volume_new,slider_volume,mute,options){
    562                         if(slider && typeof(slider_volume == 'object')){
     550                        if(slider && slider_volume && typeof(slider_volume == 'object')){
    563551                                slider_volume.slider({value:volume_new});
    564                                 //$(this).ms_messages('pause',ms_player_lang.statut_pause,options);
    565552                        }
    566553                        if((volume_new <= 100) && (volume_new >= 0)){
     
    593580                         * Attention la série de isNaN est pour IE qui plante à ces endroits
    594581                         */
    595                         var buttons_right_width = 0;
     582                        var progress_back = $(this).find(".progress_back"),
     583                                progress_bar = $(this).find('.progress_bar'),
     584                                buttons_right_width = 0;
     585
    596586                    $(this).find('.buttons_right').children().each(function(){
    597587                        if($(this).is(':visible') && $(this).css('position') != 'absolute'){
    598                                 if(!isNaN(parseFloat($(this).outerWidth())))
    599                                         buttons_right_width += parseFloat($(this).outerWidth());
    600                                 if(!isNaN(parseFloat($(this).css('margin-left'))))
    601                                         buttons_right_width += parseFloat($(this).css('margin-left'));
    602                                 if(!isNaN(parseFloat($(this).css('margin-right'))))
    603                                         buttons_right_width += parseFloat($(this).css('margin-right'));
     588                                buttons_right_width += isNaN(parseFloat($(this).outerWidth())) ? 0 : parseFloat($(this).outerWidth());
     589                                buttons_right_width += isNaN(parseFloat($(this).css('margin-left'))) ? 0 : parseFloat($(this).css('margin-left'));
     590                                buttons_right_width += isNaN(parseFloat($(this).css('margin-right'))) ? 0 : parseFloat($(this).css('margin-right'));
    604591                        }
    605592                    });
     
    608595                        var width_container = $(this).width(),
    609596                                play_width = parseFloat($(this).find('.buttons_left').outerWidth());
    610                         if(!isNaN(parseFloat($(this).find('.buttons_left').css('margin-left'))))
    611                                 play_width += parseFloat($(this).find('.buttons_left').css('margin-left'));
    612                         if(!isNaN(parseFloat($(this).find('.buttons_left').css('margin-right'))))
    613                                 play_width += parseFloat($(this).find('.buttons_left').css('margin-right'));
     597                        play_width += isNaN(parseFloat($(this).find('.buttons_left').css('margin-left'))) ? 0 : parseFloat($(this).find('.buttons_left').css('margin-left'));
     598                        play_width += isNaN(parseFloat($(this).find('.buttons_left').css('margin-right'))) ? 0 : parseFloat($(this).find('.buttons_left').css('margin-right'));
    614599                       
    615600                        var sound_width = parseFloat($(this).find('.buttons_right').outerWidth());
    616                         if(!isNaN(parseFloat($(this).find('.buttons_right').css('margin-left'))))
    617                                 sound_width += parseFloat($(this).find('.buttons_right').css('margin-left'));
    618                         if(!isNaN(parseFloat($(this).find('.buttons_left').css('margin-right'))))
    619                                 sound_width += parseFloat($(this).find('.buttons_right').css('margin-right'));
     601                        sound_width += isNaN(parseFloat($(this).find('.buttons_right').css('margin-left'))) ? 0 : parseFloat($(this).find('.buttons_right').css('margin-left'));
     602                        sound_width += isNaN(parseFloat($(this).find('.buttons_left').css('margin-right'))) ? 0 : parseFloat($(this).find('.buttons_right').css('margin-right'));
    620603                       
    621604                        var progresswidth = parseFloat(width_container)-parseFloat(play_width)-parseFloat(sound_width);
    622                         if(!isNaN(parseFloat($(this).find('.progress_bar').css('border-left-width'))))
    623                                 progresswidth -= parseFloat($(this).find('.progress_bar').css('border-left-width'));
    624                         if(!isNaN(parseFloat($(this).find('.progress_bar').css('border-right-width'))))
    625                                 progresswidth -= parseFloat($(this).find('.progress_bar').css('border-right-width'));
    626                         if(!isNaN(parseFloat($(this).find('.progress_bar').css('margin-right'))))
    627                                 progresswidth -= parseFloat($(this).find('.progress_bar').css('margin-right'));
    628                         if(!isNaN(parseFloat($(this).find('.progress_bar').css('margin-left'))))
    629                                 progresswidth -= parseFloat($(this).find('.progress_bar').css('margin-left'));
    630                         if(!isNaN(parseFloat($(this).find('.progress_bar').css('margin-left'))))
    631                                 progresswidth -= parseFloat($(this).find('.progress_bar').css('padding-right'));
    632                         if(!isNaN(parseFloat($(this).find('.progress_bar').css('padding-left'))))
    633                                 progresswidth -= parseFloat($(this).find('.progress_bar').css('padding-left'));
    634                        
    635                         $(this).find('.progress_bar').width(progresswidth);
     605                        progresswidth -= isNaN(parseFloat(progress_bar.css('border-left-width'))) ? 0 : parseFloat(progress_bar.css('border-left-width'));
     606                        progresswidth -= isNaN(parseFloat(progress_bar.css('border-right-width'))) ? 0 : parseFloat(progress_bar.css('border-right-width'));
     607                        progresswidth -= isNaN(parseFloat(progress_bar.css('margin-right'))) ? 0 : parseFloat(progress_bar.css('margin-right'));
     608                        progresswidth -= isNaN(parseFloat(progress_bar.css('margin-left'))) ? 0 : parseFloat(progress_bar.css('margin-left'));
     609                        progresswidth -= isNaN(parseFloat(progress_bar.css('margin-left'))) ? 0 : parseFloat(progress_bar.css('padding-right'));
     610                        progresswidth -= isNaN(parseFloat(progress_bar.css('padding-left'))) ? 0 : parseFloat(progress_bar.css('padding-left'));
     611                       
     612                        progress_bar.width(progresswidth);
    636613
    637614                        var remaining_width = 0;
    638615                        if($(this).find(".remaining_time").is(':visible')){
    639                                 remaining_width = parseFloat($(this).find(".remaining_time").outerWidth());
    640                                 if(!isNaN(parseFloat($(this).find(".remaining_time").css('margin-left'))))
    641                                         remaining_width += parseFloat($(this).find(".remaining_time").css('margin-left'));
    642                                 if(!isNaN(parseFloat($(this).find(".remaining_time").css('margin-right'))))
    643                                         remaining_width += parseFloat($(this).find(".remaining_time").css('margin-right'));
    644                         }
     616                                remaining_width += parseFloat($(this).find(".remaining_time").outerWidth());
     617                                remaining_width += isNaN(parseFloat($(this).find(".remaining_time").css('margin-left'))) ? 0 : parseFloat($(this).find(".remaining_time").css('margin-left'));
     618                                remaining_width += isNaN(parseFloat($(this).find(".remaining_time").css('margin-right'))) ? 0 : parseFloat($(this).find(".remaining_time").css('margin-right'));
     619                                remaining_width += $.browser.msie ? 4 : 0;
     620                        }
     621                       
    645622                        var elapsed_width = parseFloat($(this).find(".elapsed_time").outerWidth());
    646                         if(!isNaN(parseFloat($(this).find(".elapsed_time").css('margin-left'))))
    647                                 elapsed_width += parseFloat($(this).find(".elapsed_time").css('margin-left'));
    648                         if(!isNaN(parseFloat($(this).find(".elapsed_time").css('margin-right'))))
    649                                 elapsed_width += parseFloat($(this).find(".elapsed_time").css('margin-right'));
     623                        elapsed_width += isNaN(parseFloat($(this).find(".elapsed_time").css('margin-left'))) ? 0 : parseFloat($(this).find(".elapsed_time").css('margin-left'));
     624                        elapsed_width += isNaN(parseFloat($(this).find(".elapsed_time").css('margin-right'))) ? 0 : parseFloat($(this).find(".elapsed_time").css('margin-right'));
    650625                       
    651626                        var progressback_width = progresswidth - elapsed_width - remaining_width;
    652                         if(!isNaN(parseFloat($(this).find(".progress_back").css('border-left-width'))))
    653                                 progressback_width -= parseFloat($(this).find(".progress_back").css('border-left-width'));
    654                         if(!isNaN(parseFloat($(this).find(".progress_back").css('border-right-width'))))
    655                                 progressback_width -= parseFloat($(this).find(".progress_back").css('border-right-width'));
    656                         if(!isNaN(parseFloat($(this).find(".progress_back").css('margin-right'))))
    657                                 progressback_width -= parseFloat($(this).find(".progress_back").css('margin-right'));
    658                         if(!isNaN(parseFloat($(this).find(".progress_back").css('margin-left'))))
    659                                 progressback_width -= parseFloat($(this).find(".progress_back").css('margin-left'));
    660                         if(!isNaN(parseFloat($(this).find(".progress_back").css('padding-right'))))
    661                                 progressback_width -= parseFloat($(this).find(".progress_back").css('padding-right'));
    662                         if(!isNaN(parseFloat($(this).find(".progress_back").css('padding-left'))))
    663                                 progressback_width -= parseFloat($(this).find(".progress_back").css('padding-left'));
     627                        progressback_width -= isNaN(parseFloat(progress_back.css('border-left-width'))) ? 0 : parseFloat(progress_back.css('border-left-width'));
     628                        progressback_width -= isNaN(parseFloat(progress_back.css('border-right-width'))) ? 0 : parseFloat(progress_back.css('border-right-width'));
     629                        progressback_width -= isNaN(parseFloat(progress_back.css('margin-right'))) ? 0 : parseFloat(progress_back.css('margin-right'));
     630                        progressback_width -= isNaN(parseFloat(progress_back.css('margin-left'))) ? 0 : parseFloat(progress_back.css('margin-left'));
     631                        progressback_width -= isNaN(parseFloat(progress_back.css('padding-right'))) ? 0 : parseFloat(progress_back.css('padding-right'));
     632                        progressback_width -= isNaN(parseFloat(progress_back.css('padding-left'))) ? 0 : parseFloat(progress_back.css('padding-left'));
    664633                       
    665634                        $(this).find('.progress_back').width(progressback_width);
    666635                        if(slider && progressback_width < 30 && !force){
    667                                 var player = $(this).find('.flowplayer').flowplayer();
    668                                 var wrapper = $(this);
     636                                var player = $(this).find('.flowplayer').flowplayer(),
     637                                        wrapper = $(this);
    669638                                player.each(function() {
    670639                                        if(typeof(this.slider_volume) == 'object'){
     
    687656                                        return;
    688657                                }
    689                                 $(this).find('.progress_back').width(progressback_width);
     658                                progress_back.width(progressback_width);
    690659                        }
    691660                }
  • plugins_spip/html5/trunk/javascript/mediaspip_player.js

    r7159 r7170  
    66 * avec fallback vers version flash pour flv/mp4/mp3/aac
    77 *
    8  * $version : 1.2.4
     8 * $version : 1.2.5
    99 * © GNU/GPL v3 - kent1 (http://kent1.info - kent1@arscenic.info)
    1010 * cf : http://www.mediaspip.net/technical-documentation/plugins-used-by-mediaspip/html5-player-video-sound-media/
     
    125125                       
    126126                        options = $.extend(defaults, options);
    127                         $(this)[0].options = options;
     127                       
    128128                        var media = $(this),
    129                                 id = $(this)[0],
    130                                 playable = false,
    131                                 wrapper = '',
    132                                 class_wrapper = '';
    133                        
    134                         if(slider) id.slider = true;
    135                        
    136                         id.percent_loaded = 0;
    137                         id.slider_control = false;
    138                         id.slider_volume = false;
    139                         if(typeof(media.attr('loop')) == 'string'){
    140                                 class_wrapper += 'loop';
    141                                 id.islooping = true;
    142                         }
    143                         else id.islooping = false;
    144                         id.messages = options.messages;
    145                        
    146                         if(id.controls) id.addcontrols = true;
    147                         id.controls = false;
    148                        
    149                         if($(this).is(':hidden')) $(this).show();
    150                         if($(this).is('audio')) options.movieSize = null;
     129                                id = media[0],
     130                                playable = false;
     131                       
     132                        if(media.is(':hidden')) $(this).show();
     133                        if(media.is('audio')) options.movieSize = null;
    151134                       
    152135                        /**
     
    154137                         */
    155138                        if(typeof(id.canPlayType) != "undefined"){
    156                                 $(this).children('source').each(function(){
     139                                media.children('source').each(function(){
    157140                                        if(($(this).attr('type') != 'video/x-flv') && (id.canPlayType($(this).attr('type')) != '')){
    158                                                 playable = true;
    159                                                 return false;
     141                                                if(($(this).attr('type').match('video/ogg') || $(this).attr('type').match('video/webm')) && /Safari/i.test(navigator.userAgent)){
     142                                                        playable = false;
     143                                                }else{
     144                                                        playable = true;
     145                                                        return false;
     146                                                }
    160147                                        }
    161148                                });
     
    169156                                if(!playable && (typeof($.fn.ms_test_fallback) == 'function')){
    170157                                        media.ms_test_fallback(options);
    171                                        
    172158                                }else{
    173                                         id.mediacanplay = id.isFullScreen = false;
    174                                         var styles = ' style="',
     159                                        var     wrapper = '',
     160                                                class_wrapper = '',
     161                                                styles = ' style="',
    175162                                                style = true,
    176163                                                control = null,
     
    179166                                                width = options.width;
    180167                                       
     168                                        id.mediacanplay = id.isFullScreen = false;
     169                                        id.options = options;
     170                                        id.percent_loaded = 0;
     171                                        id.slider_control = id.slider_volume = false;
     172                                        id.messages = options.messages;
     173                                       
     174                                        if(slider) id.slider = true;
     175                                       
     176                                        if(typeof(media.attr('loop')) == 'string'){
     177                                                class_wrapper += 'loop';
     178                                                id.islooping = true;
     179                                        }
     180                                        else id.islooping = false;
     181                                       
     182                                        if(id.controls) id.addcontrols = true;
     183                                        id.controls = false;
     184                                       
    181185                                        if(!width){
    182                                                 if(media.attr('width'))
    183                                                         width = media.attr('width');
    184                                                 else if(media.width() > 0)
    185                                                         width = media.width();
     186                                                if(media.attr('width')) width = media.attr('width');
     187                                                else if(media.width() > 0) width = media.width();
    186188                                        }
    187189                                       
    188190                                        if(!height){
    189                                                 if(media.attr('height'))
    190                                                         height = media.attr('height');
    191                                                 else if(media.height() > 0)
    192                                                         height = media.height();
     191                                                if(media.attr('height')) height = media.attr('height');
     192                                                else if(media.height() > 0) height = media.height();
    193193                                        }
    194194       
     
    280280                                       
    281281                                        id.addEventListener("error", function(e){
    282                                                 if (id.error) {
    283                                                         var error_message = false;
     282                                                if (id.error) {                                                 
    284283                                                        switch (id.error.code) {
    285                                                                 case MEDIA_ERR_ABORTED:
     284                                                                case 1:
    286285                                                                        error_message = ms_player_lang.statut_error_stopped;
    287286                                                                        break;
    288                                                                 case MEDIA_ERR_NETWORK:
     287                                                                case 2:
    289288                                                                        error_message = ms_player_lang.statut_error_network;
    290289                                                                        break;
    291                                                                 case MEDIA_ERR_DECODE:
     290                                                                case 3:
    292291                                                                        error_message = ms_player_lang.statut_error_broken;
    293292                                                                        break;
    294                                                                 case MEDIA_ERR_SRC_NOT_SUPPORTED:
     293                                                                case 4:
    295294                                                                        error_message = ms_player_lang.statut_error;
    296295                                                                        break;
     296                                                                default:
     297                                                                        error_message = ms_player_lang.statut_error;
     298                                                                        break
    297299                                                        }
    298300                                                        if(options.messages && error_message)
    299                                                                 media.ms_messages('error',ms_player_lang.statut_error);
     301                                                                media.ms_messages('error',error_message);
    300302                                                        wrapper.removeClass('loading').addClass('player_error').find('.play_pause_button').attr('title',ms_player_lang.info_erreur);
    301303                                                }
     
    303305       
    304306                                        id.addEventListener("timeupdate", function(e){
    305                                                 if(control && id.percent_loaded != 100)
    306                                                         media.ms_update_loaded(e);
     307                                                if(control && id.percent_loaded != 100) media.ms_update_loaded(e);
    307308
    308309                                                var percent_time = ms_anything_to_percent(id.currentTime,id.duration);
     
    333334       
    334335                                        id.addEventListener("progress", function(e){
    335                                                 if(control && id.percent_loaded != 100)
    336                                                         media.ms_update_loaded(e);
     336                                                if(control && id.percent_loaded != 100) media.ms_update_loaded(e);
    337337                                        },true);
    338338                                       
    339339                                        id.addEventListener("play", function(e){
    340                                                 if(control && id.percent_loaded != 100)
    341                                                         media.ms_update_loaded(e);
     340                                                if(control && id.percent_loaded != 100) media.ms_update_loaded(e);
    342341                                        },true);
    343342                                       
    344343                                        id.addEventListener("loadeddata", function(e){
    345                                                 if(control)
    346                                                         media.ms_update_loaded(e);
     344                                                if(control) media.ms_update_loaded(e);
    347345                                        },true);
    348346                                       
     
    374372                                                media.ms_fullscreen();
    375373                                                e.preventDefault();
     374                                                e.stopPropagation();
    376375                                        });
    377376                                       
     
    536535                                                max: 100,
    537536                                                range: "min",
    538                                                 start: function(event,ui){
    539                                                 },
     537                                                start: function(event,ui){},
    540538                                                slide: function(event,ui){
    541539                                                        /**
     
    781779                                container.addClass('loop');
    782780                                $(this).ms_messages('loop',ms_player_lang.statut_loop);
    783                                 if (typeof ($(this)[0]).loop == 'boolean')
     781                                if (typeof($(this)[0].loop) == 'boolean')
    784782                                        $(this)[0].loop = true;
    785783                                $(this)[0].islooping = true;
     
    787785                                $(this).attr('title',ms_player_lang.bouton_loop);
    788786                                container.removeClass('loop');
    789                                 $(this).ms_messages('unloop',ms_player_lang.statut_unloop);
     787                                $(this).removeAttr('loop').ms_messages('unloop',ms_player_lang.statut_unloop);
    790788                                if (typeof($(this)[0].loop) == 'boolean')
    791789                                        $(this)[0].loop = false;
    792790                                $(this)[0].islooping = false;
    793                                 $(this).removeAttr('loop');
    794791                        }
    795792                },
     
    866863                                        $(this).css({position:'auto',width:width_final+'px',height:window_height+'px',left:left+'px',top:'0'});
    867864                                }
    868                                 media.ms_resize_controls();
     865                                $(this).ms_resize_controls();
    869866                        }
    870867                },
     
    932929                 */
    933930                ms_messages : function(type,message){
    934                         var messages, options = $(this)[0].options;
     931                        var messages, options = $(this)[0].options,
     932                                message = '<span class="'+type+'">'+message+'</span>';
    935933
    936934                        if(!options.messages) return;
     
    938936                        if($(this).is('.media_wrapper')) messages = $(this).find('.messages');
    939937                        else messages = $(this).parents('.media_wrapper').find('.messages');
    940 
     938                       
     939                        if(messages.is(':visible')){
     940                                messages.hide();
     941                                clearTimeout(stop_message_timeout);
     942                        }
     943                       
    941944                        var fade_play = function() {
    942945                                messages.fadeOut(function(){ $(this).html(''); });
    943946                        };
    944947                       
    945                         message = '<span class="'+type+'">'+message+'</span>';
    946948                        messages.html(message);
    947949                        if(messages.is(':hidden')){
    948950                                messages.fadeIn('normal',function(){
    949                                         if(type != 'error')
    950                                                 stop_message_timeout = setTimeout(fade_play, 1500);
     951                                        if(type != 'error') stop_message_timeout = setTimeout(fade_play, 1500);
    951952                                });
    952953                        }else{
     
    10791080                                                                        volume_diff = (delta > 0) ? '0.1' : '-0.1',
    10801081                                                                        volume_new = Math.round((volume + parseFloat(volume_diff))*10)/10;
    1081                                                                 if((volume_new <= 1) && (volume_new >= 0)){
     1082                                                                if((volume_new <= 1) && (volume_new >= 0))
    10821083                                                                        $(this).find('video,audio')[0].volume = volume_new;
    1083                                                                 }
    10841084                                                        }
    10851085                                                e.preventDefault();
     1086                                                e.stopPropagation();
    10861087                                        }
    10871088                                        break;
     
    10961097                                                if(e.keyCode == 37) {
    10971098                                                        var new_percent = (pourcent_actuel >= 5) ? (pourcent_actuel - 5) : 0;
    1098                                                         $(this).find('video,audio').ms_seek_to_percent(new_percent,true);
    10991099                                                }else{
    11001100                                                        var new_percent = (pourcent_actuel > 95) ? 100 : (pourcent_actuel + 5);
    1101                                                         $(this).find('video,audio').ms_seek_to_percent(new_percent,true);
    11021101                                                }
     1102                                                $(this).find('video,audio').ms_seek_to_percent(new_percent,true);
    11031103                                                e.preventDefault();
    11041104                                                e.stopPropagation();
  • plugins_spip/html5/trunk/paquet.xml

    r7165 r7170  
    22        prefix="mediaspip_player"
    33        categorie="multimedia"
    4         version="1.2.4"
     4        version="1.2.5"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.0.99]"
Note: See TracChangeset for help on using the changeset viewer.