Vimeo / API / javascript

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Vimeo / API / javascript

    Bonjour à tous,

    Sur cette page, je voudrais pouvoir n'afficher le bloc "Vote / Rating' qu'après X secondes :

    https://www.lejourlepluscourt.be/edi...o-custom-field

    En guise de test, voici déjà un petit javascript qui permet par exemple d'afficher le Vote seulement après 3 secondes :

    Code:
    jQuery(document).ready(function () {
    setTimeout(function(){
    var element = document.getElementsByClassName("article-rating")[0]
    element.classList.add("video-finished");
    }, 3000);
    });
    Mais là c'est manuel, or la durée va dépendre de chaque vidéo.
    Bref, j'aurais souhaité utiliser l'API Vimeo pour aller lire la durée du film... et dynamiquement changer ces 3 secondes en (par exemple) 90% de la durée du film.

    Vu mon expérience limitée en javascript et API Vimeo, je me permets de me tourner vers vos bons conseils

    J'ai bien trouvé cette page, mais le bout de code est insuffisant que je puisse l'implémenter :
    https://github.com/vimeo/player.js/b...senumber-error

    Merci d'avance !
    Dernière édition par woluweb à 20/11/2020, 20h58
    Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

    Le prochain JoomlaDay FR présentiel aura lieu à Bruxelles (date à préciser suite aux reports "COVID-19"). Évènement à ne pas rater ! Pour patienter, nous organisons des joomladays virtuels. Plus d'infos sur https://www.joomladay.fr

    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'association francophone des utilisateurs de Joomla : https://www.joomla.fr/association/adherer

  • #2
    Bonsoir Marc

    J'ai jeté un oeil (et plus qu'un ) et voici un code fonctionnel. Le code ci-dessous se passe de jQuery et doit-être placé juste avant la balise de fin pour ton tag </head>.

    J'ai commenté le code pour le rendre plus explicite; n'hésite pas si tu as une question.

    Bonne soirée l'ami.

    Code:
    <script type="text/javascript">
    
    // ---------------------------------------------------------------------
    // -                                                                   -
    // - We'll show the "video-finished" element after 90% of the duration -
    // - That element is a rating with up to 5 stars                       -
    // -                                                                   -
    // ---------------------------------------------------------------------
    
    // Percentage (90%)
    const VIEW_PERCENTAGE = 0.9;
    
    // Duration comes from the vimeo API and represent the duration of the video
    function enableTimeOut(durationInSeconds) {
        var timeOutInMilliseconds;
    
        timeOutInMilliseconds = parseInt(durationInSeconds * VIEW_PERCENTAGE) * 1000;
        console.info('Set the timeout to ' + timeOutInMilliseconds + ' milliseconds');
    
        setTimeout(function() { 
            // Just in case the DOM element is no more in the page
            try {
                var element = document.getElementsByClassName("article-rating")[0];
                element.classList.add("video-finished");
            } catch (error) {
                console.error(error);
            }
        }, timeOutInMilliseconds);
    }
    
    // When the page is fully loaded, retrieve the duration of the video
    // and enable a timeout so the rating DOM element will be displayed only
    // when the video has been viewed at VIEW_PERCENTAGE (90%) or more
    document.addEventListener("DOMContentLoaded", function() {
        var durationInSeconds = 0;
    
        try {
            var player = new Vimeo.Player(document.querySelector('iframe'));
    
            // Call the Vimeo API and get the duration in seconds of the video.
            player.getDuration().then(function(duration) {
                durationInSeconds = duration; 
                console.info('The duration of the video is ' + durationInSeconds + ' seconds');
            }).catch(function(error) {
                console.error(error);
            });
    
            player.on('play', function() {
                // Set the timeout as soon as the video is started
                enableTimeOut(durationInSeconds);
            });
        } catch (error) {
            console.error(error);
        }
    });
    </script>
    Dernière édition par cavo789 à 20/11/2020, 21h13
    manu93fr et woluweb aiment ceci.
    Christophe (cavo789)
    Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)
    Développeur de marknotes, logiciel de gestion de prises de notes avec interface web et de multiples convertisseur https://github.com/cavo789/marknotes
    Mes logiciels OpenSource : https://www.avonture.be

    Commentaire


    • #3
      Pour info, ta difficulté provenait du fait que tu travaillais dans deux dimensions; le synchrone et l'asynchrone.

      L'API de Vimeo est asynchrone: l'appel à getDuration() est lancé et immédiatement ton propre code JS continue; il n'y a pas de mise en attente "j'attends de recevoir la réponse de Vimeo"). Du coup, en mode synchrone (ce que tu faisais), tu tentais d'accéder directement à la durée, mais non, il faut rester et coder dans le ".then()" de l'appel. C'est ce qu'on appelle une promesse (voir https://developer.mozilla.org/fr/doc...lobaux/Promise si cela te tente).

      L'appel est lancé et cela prend un certain temps et ce n'est que lorsque Vimeo a répondu que le ".then()" est alors exécuté. Là, dans cette partie, tu as donc maintenant une durée réelle et c'est à cet endroit que tu peux initialiser ta propre variable.
      Dernière édition par cavo789 à 21/11/2020, 17h22
      jfque et woluweb aiment ceci.
      Christophe (cavo789)
      Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)
      Développeur de marknotes, logiciel de gestion de prises de notes avec interface web et de multiples convertisseur https://github.com/cavo789/marknotes
      Mes logiciels OpenSource : https://www.avonture.be

      Commentaire


      • #4
        Juste pour être complet et pour ceux qui voudraient utiliser ce code, pour qu'il fonctionne il faut d'abord appeler
        Code:
        https://player.vimeo.com/api/player.js
        Encore merci Christophe !
        Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

        Le prochain JoomlaDay FR présentiel aura lieu à Bruxelles (date à préciser suite aux reports "COVID-19"). Évènement à ne pas rater ! Pour patienter, nous organisons des joomladays virtuels. Plus d'infos sur https://www.joomladay.fr

        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'association francophone des utilisateurs de Joomla : https://www.joomla.fr/association/adherer

        Commentaire

        Annonce

        Réduire
        1 sur 2 < >

        C'est [Réglé] et on n'en parle plus ?

        A quoi ça sert ?
        La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

        Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

        Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
        Comment ajouter la mention [Réglé] à votre discussion ?
        1 - Aller sur votre discussion et éditer votre premier message :


        2 - Cliquer sur la liste déroulante Préfixe.

        3 - Choisir le préfixe [Réglé].


        4 - Et voilà… votre discussion est désormais identifiée comme réglée.

        2 sur 2 < >

        Assistance au forum - Outil de publication d'infos de votre site

        Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

        Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

        Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

        UTILISER À VOS PROPRES RISQUES :
        L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

        Problèmes connus :
        FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

        Installation :

        1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

        Archive zip : https://github.com/AFUJ/FPA/zipball/master

        2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

        3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

        4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

        5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

        6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
        et remplacer www. votresite .com par votre nom de domaine


        Exemples:
        Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
        Télécharger le script fpa-fr.php dans: /public_html/
        Pour executer le script: http://www..com/fpa-fr.php

        Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
        Télécharger le script fpa-fr.php dans: /public_html/cms/
        Pour executer le script: http://www..com/cms/fpa-fr.php

        En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

        Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
        Voir plus
        Voir moins

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X