Ignore:
Timestamp:
10/12/12 18:33:18 (7 years ago)
Author:
kent1
Message:

On commence à ajouter de nouvelles fonctionnalités, apparition des options suivantes :

  • volume int : un pourcentage du volume
  • volume_bloque boolean : bloquer le niveau de volume
  • muted boolean : true si muted à l'initialisation, false sinon
  • muted_bloque boolean : true pour rendre impossible le changement de mute
  • boutons_caches array : un tableau des boutons à ne pas afficher ['fullscreen','volume','loop']

Un peu de documentation dans le code

On évite de bloquer les touches quand ce n'est pas nécessaire

Location:
plugins_spip/html5/trunk
Files:
3 edited

Legend:

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

    r6990 r6992  
    1212 * Remplace les controles des lecteurs html5 par défaut des navigateurs
    1313 * Remplace la balise <video> par un lecteur flash si on ne peut jouer le media :
    14  * - sur Firefox si seulement la version mp4 ou flv est disponible
    15  * - sur Safari si seulement la version ogv ou ogg est disponible
     14 * - sur Firefox si seulement la version mp4 ou flv est disponible et pas de version ogv ou ogg
     15 * - sur Safari si seulement la version flv disponible et pas la mp4
    1616 * - sur IE dans tous les cas
    1717 *
     
    2424 * - autoplay boolean true/false : lit automatiquement la video ou le son (défaut : false)
    2525 * - autoload boolean true/false : précharge automatiquement la video ou le son (défaut : true)
    26  * - minwidth int
     26 * - minwidth int : La largeur minimale
    2727 * - movieSize string 'adapt' uniquement pour l'instant
    2828 * - cookie_volume boolean true/false : met dans un cookie ms_volume le niveau de volume
     
    3030 * - messages boolean : affiche ou pas des messages à même le lecteur :
    3131 *   play / pause / autres changements d'état... (defaut : true)
     32 * - volume int : un int représentant un pourcentage de volume
     33 * - volume_bloque boolean : bloquer le niveau de volume
    3234 * - volume_slider_orientation vertical|horizontal : permet de définir l'orientation du slider de volume (défaut vertical)
     35 * - muted boolean : true si muted à l'initialisation, false sinon
     36 * - muted_bloque boolean : true pour rendre impossible le changement de mute
     37 * - boutons_caches array : un tableau des boutons à ne pas afficher ['fullscreen','volume','loop']
    3338 * - messages bool : si false, n'affiche pas les messages au dessus du player lors d'actions utilisateur
    3439 */
     
    105110                       
    106111                        var defaults = {
    107                                 autoplay:false,
    108                                 autoload:true,
    109                                 minwidth : 300,
    110                                 movieSize : null,
    111                                 cookie_volume: false,
    112                                 messages: true,
    113                                 volume_slider_orientation: 'horizontal'
     112                                autoplay:false, // Lire automatiquement au chargement
     113                                autoload:true, // Précharger automatiquement au chargement
     114                                minwidth : 300, // Largeur minimale
     115                                movieSize : null,
     116                                messages: true, // Afficher ou non les messages sur le lecteur
     117                                volume: 100, // Niveau de volume au chargement
     118                                volume_bloque: false, // bloque le niveau de volume
     119                                volume_slider_orientation: 'horizontal', // Si on a les sliders, orientation du slider de volume
     120                                muted : false, // Le lecteur n'est pas mute par défaut
     121                                muted_bloque : false, // On autorise le switch mute/unmute sur le lecteur
     122                                cookie_volume: false, // Garder le niveau de volume de l'utilisateur dans un cookie
     123                                boutons_caches:[]
    114124                        };
    115125                       
     
    123133                       
    124134                        if(slider) id.slider = true;
    125 
     135                       
    126136                        id.slider_control = false;
    127137                        id.slider_volume = false;
     
    132142                        else id.islooping = false;
    133143                        id.messages = options.messages;
    134                         id.options = options;
    135144                       
    136145                        if(id.controls) id.addcontrols = true;
     
    190199                                                                +'<em class="remaining_time remaining" title="'+ms_player_lang.info_restant+'"></em>'
    191200                                                        +'</div>'
    192                                                         +'<div class="buttons_right">'
    193                                                                 +'<span class="volume_button" title="'+ms_player_lang.bouton_volume+' ('+Math.floor(id.volume*100)+'%)"></span>';
     201                                                        +'<div class="buttons_right">';
     202                                                controls += ($.inArray('volume',options.boutons_caches) == 0) ? '' : '<span class="volume_button" title="'+ms_player_lang.bouton_volume+' ('+Math.floor(id.volume*100)+'%)"></span>';
    194203               
    195204                                                /**
    196205                                                 * Si on a les sliders, on ajoute une div ici pour avoir un slider de volume
    197206                                                 */
    198                                                 controls += (slider) ? '<span class="volume_slider_container '+options.volume_slider_orientation+'"><span class="volume_slider"></span></span>' : '';
    199                                                 controls += (media.is('video')) ? '<span class="fullwindow_button" title="'+ms_player_lang.bouton_fullscreen+'"></span>' : '';
    200                                                 controls += '<span class="loop_button" title="'+ms_player_lang.bouton_loop+'"></span>';
     207                                                controls += (slider && $.inArray('volume',options.boutons_caches) == '-1') ? '<span class="volume_slider_container '+options.volume_slider_orientation+'"><span class="volume_slider"></span></span>' : '';
     208                                                controls += (media.is('video') && $.inArray('fullscreen',options.boutons_caches) == '-1') ? '<span class="fullwindow_button" title="'+ms_player_lang.bouton_fullscreen+'"></span>' : '';
     209                                                controls += ($.inArray('loop',options.boutons_caches) == '-1') ? '<span class="loop_button" title="'+ms_player_lang.bouton_loop+'"></span>' : '';
    201210                                                controls +='</div>';
    202211                                                +'</div>';
     
    308317                                                }
    309318                                        }, true);
    310        
     319
    311320                                        id.addEventListener("volumechange", function(e){
    312321                                                media.ms_volume(false);
     
    364373                                                        media.ms_seek_to(e.clientX,slider);
    365374                                                });
    366                
    367                                                 control.find('.volume_button').click(function(e){
    368                                                         media.ms_volume(true);
    369                                                 });
    370                
    371                                                 control.find('.fullwindow_button').click(function(e){
    372                                                         media.ms_fullscreen();
    373                                                 });
    374375                                               
    375                                                 control.find('.loop_button').click(function(e){
    376                                                         media.ms_loop();
    377                                                 });
    378                                        
     376                                                if($.inArray('volume',options.boutons_caches) == '-1' && !options.muted_bloque){
     377                                                        control.find('.volume_button').click(function(e){
     378                                                                media.ms_volume(true);
     379                                                        });
     380                                                }
     381                                               
     382                                                if($.inArray('fullscreen',options.boutons_caches) == '-1'){
     383                                                        control.find('.fullwindow_button').click(function(e){
     384                                                                media.ms_fullscreen();
     385                                                        });
     386                                                }
     387                                               
     388                                                if($.inArray('loop',options.boutons_caches) == '-1'){
     389                                                        control.find('.loop_button').click(function(e){
     390                                                                media.ms_loop();
     391                                                        });
     392                                                }
    379393                                                remaining_time.click(function(e){
    380394                                                        if(!id.isstream){
     
    403417                                         * - si le volume est "muted", l'action ne fait rien sur le volume;
    404418                                         */
    405                                         if(typeof($.fn.mousewheel != "undefined")){
     419                                        if(!options.volume_bloque && typeof($.fn.mousewheel != "undefined")){
    406420                                                wrapper.mousewheel(function(event, delta) {
    407421                                                        if(!id.muted){
     
    433447
    434448                                id.mediacanplay = true;
     449
    435450                                var width_container = media.width(), parent_width = wrapper.parent().width();
    436451                               
     
    489504                                                }
    490505                                        });
    491                                         id.slider_volume = control.find('.volume_slider').slider({
    492                                                 value:Math.floor(id.volume*100),
    493                                                 orientation: options.volume_slider_orientation,
    494                                                 min:0,
    495                                                 max:100,
    496                                                 range: "min",
    497                                                 slide: function(event,ui){
    498                                                         /**
    499                                                          * On change le volume
    500                                                          */
    501                                                         var volume_new = ui.value/100;
    502                                                         if((volume_new <= 1) && (volume_new >= 0)) id.volume = volume_new;
    503                                                 },
    504                                                 stop: function(event,ui){
    505                                                         /**
    506                                                          * On change le volume et on le sauvegarde dans le cookie si nécessaire
    507                                                          */
    508                                                         var volume_new = ui.value/100;
    509                                                         if((volume_new <= 1) && (volume_new >= 0)) id.volume = volume_new;
    510                                                 }
    511                                         });
     506
     507                                        if($.inArray('volume',options.boutons_caches) == '-1'){
     508                                                id.slider_volume = control.find('.volume_slider').slider({
     509                                                        value:Math.floor(id.volume*100),
     510                                                        orientation: options.volume_slider_orientation,
     511                                                        min:0,
     512                                                        max:100,
     513                                                        disabled: (options.volume_bloque) ? true : false,
     514                                                        range: "min",
     515                                                        slide: function(event,ui){
     516                                                                /**
     517                                                                 * On change le volume
     518                                                                 */
     519                                                                var volume_new = ui.value/100;
     520                                                                if((volume_new <= 1) && (volume_new >= 0)) id.volume = volume_new;
     521                                                        },
     522                                                        stop: function(event,ui){
     523                                                                /**
     524                                                                 * On change le volume et on le sauvegarde dans le cookie si nécessaire
     525                                                                 */
     526                                                                var volume_new = ui.value/100;
     527                                                                if((volume_new <= 1) && (volume_new >= 0)) id.volume = volume_new;
     528                                                        }
     529                                                });
     530                                        }
    512531                                        media.ms_resize_controls();
    513532                                }
    514                                 if(cookies && options.cookie_volume){
     533                               
     534                                id.volume = Math.floor(parseInt(options.volume)/100);
     535                                if(options.muted)
     536                                        media.ms_volume(true);
     537
     538                                if(!options.volume_bloque && !options.volume && cookies && options.cookie_volume){
    515539                                        var volume_cookie = parseFloat($.cookie('ms_volume'));
    516540                                        if((volume_cookie >= 0) && (volume_cookie <= 1))
     
    531555                                        $(this).parent('.media_wrapper').removeClass('paused').find('.play_pause_button').addClass('pause').attr('title',ms_player_lang.bouton_pause);
    532556                                        $(this).ms_messages('play',ms_player_lang.statut_play);
    533                                         if(cookies && options.cookie_volume){
     557                                        if(!options.volume_bloque && cookies && options.cookie_volume){
    534558                                                var volume_cookie = parseFloat($.cookie('ms_volume'));
    535559                                                if((volume_cookie >= 0) && (volume_cookie <= 1))
     
    542566                                        $(this).parent('.media_wrapper').removeClass('paused').find('.play_pause_button').addClass('pause').attr('title',ms_player_lang.bouton_pause);
    543567                                        $(this)[0].currentTime = $(this)[0].startTime ? $(this)[0].startTime : '0';
    544                                         if(cookies && options.cookie_volume){
     568                                        if(!options.volume_bloque && cookies && options.cookie_volume){
    545569                                                var volume_cookie = parseFloat($.cookie('ms_volume'));
    546570                                                if((volume_cookie >= 0) && (volume_cookie <= 1))
     
    573597                                                $(this)[0].muted = false;
    574598                                                if($(this)[0].slider && (typeof($(this)[0].slider_volume) == 'object'))
    575                                                         $(this)[0].slider_volume.slider('value',($(this)[0].volume*100)).slider('enable');
     599                                                        $(this)[0].slider_volume.slider('value',($(this)[0].volume*100)).slider((options.volume_bloque) ? 'disable' : 'enable');
    576600                                                if(cookies && options.cookie_volume)
    577601                                                        $.cookie('ms_volume_muted',null);
     
    589613                                                sound_button = control.find('.volume_button'),
    590614                                                class_remove = sound_button.attr('class').match('volume_button_[0-9]{1,3}');
     615                                        if(options.volume_bloque && options.volume) volume = $(this)[0].volume = (options.volume) ? $(this)[0].volume : options.volume;
    591616                                        if((volume <= 0.66) && (volume > 0.33)){
    592617                                                if(class_remove != null)
     
    610635                                        if($(this)[0].slider && (typeof($(this)[0].slider_volume) == 'object')){
    611636                                                $(this)[0].slider_volume.slider('value',($(this)[0].volume*100));
    612                                                 $(this)[0].slider_volume.slider('enable');
     637                                                $(this)[0].slider_volume.slider((options.volume_bloque) ? 'disable' : 'enable');
    613638                                        }
    614639                                        $(this).ms_messages('volume',volume_title);
     
    873898                                                $(this).parent('div').ms_fallback_flash({
    874899                                                        flowurl:options.flowurl,
    875                                                         flasherror:options.flasherror?options.flasherror:'',
     900                                                        flasherror:options.flasherror ? options.flasherror : '',
    876901                                                        autoplay:options.autoplay,
    877902                                                        autoload:options.autoload,
     
    923948                                        $('video').each(function(){
    924949                                        if (!fullScreenApi.supportsFullScreen) {
    925                                                 if($(this)[0].isFullScreen)
     950                                                if($(this)[0].isFullScreen){
    926951                                                        $(this).ms_fullscreen();
     952                                                        e.preventDefault();
     953                                                }
    927954                                        }
    928955                                });
     
    934961                                     */
    935962                                        $('video').each(function(){
    936                                         if(!$(this)[0].isFullScreen && (($('input:focus,textarea:focus').size() == 0) && (!$(this)[0].paused && !$(this)[0].ended)))
     963                                        if(!$(this)[0].isFullScreen && (($('input:focus,textarea:focus').size() == 0) && (!$(this)[0].paused && !$(this)[0].ended))){
    937964                                                $(this).ms_fullscreen();
     965                                                e.preventDefault();
     966                                        }
    938967                                });
    939968                                        break;
     
    944973                                     */
    945974                                        $('video,audio').each(function(){
    946                                         if((($('input:focus,textarea:focus').size() == 0) && (!$(this)[0].paused && !$(this)[0].ended)))
     975                                        if((($('input:focus,textarea:focus').size() == 0) && (!$(this)[0].paused && !$(this)[0].ended))){
    947976                                                $(this).ms_loop();
     977                                                e.preventDefault();
     978                                        }
    948979                                });
    949980                                        break;
     
    954985                                      */
    955986                                        if(media_hover){
    956                                         if(media_hover[0].isFullScreen||($('input:focus,textarea:focus').size() == 0))
     987                                        if(media_hover[0].isFullScreen||($('input:focus,textarea:focus').size() == 0)){
    957988                                                media_hover.ms_play_pause();
     989                                                e.preventDefault();
     990                                        }
    958991                                }
    959992                                $('video,audio').each(function(){
     
    961994                                                media_hover = $(this);
    962995                                                media_hover.ms_play_pause();
     996                                                e.preventDefault();
    963997                                        }
    964998                                });
     
    9801014                                                                }
    9811015                                                        }
     1016                                                e.preventDefault();
    9821017                                        }
    9831018                                }
     
    9931028                                                                }
    9941029                                                        }
     1030                                                e.preventDefault();
    9951031                                        }
    9961032                                });
     
    10121048                                                        media_hover.ms_seek_to_percent(new_percent,media_hover[0].slider,true);
    10131049                                                }
     1050                                                e.preventDefault();
    10141051                                        }
    10151052                                }
     
    10241061                                                        $(this).ms_seek_to_percent(new_percent,$(this)[0].slider,true);
    10251062                                                }
     1063                                                e.preventDefault();
    10261064                                        }
    10271065                                });
    10281066                                break;
    1029                                
    1030                         }
    1031                         e.preventDefault();
     1067                        }
    10321068                }
    10331069        });
  • plugins_spip/html5/trunk/modeles/audio.html

    r6990 r6992  
    1111        -* largeur int : La largeur par défaut (défaut 350)
    1212        -* hauteur int : La hauteur par défaut (défaut 40)
    13         -* align string left|right|center :L'alignement par défaut
     13        -* align string left|right|center : L'alignement par défaut
     14        -* cookie_volume string oui : garde le volume dans un cookie pour tous les lecteurs
     15        -* volume int : Un nombre de 0 à 100 correspondant le pourcentage
     16        -* volume_bloque oui : si oui le niveau de volume restera bloqué
    1417        -* volume_slider_orientation string vertical|horizontal : l'orientation du slider de volume
     18        -* muted oui : si oui le lecteur sera sur mute à l'initialisation
     19        -* muted_bloque oui : si oui l'utilisateur ne peut switcher entre mute et unmute
     20        -* boutons_caches string : liste de boutons séparés par des virgule (ex: fullscreen,loop,volume)
    1521]
    1622<BOUCLE_tous(DOCUMENTS types_documents){id_document=#ID}{tout}>
     
    95101                                        flasherror:erreur_flash,
    96102                                        [(#ENV{largeur}|oui)minwidth : #ENV{largeur},]
    97                                         movieSize:'adapt',[(#CONFIG{mediaspip_player/cookie_volume}|=={oui}|oui)
     103                                        movieSize:'adapt',[(#ENV{cookie_volume,#CONFIG{mediaspip_player/cookie_volume,non}}|=={oui}|oui)
    98104                                        cookie_volume:true,][
    99                                         (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay: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)],]
    100111                                        volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
    101112                                });
  • plugins_spip/html5/trunk/modeles/video.html

    r6990 r6992  
    1212        -* hauteur int : La hauteur par défaut (défaut 240)
    1313        -* align string left|right|center : L'alignement par défaut
     14        -* volume int : Un nombre de 0 à 100 correspondant le pourcentage
     15        -* volume_bloque oui : si oui le niveau de volume restera bloqué
    1416        -* volume_slider_orientation string vertical|horizontal : l'orientation du slider de volume
     17        -* muted oui : si oui le lecteur sera sur mute à l'initialisation
     18        -* muted_bloque oui : si oui l'utilisateur ne peut switcher entre mute et unmute
     19        -* boutons_caches string : liste de boutons séparés par des virgule (ex: fullscreen,loop,volume)
    1520]
    1621<BOUCLE_tous(DOCUMENTS types_documents){id_document}{tout}>[
     
    117122                                        flasherror:erreur_flash,[
    118123                                        (#ENV{largeur}|oui)[minwidth : '(#ENV{largeur})',]
    119                                         ]movieSize:'adapt',[(#CONFIG{mediaspip_player/cookie_volume}|=={oui}|oui),
     124                                        ]movieSize:'adapt',[(#ENV{cookie_volume,#CONFIG{mediaspip_player/cookie_volume,non}}|=={oui}|oui),
    120125                                        cookie_volume:true,][
    121                                         (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay:true,]
     126                                        (#ENV{autoplay,#ENV{autostart,non}}|in_array{#ARRAY{0,false,1,non}}|non)autoplay:true,][
     127                                        (#ENV{volume}|is_numeric|oui)volume : #ENV{volume},][
     128                                        (#ENV{volume_bloque}|=={oui}|oui)volume_bloque : true,][
     129                                        (#ENV{muted}|=={oui}|oui)muted : true,][
     130                                        (#ENV{muted_bloque}|=={oui}|oui)muted_bloque : true,][
     131                                        (#ENV{boutons_caches}|oui)boutons_caches : [(#ENV{boutons_caches}|explode{','}|json_encode)],]
    122132                                        volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
    123133                                });
Note: See TracChangeset for help on using the changeset viewer.