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

Un peu de js en moins dans les modèles

On rajoute l'option width

Affiner les calculs de redimentionnement des progress

Location:
plugins_spip/html5/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/html5/trunk/css/html5_controls.css

    r6954 r7141  
     1.spip_documents.video{display:block;}
     2
    13.media{
    24        margin:0 auto;
  • plugins_spip/html5/trunk/javascript/mediaspip_player.js

    r7139 r7141  
    176176                                                control = null,
    177177                                                bloc_messages = '';
    178                                         if(options.width) styles += 'width:'+options.width+'px;';
     178                                        if(options.width) styles += 'width:'+options.width+options.width.match('%') ? ';' : 'px;';
    179179                                        if(!options.width && media.attr('width'))
    180180                                                styles += 'width:'+media.attr('width')+'px;';
     
    463463                                        var ratio_video = id.videoWidth/id.videoHeight;
    464464                                        id.ratio = ratio_video;
    465                                         if(options.movieSize == 'adapt' && !id.isFullScreen && !media.hasClass('noresize')){
     465                                        if(options.movieSize == 'adapt' && !id.isFullScreen && !media.hasClass('noresize') && (options.movieSize != 'noresize')){
     466                                                /**
     467                                                 * En mode adapt :
     468                                                 * - on dimensionne la largeur à 100%
     469                                                 * - on dimensionne la hauteur à un ratio correspondant au ratio réel de la vidéo
     470                                                 * par rapport à la largeur du bloc parent
     471                                                 */
    466472                                                width_container = parent_width;
    467473                                                var ratio = (width_container/id.videoWidth),
    468474                                                        height_final = (id.videoHeight*ratio).toFixed();
    469                                                 wrapper.add(media).animate({height:height_final+'px',width:width_container+'px'},500,function(){
     475                                                wrapper.add(media).animate({height:height_final+'px',width:'100%'},500,function(){
    470476                                                        media.ms_resize_controls();
    471477                                                });
    472                                         }else if(!media.hasClass('noresize')){
     478                                        }else if(!media.hasClass('noresize') || options.movieSize != 'noresize'){
     479                                                /**
     480                                                 * En mode normal, on redimentionne la hauteur de la vidéo en fonction
     481                                                 * du ratio réel récupéré des métadonnées
     482                                                 */
    473483                                                var media_height = media.width()/id.ratio;
    474484                                                media.attr('height','');
     
    860870                                play_width = control.find('.buttons_left').outerWidth()+parseFloat(control.find('.buttons_left').css('margin-left'))+parseFloat(control.find('.buttons_left').css('margin-right')),
    861871                                sound_width = control.find('.buttons_right').outerWidth()+parseFloat(control.find('.buttons_right').css('margin-left'))+parseFloat(control.find('.buttons_right').css('margin-right')),
    862                                 progresswidth = parseFloat(control.width())-parseFloat(play_width)-parseFloat(sound_width) - parseFloat(control.find('.progress_bar').css('border-left-width')) - parseFloat(control.find('.progress_bar').css('border-right-width'))-parseFloat(control.find('.progress_bar').css('margin-right')) - parseFloat(control.find('.progress_bar').css('margin-left')) - parseFloat(control.find('.progress_bar').css('padding-right')) - parseFloat(control.find('.progress_bar').css('padding-left'));
    863                        
     872                                progresswidth = parseFloat(control.width())-parseFloat(play_width)-parseFloat(sound_width) - parseFloat(control.find('.progress_bar').css('border-left-width')) - parseFloat(control.find('.progress_bar').css('border-right-width'))-parseFloat(control.find('.progress_bar').css('margin-right')) - parseFloat(control.find('.progress_bar').css('margin-left')) - parseFloat(control.find('.progress_bar').css('padding-right')) - parseFloat(control.find('.progress_bar').css('padding-left'))-1;
    864873                        control.find('.progress_bar').width(progresswidth);
    865874       
    866875                        var remaining_width = control.find(".remaining_time").outerWidth()+parseFloat(control.find('.remaining_time').css('margin-left'))+parseFloat(control.find('.remaining_time').css('margin-right')),
    867876                                elapsed_width = control.find(".elapsed_time").outerWidth()+parseFloat(control.find('.elapsed_time').css('margin-left'))+parseFloat(control.find('.elapsed_time').css('margin-right')),
    868                                 progressback_width = progresswidth - elapsed_width - remaining_width - parseFloat(control.find('.progress_back').css('border-left-width')) - parseFloat(control.find('.progress_back').css('border-right-width'))-parseFloat(control.find('.progress_back').css('margin-right')) - parseFloat(control.find('.progress_back').css('margin-left')) - parseFloat(control.find('.progress_back').css('padding-right')) - parseFloat(control.find('.progress_back').css('padding-left'))-2;
     877                                progressback_width = progresswidth - elapsed_width - remaining_width - parseFloat(control.find('.progress_back').css('border-left-width')) - parseFloat(control.find('.progress_back').css('border-right-width'))-parseFloat(control.find('.progress_back').css('margin-right')) - parseFloat(control.find('.progress_back').css('margin-left')) - parseFloat(control.find('.progress_back').css('padding-right')) - parseFloat(control.find('.progress_back').css('padding-left'));
    869878                       
    870879                        if(slider && progressback_width < 0 && !force){
  • plugins_spip/html5/trunk/modeles/audio.html

    r6992 r7141  
    9595<script type="text/javascript">
    9696        var ms_player_init_#ID_DOCUMENT = function(){
    97                 $('#audio_#ID_DOCUMENT').each(function(){
    98                         if($(this).parent('.media_wrapper').size() == 0){
    99                                 $(this).ms_player_init({
    100                                         flowurl:'[(#CHEMIN{flash/flowplayer.swf}|url_absolue)]',
    101                                         flasherror:erreur_flash,
    102                                         [(#ENV{largeur}|oui)minwidth : #ENV{largeur},]
    103                                         movieSize:'adapt',[(#ENV{cookie_volume,#CONFIG{mediaspip_player/cookie_volume,non}}|=={oui}|oui)
    104                                         cookie_volume:true,][
    105                                         (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay:true,][
    106                                         (#ENV{volume}|is_numeric|oui)volume : #ENV{volume},][
    107                                         (#ENV{volume_bloque}|=={oui}|oui)volume_bloque : true,][
    108                                         (#ENV{muted}|=={oui}|oui)muted : true,][
    109                                         (#ENV{muted_bloque}|=={oui}|oui)muted_bloque : true,][
    110                                         (#ENV{boutons_caches}|oui)boutons_caches : [(#ENV{boutons_caches}|explode{','}|json_encode)],]
    111                                         volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
    112                                 });
    113                         }
    114                 });
     97                if($('#audio_#ID_DOCUMENT').parent('.media_wrapper').size() == 0){
     98                        $('#audio_#ID_DOCUMENT').ms_player_init({
     99                                flowurl:'[(#CHEMIN{flash/flowplayer.swf}|url_absolue)]',
     100                                flasherror:erreur_flash,
     101                                [(#ENV{largeur}|oui)minwidth : #ENV{largeur},]
     102                                movieSize:'adapt',[(#ENV{cookie_volume,#CONFIG{mediaspip_player/cookie_volume,non}}|=={oui}|oui)
     103                                cookie_volume:true,][
     104                                (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay:true,][
     105                                (#ENV{volume}|is_numeric|oui)volume : #ENV{volume},][
     106                                (#ENV{volume_bloque}|=={oui}|oui)volume_bloque : true,][
     107                                (#ENV{muted}|=={oui}|oui)muted : true,][
     108                                (#ENV{muted_bloque}|=={oui}|oui)muted_bloque : true,][
     109                                (#ENV{boutons_caches}|oui)boutons_caches : [(#ENV{boutons_caches}|explode{','}|json_encode)],]
     110                                volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
     111                        });
     112                }
    115113        }
    116114        $(document).ready(function(){
  • plugins_spip/html5/trunk/modeles/video.html

    r7098 r7141  
    1111        -* largeur int : La largeur par défaut (défaut 320)
    1212        -* hauteur int : La hauteur par défaut (défaut 240)
     13        -* moviesize string :
     14        -** adapt, adaptera la la vidéo à la plus grande largeur possible de l'élément parent
     15        -** null, respectera les tailles passées en paramÚtres ou la taille de la video dans la bdd ou la taille par défaut (320x240)
    1316        -* align string left|right|center : L'alignement par défaut
    1417        -* volume int : Un nombre de 0 à 100 correspondant le pourcentage
     
    2124<BOUCLE_tous(DOCUMENTS types_documents){id_document}{tout}>[
    2225(#REM) on trouvera plusieurs variable de hauteur/largeur
    23 - les balises #HAUTEUR et #LARGEUR
    24 - #ENV{hauteur} et {largeur} correspondant <emb|hauteur=xx...>
    25 - #GET{hauteur} et #GET{largeur} correspondent prioritairement a #ENV,
    26   puis #LARGEUR/HAUTEUR sauf si il y a un controleur
     26- les balises HAUTEUR et LARGEUR
     27- ENV{hauteur} et {largeur} correspondant <emb|hauteur=xx...>
     28- GET{hauteur} et GET{largeur} correspondent prioritairement a ENV,
     29  puis les balises LARGEUR/HAUTEUR sauf si il y a un controleur
    2730][
    2831(#SET{hauteur,#ENV{hauteur,#HAUTEUR}})][
     
    8689]
    8790
    88 #SET{id_document_voir, #ID_DOCUMENT}
     91[(#SET{id_document_voir, [(#ID_DOCUMENT)_][(#VAL{0}|rand{100000})]})]
    8992#SET{titre,#TITRE}
    9093[(#SET{descriptif,[(#DESCRIPTIF|PtoBR)]})]
     
    103106<BOUCLE_si_id(CONDITION){si #GET{id_document_voir}|oui}>
    104107<div class='spip_documents[ spip_documents_(#ENV{align})] video'[
    105         style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})'] id="media_#GET{id_document_voir}">
     108        style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']>
    106109        <div class="media video">
    107110                <div>
     
    111114                                (#ENV{autobuffer,#ENV{preload,metadata}}|in_array{#ARRAY{0,auto,1,metadata}}|?{[preload="(#ENV{autobuffer,#ENV{preload,metadata}})"],preload="metadata"})]][(#ENV{loop,non}|in_array{#ARRAY{0,false,1,non}}|non)
    112115                                loop="loop"][(#ENV{noresize}?{' class="noresize" ',''})][
    113                                 width="(#GET{largeur})"][
     116                                width="(#GET{largeur}|match{%}|?{'',#GET{largeur}})"][
    114117                                height="(#GET{hauteur})"][
    115                                 poster="(#GET{logo})"
    116                                 ]>
     118                                poster="(#GET{logo})"][
     119                                style="width:(#GET{largeur}|match{%}|?{#GET{largeur}})"]
     120                                >
    117121                                #SET{variantes,#ARRAY}
    118122                                <BOUCLE_variantes(DOCUMENTS){mode=conversion}{objet=document}{id_objet=#ENV{id_document,#ENV{id}}}{statut==.*}>#SET{variantes,#GET{variantes}|push{#EXTENSION}}</BOUCLE_variantes>[
     
    125129                                        <source[ type="(#EXTENSION|in_array{#ARRAY{0,mp4,1,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[;codecs=(#VIDEOCODECID)[,(#AUDIOCODECID)]]"] src="[(#FICHIER|timestamp|url_absolue)]" />
    126130                                </BOUCLE_ssdoc>[(#ENV{fichier}|oui)
    127                                 <source type="#GET{type}" src="[(#ENV{fichier}|timestamp|url_absolue)]" />][
    128                                 (#EXTENSION|in_array{[(#ARRAY|push{ogg}|push{ogv}|push{flv}|push{webm})]}|et{[(#EXTENSION|in_array{#GET{variantes}}|non)]}|oui)
    129                                         <source[ type="(#EXTENSION|in_array{#ARRAY{0,mp4,1,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[;codecs=(#VIDEOCODECID)[,(#AUDIOCODECID)]]"] src="[(#FICHIER|timestamp|url_absolue)]" />]
     131                                <source type="#GET{type}" src="[(#ENV{fichier}|timestamp|url_absolue)]" />]
     132                                <BOUCLE_doc_orig(DOCUMENTS){id_document}{tout}>
     133                                        <source[ type="(#EXTENSION|in_array{#ARRAY{0,mp4,1,m4v}}|?{'video/mp4',#MIME_TYPE}|trim)[;codecs=(#VIDEOCODECID)[,(#AUDIOCODECID)]]"] src="[(#FICHIER|timestamp|url_absolue)]" />
     134                                </BOUCLE_doc_orig>
    130135                        </video>
    131136                </div>
     
    137142</div>
    138143<script type="text/javascript">
    139         var ms_player_init_#GET{id_document_voir} = function(){
    140                 $('#video_#GET{id_document_voir}').each(function(){
    141                         if($(this).parent('.media_wrapper').size() == 0){
    142                                 $(this).ms_player_init({
    143                                         flowurl:'[(#CHEMIN{flash/flowplayer.swf}|url_absolue)]',
    144                                         flasherror:erreur_flash,[
    145                                         (#ENV{largeur}|oui)[minwidth : '(#ENV{largeur}|match{%}|?{null,#GET{largeur}})',]
    146                                         ]movieSize:'#ENV{moviesize,adapt}',[(#ENV{cookie_volume,#CONFIG{mediaspip_player/cookie_volume,non}}|=={oui}|oui),
    147                                         cookie_volume:true,][
    148                                         (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay:true,][
    149                                         (#ENV{volume}|is_numeric|oui)volume : #ENV{volume},][
    150                                         (#ENV{volume_bloque}|=={oui}|oui)volume_bloque : true,][
    151                                         (#ENV{muted}|=={oui}|oui)muted : true,][
    152                                         (#ENV{muted_bloque}|=={oui}|oui)muted_bloque : true,][
    153                                         (#ENV{boutons_caches}|oui)boutons_caches : [(#ENV{boutons_caches}|explode{','}|json_encode)],]
    154                                         volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
    155                                 });
    156                         }
    157                 });
     144        var ms_player_init_[(#GET{id_document_voir})] = function(){
     145                if($('#video_[(#GET{id_document_voir})]').parent('.media_wrapper').size() == 0){
     146                        $('#video_[(#GET{id_document_voir})]').ms_player_init({
     147                                flowurl:'[(#CHEMIN{flash/flowplayer.swf}|url_absolue)]',
     148                                flasherror:erreur_flash,[
     149                                (#ENV{largeur}|oui)[minwidth : '(#ENV{min_width}|match{%}|?{null,#ENV{min_width}})',]
     150                                ][movieSize:'(#ENV{moviesize})',][(#ENV{cookie_volume,#CONFIG{mediaspip_player/cookie_volume,non}}|=={oui}|oui),
     151                                cookie_volume:true,][
     152                                (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay:true,][
     153                                (#ENV{volume}|is_numeric|oui)volume : #ENV{volume},][
     154                                (#ENV{volume_bloque}|=={oui}|oui)volume_bloque : true,][
     155                                (#ENV{muted}|=={oui}|oui)muted : true,][
     156                                (#ENV{muted_bloque}|=={oui}|oui)muted_bloque : true,][
     157                                (#ENV{boutons_caches}|oui)boutons_caches : [(#ENV{boutons_caches}|explode{','}|json_encode)],][(#GET{largeur}|oui)
     158                                width:'[(#GET{largeur}|match{%}|?{#GET{largeur},#GET{largeur}|match{px}|?{#GET{largeur,#GET{largeur}px}}})]',
     159                                ]volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
     160                        });
     161                }
    158162        }
    159163        $(document).ready(function(){
Note: See TracChangeset for help on using the changeset viewer.