Changeset 73481 in spip-zone for _plugins_/mediaspip_player


Ignore:
Timestamp:
Jun 10, 2013, 5:08:40 PM (7 years ago)
Author:
kent1@…
Message:

Les vidéos responsive même avec le lecteur flash

Pas mal de modifs et améliorations partout

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/mediaspip_player/trunk/javascript/mediaspip_fallback_flash.js

    r69583 r73481  
    2626                                width:null,
    2727                                height:null,
     28                                ratio:null,
    2829                                poster:null,
    2930                                loop:false,
     
    3738                        },
    3839                        media = $(this),
    39                         liens = [];
    40                        
     40                        liens = [],
    4141                        options = $.extend(defaults, options);
    42                         options.isVideo = true;
    43                         options.isSound = false;
    44                        
     42
    4543                        if(media.is('audio')){
    4644                                options.isSound = true;
    4745                                options.isVideo = false;
     46                        }else{
     47                                options.isVideo = true;
     48                                options.isSound = false;
    4849                        }
    4950                       
     
    5253                        if(liens.length>0){
    5354                                var width = options.width,
    54                                         height = options.height;
     55                                        height = options.height,
     56                                        ratio = options.ratio;
    5557                               
    5658                                if(!width){
    57                                         if(media.attr('width')) width = media.attr('width');
    58                                         else if(media.width() > 0) width = media.width();
     59                                        if(!height && media.attr('width')) width = media.attr('width');
     60                                        else if(!height && media.width() > 0) width = media.width();
     61                                        else if(ratio && height)
     62                                                width = height*ratio;
    5963                                }
    6064                                if(!height){
    61                                         if(media.attr('height'))
    62                                                 height=media.attr('height');
    63                                         else if(media.height() > 0)
    64                                                 height = media.height();
     65                                        if(!width && media.attr('height'))
     66                                                height = media.attr('height').toFixed();
     67                                        else if(!width && media.height() > 0)
     68                                                height = media.height().toFixed();
     69                                        else if(ratio && width)
     70                                                height = (width/ratio).toFixed();
    6571                                }
     72                               
     73                                if(options.width && options.width == '100%')
     74                                        options.movieSize = 'adapt';
    6675                               
    6776                                if(options.poster && $(this).prev().is('img'))
     
    7180                                var wrapper = media.parents('.media_wrapper');
    7281
    73                                 var lecteur = '';
     82                                var controls = '';
    7483                                        /**
    7584                                         * Le bloc html pour afficher les messages
    7685                                         */
    77                                         lecteur += (options.messages) ? '<div class="messages" style="display:none"></div>' : '';
    78                                         lecteur += (options.poster) ? '<div class="html5_cover"></div>' : '';
    79                                         lecteur +='<div class="flowplayer"></div>';
    80                                         lecteur +='<div class="controls small">'
     86                                        controls += (options.messages) ? '<div class="messages" style="display:none"></div>' : '';
     87                                        controls += (options.poster) ? '<div class="html5_cover"></div>' : '';
     88                                        controls +='<div class="flowplayer"></div>';
     89                                        controls +='<div class="controls small">'
    8190                                        +'<div class="buttons_left">'
    8291                                                +'<span class="play_pause_button" title="'+ms_player_lang.bouton_loading+'"></span>'
     
    95104                                        +'</div>'
    96105                                        +'<div class="buttons_right">';
    97                                         lecteur += ($.inArray('volume',options.boutons_caches) == 0) ? '' : '<span class="volume_button" title="'+ms_player_lang.bouton_volume+' ('+Math.floor(options.volume*100)+'%)"></span>';
     106                                        controls += ($.inArray('volume',options.boutons_caches) == 0) ? '' : '<span class="volume_button" title="'+ms_player_lang.bouton_volume+' ('+Math.floor(options.volume*100)+'%)"></span>';
    98107                                        /**
    99108                                         * Si on a les sliders, on ajoute une div ici pour avoir un slider de volume
    100109                                         */
    101                                         lecteur += (slider && $.inArray('volume',options.boutons_caches) == '-1') ? '<span class="volume_slider_container '+options.volume_slider_orientation+'"><span class="volume_slider"></span></span>' : '';
    102                                         lecteur += ($.inArray('loop',options.boutons_caches) == '-1') ? '<span class="loop_button" title="'+ms_player_lang.bouton_loop+'"></span>' : '';
    103                                         lecteur +='</div>';
    104                                
    105                                         wrapper.html(lecteur);
     110                                        controls += (slider && $.inArray('volume',options.boutons_caches) == '-1') ? '<span class="volume_slider_container '+options.volume_slider_orientation+'"><span class="volume_slider"></span></span>' : '';
     111                                        controls += ($.inArray('loop',options.boutons_caches) == '-1') ? '<span class="loop_button" title="'+ms_player_lang.bouton_loop+'"></span>' : '';
     112                                        controls +='</div>';
     113                               
     114                                        wrapper.html(controls);
    106115
    107116                                if(options.poster && options.isSound){
     
    394403                                                                var ratio = (width_container/clip.metaData.width),
    395404                                                                        height_final = (clip.metaData.height*ratio).toFixed();
    396                                                                 wrapper.add(wrapper).animate({height:height_final+'px',width:'100%'},500,function(){
     405                                                                wrapper.animate({height:height_final+'px',width:'100%'},500,function(){
    397406                                                                        wrapper.flow_resize_controls();
    398407                                                                });
     408                                                                var handler_media_resize = function(){
     409                                                                        wrapper.css({width:'auto'}).css({height:(wrapper.parent().width()/wrapper[0].ratio)+'px'}).flow_resize_controls();
     410                                                                }
     411                                                                $(window).unbind('resize',handler_media_resize).bind('resize',handler_media_resize);
    399412                                                        }else if(!wrapper.hasClass('noresize') || options.movieSize != 'noresize'){
    400413                                                                /**
     
    582595                   
    583596                        var width_container = $(this).width(),
    584                                 play_width = parseFloat($(this).find('.buttons_left').outerWidth());
    585                         play_width += isNaN(parseFloat($(this).find('.buttons_left').css('margin-left'))) ? 0 : parseFloat($(this).find('.buttons_left').css('margin-left'));
    586                         play_width += isNaN(parseFloat($(this).find('.buttons_left').css('margin-right'))) ? 0 : parseFloat($(this).find('.buttons_left').css('margin-right'));
    587                        
    588                         var sound_width = parseFloat($(this).find('.buttons_right').outerWidth());
    589                         sound_width += isNaN(parseFloat($(this).find('.buttons_right').css('margin-left'))) ? 0 : parseFloat($(this).find('.buttons_right').css('margin-left'));
    590                         sound_width += isNaN(parseFloat($(this).find('.buttons_left').css('margin-right'))) ? 0 : parseFloat($(this).find('.buttons_right').css('margin-right'));
     597                                buttons_left = $(this).find('.buttons_left'),
     598                                buttons_right = $(this).find('.buttons_right'),
     599                                remaining_time = $(this).find(".remaining_time"),
     600                                elapsed_time = $(this).find(".elapsed_time"),
     601                                play_width = parseFloat(buttons_left.outerWidth()),
     602                                sound_width = parseFloat(buttons_right.outerWidth()),
     603                                elapsed_width = parseFloat(elapsed_time.outerWidth()),
     604                                remaining_width = 0;
     605                       
     606                        play_width += isNaN(parseFloat(buttons_left.css('margin-left'))) ? 0 : parseFloat(buttons_left.css('margin-left'));
     607                        play_width += isNaN(parseFloat(buttons_left.css('margin-right'))) ? 0 : parseFloat(buttons_left.css('margin-right'));
     608                       
     609                        sound_width += isNaN(parseFloat(buttons_right.css('margin-left'))) ? 0 : parseFloat(buttons_right.css('margin-left'));
     610                        sound_width += isNaN(parseFloat(buttons_right.css('margin-right'))) ? 0 : parseFloat(buttons_right.css('margin-right'));
    591611                       
    592612                        var progresswidth = parseFloat(width_container)-parseFloat(play_width)-parseFloat(sound_width);
     
    597617                        progresswidth -= isNaN(parseFloat(progress_bar.css('margin-left'))) ? 0 : parseFloat(progress_bar.css('padding-right'));
    598618                        progresswidth -= isNaN(parseFloat(progress_bar.css('padding-left'))) ? 0 : parseFloat(progress_bar.css('padding-left'));
    599                        
     619                        progresswidth = progresswidth - 2;
    600620                        progress_bar.width(progresswidth);
    601621
    602                         var remaining_width = 0;
    603                         if($(this).find(".remaining_time").is(':visible')){
    604                                 remaining_width += parseFloat($(this).find(".remaining_time").outerWidth());
    605                                 remaining_width += isNaN(parseFloat($(this).find(".remaining_time").css('margin-left'))) ? 0 : parseFloat($(this).find(".remaining_time").css('margin-left'));
    606                                 remaining_width += isNaN(parseFloat($(this).find(".remaining_time").css('margin-right'))) ? 0 : parseFloat($(this).find(".remaining_time").css('margin-right'));
     622                        if(remaining_time.is(':visible')){
     623                                remaining_width += parseFloat(remaining_time.outerWidth());
     624                                remaining_width += isNaN(parseFloat(remaining_time.css('margin-left'))) ? 0 : parseFloat(remaining_time.css('margin-left'));
     625                                remaining_width += isNaN(parseFloat(remaining_time.css('margin-right'))) ? 0 : parseFloat(remaining_time.css('margin-right'));
    607626                                remaining_width += $.browser.msie ? 4 : 0;
    608627                        }
    609628                       
    610                         var elapsed_width = parseFloat($(this).find(".elapsed_time").outerWidth());
    611                         elapsed_width += isNaN(parseFloat($(this).find(".elapsed_time").css('margin-left'))) ? 0 : parseFloat($(this).find(".elapsed_time").css('margin-left'));
    612                         elapsed_width += isNaN(parseFloat($(this).find(".elapsed_time").css('margin-right'))) ? 0 : parseFloat($(this).find(".elapsed_time").css('margin-right'));
     629                        elapsed_width += isNaN(parseFloat(elapsed_time.css('margin-left'))) ? 0 : parseFloat(elapsed_time.css('margin-left'));
     630                        elapsed_width += isNaN(parseFloat(elapsed_time.css('margin-right'))) ? 0 : parseFloat(elapsed_time.css('margin-right'));
    613631                       
    614632                        var progressback_width = progresswidth - elapsed_width - remaining_width;
     
    632650                                wrapper.flow_resize_controls(true);
    633651                        }else{
    634                                 if($(this).find('.remaining_time').is(':hidden') && $(this).find('.loop_button').is(':visible') && progressback_width < 30){
     652                                if(remaining_time.is(':hidden') && $(this).find('.loop_button').is(':visible') && progressback_width < 30){
    635653                                        $(this).find('.loop_button').hide();
    636654                                        $(this).flow_resize_controls(true);
    637655                                }
    638                                 else if($(this).find('.remaining_time').is(':visible') && progressback_width < 30){
    639                                         $(this).find('.remaining_time').hide();
     656                                else if(remaining_time.is(':visible') && progressback_width < 30){
     657                                        remaining_time.hide();
    640658                                        $(this).flow_resize_controls(true);
    641659                                }
    642                                 else if($(this).find('.remaining_time').is(':hidden') && progressback_width < 30){
     660                                else if(remaining_time.is(':hidden') && progressback_width < 30){
    643661                                        $(this).find('.progress_back').hide();
    644662                                        return $(this);
Note: See TracChangeset for help on using the changeset viewer.