Changeset 6600 for plugins_spip/html5


Ignore:
Timestamp:
06/20/12 13:23:14 (8 years ago)
Author:
kent1
Message:

corrections sur le env logo du modèle

explications dans les modèles

Amélioration du fullscreen sur les vidéos

Location:
plugins_spip/html5/trunk
Files:
3 edited

Legend:

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

    r6407 r6600  
    2727 * - volume_slider_orientation vertical|horizontal : permet de définir l'orientation du slider de volume (défaut vertical)
    2828 */
    29 
     29   
    3030(function($) {
    31         var media_hover = false;
    32         var slider = false;
    33         var stop_message_timeout = false;
    3431       
    3532        /**
    3633         * Vérifier si on a accÚs à l'API fullscreen de html5
     34         * http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
    3735         */
    3836        var fullScreenApi = {
     
    4341                        fullScreenEventName: '',
    4442                        prefix: ''
    45         },
    46         browserPrefixes = 'webkit moz o ms khtml'.split(' ');
     43        },browserPrefixes = 'webkit moz o ms khtml'.split(' ');
    4744
    4845        if (typeof document.cancelFullScreen != 'undefined') {
     
    5956                }
    6057        }
     58        // update methods to do something useful
     59        if (fullScreenApi.supportsFullScreen) {
     60            fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
     61         
     62                fullScreenApi.isFullScreen = function() {
     63                    switch (this.prefix) {
     64                        case '':
     65                        return document.fullScreen;
     66                    case 'webkit':
     67                        return document.webkitIsFullScreen;
     68                    default:
     69                        return document[this.prefix + 'FullScreen'];
     70                }
     71            }
     72            fullScreenApi.requestFullScreen = function(el) {
     73                return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
     74            }
     75            fullScreenApi.cancelFullScreen = function(el) {
     76                return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
     77            }
     78        }
     79       
     80        window.fullScreenApi = fullScreenApi;
     81       
     82        var media_hover = false;
     83        var slider = false;
     84        var stop_message_timeout = false;
    6185       
    6286        /**
     
    192216                                                var control = null;
    193217                                        }
    194                                         if($(this).width() > options.minwidth){
     218                                        if(options.minwidth && $(this).width() > options.minwidth){
    195219                                                wrapper.width($(this).width());
    196                                         }else{
     220                                        }else if(options.minwidth){
    197221                                                wrapper.width(options.minwidth);
    198222                                        }
     
    216240                                                        media.prev().width(options.minwidth);
    217241                                                        media.prev().height(img_height*ratio);
    218        
    219242                                                }
    220243                                                media.prev().wrap('<div class="html5_logo"></div>');
     
    228251                                        id.addEventListener("canplay", function(e){
    229252                                                media.mediaspip_start(options,'canplay');
     253                                        }, true);
     254                                       
     255                                        document.addEventListener(fullScreenApi.fullScreenEventName, function(e){
     256                                                if(id.isFullScreen && !fullScreenApi.isFullScreen()){
     257                                                        media.mediaspip_fullscreen(control);
     258                                                }
     259                                                media.mediaspip_resize_controls();
    230260                                        }, true);
    231261                                       
     
    747777                        if(id.mediacanplay){
    748778                                if(!id.isFullScreen){
     779                                        id.videoOrigWidth = media.width();
     780                                        id.videoOrigHeight = media.height();
     781                                        id_container.origWidth = container.width();
     782                                        id_container.origHeight = container.height();
    749783                                        if (fullScreenApi.supportsFullScreen) {
    750784                                                fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
    751                                         (fullScreenApi.prefix === '') ? $(this)[0].requestFullScreen() : $(this)[0][fullScreenApi.prefix + 'RequestFullScreen']();
     785                                                (fullScreenApi.prefix === '') ? container[0].requestFullScreen() : container[0][fullScreenApi.prefix + 'RequestFullScreen']();
     786                                                media.mediaspip_fullscreen_resize();
     787                                                media.mediaspip_resize_controls();
    752788                                        }else{
    753                                                 id.videoOrigWidth = media.width();
    754                                                 id.videoOrigHeight = media.height();
    755                                                 id_container.origWidth = container.width();
    756                                                 id_container.origHeight = container.height();
    757789                                                $('body').css({'overflow' : 'hidden', '-moz-user-select' : 'none'});
    758790                                                media.mediaspip_fullscreen_resize();
     
    769801                                        if (fullScreenApi.supportsFullScreen) {
    770802                                                (fullScreenApi.prefix === '') ? document.cancelFullScreen() : document[fullScreenApi.prefix + 'CancelFullScreen']();
    771                                         }else{
    772                                                 container.bind('fullscreen_resize',function(){
    773                                                         $(this).removeClass('media_wrapper_full').animate({width:id_container.origWidth+'px',height:id_container.origHeight+'px',left:'0',top:'0'},500,function(){
    774                                                                 media.mediaspip_resize_controls();
    775                                                         });
     803                                        }
     804                                        container.bind('fullscreen_resize',function(){
     805                                                $(this).removeClass('media_wrapper_full').animate({width:id_container.origWidth+'px',height:id_container.origHeight+'px',left:'0',top:'0'},500,function(){
     806                                                        media.mediaspip_resize_controls();
    776807                                                });
    777                                                 $(this).bind('fullscreen_resize',function(){
    778                                                         $(this).animate({width:id.videoOrigWidth+'px',height:id.videoOrigHeight+'px',left:'0',top:'0'},500,function(){
    779                                                                 media.mediaspip_resize_controls();
    780                                                         });
     808                                        });
     809                                        $(this).bind('fullscreen_resize',function(){
     810                                                $(this).animate({width:id.videoOrigWidth+'px',height:id.videoOrigHeight+'px',left:'0',top:'0'},500,function(){
     811                                                        media.mediaspip_resize_controls();
    781812                                                });
    782                                                 $(window).unbind('resize');
    783                                                 $('body').css({'overflow' : 'inherit', '-moz-user-select' : 'inherit'});
    784                                                 width_orig = id.videoOrigWidth;
    785                                                 height_orig = id.videoOrigHeight;
    786                                                 container.add($(this)).trigger('fullscreen_resize').unbind('fullscreen_resize');
    787                                         }
     813                                        });
     814                                        $(window).unbind('resize');
     815                                        $('body').css({'overflow' : 'inherit', '-moz-user-select' : 'inherit'});
     816                                        width_orig = id.videoOrigWidth;
     817                                        height_orig = id.videoOrigHeight;
     818                                        container.add($(this)).trigger('fullscreen_resize').unbind('fullscreen_resize');
    788819                                        container.removeClass('media_wrapper_full');
    789820                                        container.find('.controls').addClass('small');
     
    807838                        container.css({width:'100%',height:'100%',left:'0',top:'0'});
    808839       
    809                         if(width_final > window_width){
    810                                 var ratio = (window_width/id.videoWidth);
    811                                 var height_final = (id.videoHeight*ratio).toFixed();
    812                                 var top = ((window_height-height_final)/2).toFixed();
    813                                 $(this).css({position:'absolute',width:window_width+'px',height:height_final+'px',top:top+'px',left:'0'});
     840                        if (fullScreenApi.supportsFullScreen) {
     841                                $(this).css({width:'100%',height:'100%'});
    814842                        }else{
    815                                 var left = ((window_width-width_final)/2).toFixed();
    816                                 $(this).css({position:'auto',width:width_final+'px',height:window_height+'px',left:left+'px',top:'0'});
     843                                if(width_final > window_width){
     844                                        var ratio = (window_width/id.videoWidth);
     845                                        var height_final = (id.videoHeight*ratio).toFixed();
     846                                        var top = ((window_height-height_final)/2).toFixed();
     847                                        $(this).css({position:'absolute',width:window_width+'px',height:height_final+'px',top:top+'px',left:'0'});
     848                                }else{
     849                                        var left = ((window_width-width_final)/2).toFixed();
     850                                        $(this).css({position:'auto',width:width_final+'px',height:window_height+'px',left:left+'px',top:'0'});
     851                                }
    817852                        }
    818853                },
     
    918953                $('video').each(function(){
    919954                        if($(this)[0].isFullScreen){
     955                                e.preventDefault();
    920956                                $(this).mediaspip_fullscreen($(this).parent().find('.controls'));
    921                                 return;
     957                                return false;
    922958                        }
    923959                });
    924960            }
    925             /**
    926              * Touche enter
    927              * Toggle le fullscreen
    928              */
    929            
    930961            /**
    931962             * Touche f
  • plugins_spip/html5/trunk/modeles/audio.html

    r6599 r6600  
    44       
    55        Les paramÚtres possibles :
    6         -* controls "non"       N'affichera pas les controles si la valeur est non ou false
    7         -* autoplay "tout sauf non ou false"    La video se lira dÚs qu'elle le pourra si la valeur est autre que non ou false
    8         -* autobuffer|preload non|auto|metadata La méthode de preload : auto chargera l'ensemble de la video, metadatas s'arrêtera aux metadatas, non ne chargera rien
    9         -* loop "tout sauf non ou false" La video se lira en boucle
    10         -* largeur int La largeur par défaut (défaut 350)
    11         -* hauteur int La hauteur par défaut (défaut 40)
    12         -* align left|right|center      L'alignement par défaut
     6        -* logo string : le chemin vers un logo spécifique
     7        -* controls string "non" : N'affichera pas les controles si la valeur est non ou false
     8        -* autoplay string "tout sauf non ou false"     : La video se lira dÚs qu'elle le pourra si la valeur est autre que non ou false
     9        -* autobuffer|preload string non|auto|metadata : La méthode de preload : auto chargera l'ensemble de la video, metadatas s'arrêtera aux metadatas, non ne chargera rien
     10        -* loop string "tout sauf non ou false" : La video se lira en boucle
     11        -* largeur int : La largeur par défaut (défaut 350)
     12        -* hauteur int : La hauteur par défaut (défaut 40)
     13        -* align string left|right|center :L'alignement par défaut
     14        -* volume_slider_orientation string vertical|horizontal : l'orientation du slider de volume
    1315]
    1416<BOUCLE_tous(DOCUMENTS types_documents){id_document=#ID}{tout}>
     
    3234]
    3335
    34 [(#SET{logo,[(#ENV{logo,#LOGO_DOCUMENT}|image_passe_partout{#GET{largeur},#GET{hauteur}}|image_recadre{#GET{largeur},#GET{hauteur}}|inserer_attribut{class,''})]})]
     36[(#SET{logo,[(#ENV{logo,#LOGO_DOCUMENT|extraire_attribut{src}}|image_passe_partout{#GET{largeur},#GET{hauteur}}|image_recadre{#GET{largeur},#GET{hauteur}}|inserer_attribut{class,''})]})]
    3537
    3638[(#GET{hauteur}|=={0}|oui)
     
    8890                                        flasherror:erreur_flash,
    8991                                        [(#ENV{largeur}|oui)minwidth : #ENV{largeur},]
    90                                         movieSize:'adapt'[(#CONFIG{mediaspip_player/cookie_volume}|=={oui}|oui),
    91                                         cookie_volume:true][(#CONFIG{mediaspip_player/slider_volume_orientation}|=={horizontal}|oui),
    92                                         volume_slider_orientation:'horizontal']
     92                                        movieSize:'adapt',[(#CONFIG{mediaspip_player/cookie_volume}|=={oui}|oui)
     93                                        cookie_volume:true,]
     94                                        volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
    9395                                });
    9496                        }
  • plugins_spip/html5/trunk/modeles/video.html

    r6599 r6600  
    44       
    55        Les paramÚtres possibles :
    6         -* controls "non"       N'affichera pas les controles si la valeur est non ou false
    7         -* autoplay "tout sauf non ou false"    La video se lira dÚs qu'elle le pourra si la valeur est autre que non ou false
    8         -* autobuffer|preload non|auto|metadata La méthode de preload : auto chargera l'ensemble de la video, metadatas s'arrêtera aux metadatas, non ne chargera rien
    9         -* loop "tout sauf non ou false" La video se lira en boucle
    10         -* largeur int La largeur par défaut (défaut 320)
    11         -* hauteur int La hauteur par défaut (défaut 240)
    12         -* align left|right|center      L'alignement par défaut
     6        -* logo string : le chemin vers un logo spécifique
     7        -* controls string "non" : N'affichera pas les controles si la valeur est non ou false
     8        -* autoplay string "tout sauf non ou false" : La video se lira dÚs qu'elle le pourra si la valeur est autre que non ou false
     9        -* autobuffer|preload string non|auto|metadata : La méthode de preload : auto chargera l'ensemble de la video, metadatas s'arrêtera aux metadatas, non ne chargera rien
     10        -* loop string "tout sauf non ou false" : La video se lira en boucle
     11        -* largeur int : La largeur par défaut (défaut 320)
     12        -* hauteur int : La hauteur par défaut (défaut 240)
     13        -* align string left|right|center : L'alignement par défaut
     14        -* volume_slider_orientation string vertical|horizontal : l'orientation du slider de volume
    1315]
    1416
     
    6769]
    6870
    69 [(#SET{logo,[(#ENV{logo,#LOGO_DOCUMENT}|image_passe_partout{#GET{largeur},#GET{hauteur}}|image_recadre{#GET{largeur},#GET{hauteur}}|extraire_attribut{src}|url_absolue)]})]
     71[(#SET{logo,[(#ENV{logo,#LOGO_DOCUMENT|extraire_attribut{src}}|image_passe_partout{#GET{largeur},#GET{hauteur}}|image_recadre{#GET{largeur},#GET{hauteur}}|extraire_attribut{src}|url_absolue)]})]
    7072
    7173<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})] video'[
     
    110112                                        flasherror:erreur_flash,[
    111113                                        (#ENV{largeur}|oui)[minwidth : (#ENV{largeur}),]
    112                                         ]movieSize:'adapt'[(#CONFIG{mediaspip_player/cookie_volume}|=={oui}|oui),
    113                                         cookie_volume:true][(#CONFIG{mediaspip_player/slider_volume_orientation}|=={horizontal}|oui),
    114                                         volume_slider_orientation:'horizontal']
     114                                        ]movieSize:'adapt',[(#CONFIG{mediaspip_player/cookie_volume}|=={oui}|oui),
     115                                        cookie_volume:true,]
     116                                        volume_slider_orientation:'#ENV{volume_slider_orientation,#CONFIG{mediaspip_player/slider_volume_orientation,horizontal}}'
    115117                                });
    116118                        }
Note: See TracChangeset for help on using the changeset viewer.