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

    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)
    Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
    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)​

    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)
      Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
      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)​

      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

        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
        Aucune annonce pour le moment.

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X