[RÉGLÉ] Vimeo / API / javascript

[woluweb]

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 :

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 !

[cavo789]

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.

<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>

[cavo789]

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.

[woluweb]

Juste pour être complet et pour ceux qui voudraient utiliser ce code, pour qu'il fonctionne il faut d'abord appeler

https://player.vimeo.com/api/player.js

Encore merci Christophe !