Forum CMS Made Simple FR

Version complète : [RESOLU] HostedVideoAlbums : sélection des videos locales impossible
Vous consultez actuellement la version basse qualité d’un document. Voir la version complète avec le bon formatage.
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.4
#~ Url du site :
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.4
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ FileManager: 1.4.3
#~ MenuManager: 1.8.5
#~ ModuleManager: 1.5.5
#~ Printing: 1.0.4
#~ ThemeManager: 1.1.7
#~ TinyMCE: 2.9.12
#~ TemplateExternalizer: 2.0.8
#~ FormBuilder: 0.7.3
#~ Captcha: 0.4.5
#~ Gallery: 1.6
#~ Guestbook: 1.4_RC2
#~ GoogleMaps: 0.2.1
#~ CMSPrinting: 1.0.3
#~ MicroTiny: 1.2.5
#~ News: 2.12.10
#~ Search: 1.7.7
#~ CGExtensions: 1.31.4
#~ JQueryTools: 1.2.4
#~ HostedVideoAlbums: 2.4.2
#~ CGFBApp: 1.0.7
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ output_compression: false
#~ max_upload_size: 2000000
#~ url_rewriting: mod_rewrite
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



La sélection de videos chargées en local ne se fait pas.
La page ouverte pour le choix des videos n'est pas intégrée à l'admin (affichage totalement différent)
Un clic sur une vidéo ne retourne pas à la zone de saisie de l'ID vidéo - le script videopicker.php sélectionne un #
Code :
http://monsite.tld/modules/HostedVideoAlbums/videopicker.php?input=m1_vid_videoid#

Le problème est identique pour la sélection des vignettes d'illustration.

Le module chargé étant la version 2.4.2, étiquetée "beta2" faut-il charger manuellement la version précédente ?
Merci d'avance pour vos conseils
Avec la version 1.11+, il faut obligatoirement utiliser la version 2.4.2 d'hva.
Citation :La page ouverte pour le choix des videos n'est pas intégrée à l'admin (affichage totalement différent)
Là, je ne comprends pas ce que tu as voulu dire.

As-tu été dans l'onglet "préférences" et as-tu bien renseigné "Répertoire contenant les vidéos locales" et "Dossier des vignettes" ?
Tu dois avoir une adresse de ce type : /public_html/SV_WWW/001-site/uploads/videos, pas une url.

Ensuite, il faut bien entendu uploader la vidéo dans ce répertoire, puis aller dans l'onglet vidéo et remplir les champs et veiller à ce que le champs "Site Vidéo* :" corresponde à local.extension de ta vidéo.

Je sais que cela fonctionnait dans les anciennes versions, mais n'ai pas testé dans la dernière.
Je trouve bien plus rentable d'uploader la vidéo sur YouTube ou autre hébergeur vidéo, cela améliore les chances que quelqu'un la voie grâce au moteur de recherche, puis trouve le site grâce à elle.
Bonsoir Jean,
- pas de souci pour les répertoires de chargement : les vidéos et les vignettes y sont bien visibles
- lorsque je dis que la page de sélection n'a pas le même "look" que les pages admin du site, c'est que visiblement le gabarit (et css) de l'admin n'est pas chargé.

Je suis bien d'accord pour uploader sur Youtube, mais comme ce module propose des vidéos en local et que cela peut toujours servir, j'ai testé .... Cool
Ok, je vois effectivement qu'il y a un problème.
Je regarde.
Effectivement, il manque le dossier /fancybox/
Je le signale à Olivier, le développeur.
En attendant, voici le mien : dossier à dézipper dans modules/HostedVideoAlbums
Une fois en place, il reste un problème dans la fenêtre fancybox car les fichiers sont appelés ainsi :
http://localhost/1.11.4/modules/HostedVideoAlbums/modules/HostedVideoAlbums/thumbpicker.css, mais ça fonctionne quand même Smile
Ce phénomène de doublement dans l'url ne se produit que sous windoze, pas en ligne sur serveur linux Big Grin suivant mes propres observations.
Pourrais-tu tester aussi, cher boullu ?
Olivier, le développeur a écrit :Salut Jean Marc
Merci de tes retours. Je suis en congés cette semaine. Je regarderai ça la semaine prochaine. J'ai déjà constaté le souci de chemin mais je n'arrive pas à le régler à la fois sous wamp et sous un apache linux. ..
A +
Olivier
Jean le Chauve a écrit :Effectivement, il manque le dossier /fancybox/

Merci Jean pour ce dossier manquant.
Son installation permet bien la sélection des vidéos et vignettes. La fenêtre de sélection est bien une pop-up alors que précédemment elle était pleine page.
De mon côté pas de souci avec le chemin, mon installation étant sur un serveur linux.

J'ai découvert un autre petit souci avec l'affichage des vidéos avec le template fancybox : le réglage dans la barre d'outils inférieure n'est pas accessible (par exemple le réglage du son) car le clic de souris fait passer à la précédente ou à la suivante.
Faut-il ouvert un autre post pour ce sujet ?
Merci pour ton aide et celle de toute la communauté.
C'est un problème dû à la css de Jquery.
Ayant eu le même problème, je te propose ma solution :
Va dans le gabarit d'entête de fancybox, et met en commentaire l'appel à la css comme ceci :
Code :
{* {assign var="fancybox" value="/modules/HostedVideoAlbums/fancybox"}
<link rel="stylesheet" type="text/css" href="{$fancybox}/jquery.fancybox-1.3.4.css" media="screen" /> *}
Crée une nouvelle feuille de style "fancybox" avec ce contenu :
Code :
[[strip]]
@media all
{
    /*! fancyBox v2.0.4 fancyapps.com | fancyapps.com/fancybox/#license */
    .fancybox-tmp iframe, .fancybox-tmp object {
        vertical-align: top;
        padding: 0;
        margin: 0;
    }

    .fancybox-wrap {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1002;
    }

    .fancybox-outer {
        padding: 0;
        margin: 0;
        background: #f9f9f9;
        color: #444;
        text-shadow: none;
        -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
                border-radius: 4px;
    }

    .fancybox-opened {
        z-index: 1203;    
    }

    .fancybox-opened .fancybox-outer {
        -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .fancybox-inner {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        position: relative;
        outline: none;
        overflow: hidden;
    }

    .fancybox-error {
        color: #444;
        font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
        margin: 0;
        padding: 10px;
    }

    .fancybox-image, .fancybox-iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        vertical-align: top;
    }

    .fancybox-image {
        max-width: 100%;
        max-height: 100%;
    }

    #fancybox-loading {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -21px;
        margin-left: -21px;
        width: 42px;
        height: 42px;
        background: url('[[root_url]]/uploads/images/design/fancybox/fancybox_loading.gif');
        opacity: 0.8;
        cursor: pointer;
        z-index: 1010;
    }

    .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url('[[root_url]]/uploads/images/design/fancybox/fancybox_sprite.png');
    }

    .fancybox-close {
        position: absolute;
        top: -18px;
        right: -18px;
        width: 36px;
        height: 36px;
        cursor: pointer;
        z-index: 1004;
    }

    .fancybox-prev, .fancybox-next {
        position: absolute;
        top: 50px;
        width: 40%;
        height: 60%;
        cursor: pointer;
        background: transparent url('[[root_url]]/uploads/images/design/fancybox/blank.gif'); /* helps IE */
        z-index: 1003;
    }

    .fancybox-prev {
        left: 0;    
    }

    .fancybox-next {
        right: 0;
    }

    .fancybox-prev span, .fancybox-next span {
        position: absolute;
        top: 50%;
        left: -9999px;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        cursor: pointer;
        z-index: 1003;
    }

    .fancybox-prev span {
        background-position: 0 -36px;
    }

    .fancybox-next span {
        background-position: 0 -72px;
    }

    .fancybox-prev:hover, .fancybox-next:hover {
        visibility: visible;
    }

    .fancybox-prev:hover span {
        left: 20px;
    }

    .fancybox-next:hover span {
        left: auto;
        right: 20px;
    }

    .fancybox-tmp {
        position: absolute;
        top: -9999px;
        left: -9999px;
        padding: 0;
        overflow: visible;
        visibility: hidden;
    }

    /* Overlay helper */

    #fancybox-overlay {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        display: none;
        z-index: 1001;
        background: #000;
    }

    /* Title helper */

    .fancybox-title {
        visibility: hidden;    
        font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
        position: relative;
        text-shadow: none;
        z-index: 1005;
    }

    .fancybox-opened .fancybox-title {
        visibility: visible;
    }

    .fancybox-title-float-wrap {
        position: absolute;
        bottom: 0;
        right: 50%;
        margin-bottom: -35px;
        z-index: 1003;
        text-align: center;
    }

    .fancybox-title-float-wrap .child {
        display: inline-block;
        margin-right: -100%;
        padding: 2px 20px;
        background: transparent; /* Fallback for web browsers that doesn't support RGBa */
        background: rgba(0, 0, 0, 0.8);
        -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
                border-radius: 15px;
        text-shadow: 0 1px 2px #222;
        color: #FFF;
        font-weight: bold;
        line-height: 24px;
        white-space: nowrap;
    }

    .fancybox-title-outside-wrap {
        position: relative;
        margin-top: 10px;
        color: #fff;
    }

    .fancybox-title-inside-wrap {
        margin-top: 10px;
    }

    .fancybox-title-over-wrap {
        position: absolute;
        bottom: 0;
        left: 0;    
        color: #fff;
        padding: 10px;
        background: #000;
        background: rgba(0, 0, 0, .8);
    }
}
[[/strip]]
et raccorde-là à tes gabarits de page.

Tu dois absolument régler tes erreurs html : http://validator.w3.org/check?uri=http%3...ator%2F1.3 sans quoi, ta mise en page sera bancale, la css ne répondant pas correctement au DOM.
Pour ce faire, il faut commencer par virer ton like facebook (cela enlèvera le problème d'insertion de la doctype supplémentaire...).
Pour être bien propre, tu peux modifier le code du "Gabarit à utiliser pour imbriquer (embed) une video:" en modifiant & en &amp; dans les paramètres d'url.
Vérifie également que les balises images sont bien fermées et ajoute un alt là où il en manque.
Tu auras déjà résolu la plupart des erreurs Wink.
Un petit lien qui te montre que les vidéos en fancybox fonctionnent : vidéos chanteurs français et belges
merci pour cette analyse approfondie.
Je vais bien regarder cela en détail mais je bute dès le début : voici ce que j'ai dans le gabarit d'entête de la fancybox
Code :
[== Indéfini ==]
{JQueryTools action=require lib=fancybox nocache}
{JQueryTools action=placemarker nocache}

<style type="text/css">
h1 { font-family: Helvetica, Arial, sans-serif; font-size:21px; color:#333; }
.gallery img { margin:5px; border:none; }
.gallery a { outline:none; }
.left { float:left; }
.clear { clear:both; }
#hva_div embed { z-index: 100; }
.hva-title-text { text-align: left; display: block; margin-right: 80px; font-weight: bold;}
.hva-vidnum { text-align: center; }
.hva-close { float: right; }
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('.gallery a.swf').fancybox({
            'padding'          : 0,
            'autoScale'        : false,
            'transitionIn'     : 'none',
            'transitionOut'    : 'none',
            'cyclic'           : true,
            'showCloseButton'  : false,
            'titlePosition'    : 'inside',
            'titleFormat'      : formatTitle,
            'type'             : 'swf',
            'swf'              : {
                'wmode'              : 'transparent',
                'allowfullscreen'    : 'true',
                'allowscriptaccess'  : 'always',
                'scale'              : 'autoscale',
                'autoplay'           : 'yes',
                'play'               : 'true'
            }
        });
    $('.gallery a.notswf').fancybox({
            'padding'          : 0,
            'autoScale'        : false,
            'transitionIn'     : 'none',
            'transitionOut'    : 'none',
            'cyclic'           : true,
            'showCloseButton'  : false,
            'titlePosition'    : 'inside',
            'titleFormat'      : formatTitle,
            'type'             : 'ajax',
            'scrolling'        : 'no',
            'onComplete'       : resizeFancyOuter
    });
    return false;
});

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    return '<div class="hva-title"><span class="hva-close"><a href="javascript:;" onclick="$.fancybox.close();"><img src="modules/HostedVideoAlbums/images/{$closeimage}" /></a></span>' +
        (title && title.length ? '<span class="hva-title-text">' + title + '</span>' : '' ) + '<span class="hva-vidnum">{$video} ' + (currentIndex + 1) + '/' + currentArray.length + '</span></div>';
}

function resizeFancyOuter(){
    var outer = $('#fancy_outer');
    if($('#hva_div').length > 0){
        var hvadiv = $('#hva_div');
        var hvadiv_w = hvadiv.width();
        var hvadiv_h = hvadiv.height();
        outer.css({
            'width': hvadiv_w + 15,
            'height': hvadiv_h + 15
        });
    }
}

$(window).resize(function(){
    var outer = $('#fancy_outer');
    if(outer.is(':visible')){
        resizeFancyOuter();
    }
});
</script>


je vire tout cela pour remplacer par le code que tu m'indiques ? ou je suis pas dans le bon gabarit ?
Place ceci entre commentaires :
Code :
{*
{JQueryTools action=require lib=fancybox nocache}
{JQueryTools action=placemarker nocache}
*}
Vérifie qu'il reste bien un appel vers JQuery 1.8.3 (un seul) dans le code source de la page.
S'il n'y en a pas, place l'appel suivant dans tes métadonnées (administartion dusite->paramètres globaux)
Code :
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Compare le code source de la page d'exemple que je t'ai donné plus haut avec ton propre code si tu as toujours des problèmes. Tu devrais commencer à trouver des solutions toi-même par l'analyse des codes sources et la curiosité.
Et bien sûr, tu dois absolument te munir et comprendre des outils de développement comme FireBug. C'est grâce à ce dernier que les membres de ce forum solutionnent +80% des problèmes postés (quand il y a un lien, bien entendu).
Jean le Chauve a écrit :Effectivement, il manque le dossier /fancybox/
Je le signale à Olivier, le développeur.
En attendant, voici le mien : dossier à dézipper dans modules/HostedVideoAlbums

le chargement de ce dossier résout le problème de chargement des vidéos. Le bug est identifié http://dev.cmsmadesimple.org/bug/view/8955 et encours de résolution par le développeur.

Le souci de l'affichage des vidéos en fancybox peut se résoudre, provisoirement, en créant un gabarit d'entête pour fancybox :

1. mettre en commentaires :
Code :
{*
{JQueryTools action=require lib=fancybox nocache}
{JQueryTools action=placemarker nocache}
*}

2. mettre à la place :
Code :
{literal}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://mondomaine.tld/modules/JQueryTools/lib/fancybox.lib/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="http://mondomaine.tld/modules/JQueryTools/lib/fancybox.lib/jquery.mousewheel-3.0.6.pack.js"></script>
{/literal}
ATTENTION : le fichier jquery.fancybox.pack.js dans la version 2.4.2beta du module HostedVideoAlbums est la 2.1.3. Si vous avez des problèmes de taille de la fenêtre, procurez-vous la version 2.0.5. (voir éventuellement Jean le Chauve pour vous la procurer)

Ensuite, crée un css suivant le code fourni par Jean le Chauve :
Code :
[[strip]]
@media all
{
    /*! fancyBox v2.0.4 fancyapps.com | fancyapps.com/fancybox/#license */
    .fancybox-tmp iframe, .fancybox-tmp object {
        vertical-align: top;
        padding: 0;
        margin: 0;
    }

    .fancybox-wrap {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1002;
    }

    .fancybox-outer {
        padding: 0;
        margin: 0;
        background: #f9f9f9;
        color: #444;
        text-shadow: none;
        -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
                border-radius: 4px;
    }

    .fancybox-opened {
        z-index: 1203;    
    }

    .fancybox-opened .fancybox-outer {
        -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .fancybox-inner {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        position: relative;
        outline: none;
        overflow: hidden;
    }

    .fancybox-error {
        color: #444;
        font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
        margin: 0;
        padding: 10px;
    }

    .fancybox-image, .fancybox-iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        vertical-align: top;
    }

    .fancybox-image {
        max-width: 100%;
        max-height: 100%;
    }

    #fancybox-loading {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -21px;
        margin-left: -21px;
        width: 42px;
        height: 42px;
        background: url('[[root_url]]/uploads/images/design/fancybox/fancybox_loading.gif');
        opacity: 0.8;
        cursor: pointer;
        z-index: 1010;
    }

    .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url('[[root_url]]/uploads/images/design/fancybox/fancybox_sprite.png');
    }

    .fancybox-close {
        position: absolute;
        top: -18px;
        right: -18px;
        width: 36px;
        height: 36px;
        cursor: pointer;
        z-index: 1004;
    }

    .fancybox-prev, .fancybox-next {
        position: absolute;
        top: 50px;
        width: 40%;
        height: 60%;
        cursor: pointer;
        background: transparent url('[[root_url]]/uploads/images/design/fancybox/blank.gif'); /* helps IE */
        z-index: 1003;
    }

    .fancybox-prev {
        left: 0;    
    }

    .fancybox-next {
        right: 0;
    }

    .fancybox-prev span, .fancybox-next span {
        position: absolute;
        top: 50%;
        left: -9999px;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        cursor: pointer;
        z-index: 1003;
    }

    .fancybox-prev span {
        background-position: 0 -36px;
    }

    .fancybox-next span {
        background-position: 0 -72px;
    }

    .fancybox-prev:hover, .fancybox-next:hover {
        visibility: visible;
    }

    .fancybox-prev:hover span {
        left: 20px;
    }

    .fancybox-next:hover span {
        left: auto;
        right: 20px;
    }

    .fancybox-tmp {
        position: absolute;
        top: -9999px;
        left: -9999px;
        padding: 0;
        overflow: visible;
        visibility: hidden;
    }

    /* Overlay helper */

    #fancybox-overlay {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        display: none;
        z-index: 1001;
        background: #000;
    }

    /* Title helper */

    .fancybox-title {
        visibility: hidden;    
        font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
        position: relative;
        text-shadow: none;
        z-index: 1005;
    }

    .fancybox-opened .fancybox-title {
        visibility: visible;
    }

    .fancybox-title-float-wrap {
        position: absolute;
        bottom: 0;
        right: 50%;
        margin-bottom: -35px;
        z-index: 1003;
        text-align: center;
    }

    .fancybox-title-float-wrap .child {
        display: inline-block;
        margin-right: -100%;
        padding: 2px 20px;
        background: transparent; /* Fallback for web browsers that doesn't support RGBa */
        background: rgba(0, 0, 0, 0.8);
        -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
                border-radius: 15px;
        text-shadow: 0 1px 2px #222;
        color: #FFF;
        font-weight: bold;
        line-height: 24px;
        white-space: nowrap;
    }

    .fancybox-title-outside-wrap {
        position: relative;
        margin-top: 10px;
        color: #fff;
    }

    .fancybox-title-inside-wrap {
        margin-top: 10px;
    }

    .fancybox-title-over-wrap {
        position: absolute;
        bottom: 0;
        left: 0;    
        color: #fff;
        padding: 10px;
        background: #000;
        background: rgba(0, 0, 0, .8);
    }
}
[[/strip]]
et attacher ce fichier css au gabarit de la page de présentation des vidéos.

Voici le résumé des modifications à faire.
En attendant que le module soit mis à jour par le développeur.