Vimeo / API / javascript

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

  • woluweb
    a répondu
    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 !

    Laisser un commentaire:


  • cavo789
    a répondu
    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

    Laisser un commentaire:


  • cavo789
    a répondu
    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

    Laisser un commentaire:


  • woluweb
    a crée un sujet [RÉGLÉ] Vimeo / API / javascript

    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

Annonce

Réduire
Aucune annonce pour le moment.

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X