web-dev-qa-db-fra.com

Comment lire une section d'une vidéo youtube en boucle?

J'essaie de créer une boucle vidéo youtube dans une section spécifique d'une vidéo.

https://www.youtube.com/v/zeI-JD6RO0k?autoplay=1&loop=1&start=30&end=33&playlist=%20zeI-JD6RO0k

De ce que je sais:

Pour commencer et finir:

start=30&end=33

Pour le faire tourner:

autoplay=1&loop=1&playlist=%20zeI-JD6RO0

Le problème est qu'il ne démarre pas la boucle suivante à l'heure que je spécifie

youtube
6
Tim Cooley

Vous pouvez utiliser Youtube Iframe-API pour boucler une section vidéo.

Placez cette balise dans votre page HTML:

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

Charger Youtube Iframe-API

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Créer un lecteur et une vidéo en boucle:

var section = {
  start: 30,
  end: 33
};

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player(
    'player',
    {
      height: '360',
      width: '640',
      videoId: 'zeI-JD6RO0k',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    }
  );
}

function onPlayerReady(event) {
  player.seekTo(section.start);
  player.playVideo();
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    var duration = section.end - section.start;
    setTimeout(restartVideoSection, duration * 1000);
  }
}

function restartVideoSection() {
  player.seekTo(section.start);
}

Voir cet exemple en action

6
maiermic

Notez tout d’abord, si vous n’êtes pas familiarisé avec html ou javascript au-delà des bases, le lien api de lecteur youtube dans la réponse de maiermic fournira tout le nécessaire pour développer la solution fournie sur cette page sans trop de survol. 

aussi, au cas où vous voudriez ajouter un convertisseur hh: mm: ss qui accepte jusqu’à quelques secondes - ajoutez/modifiez le code fourni dans la réponse de maiermic avec ce qui suit;

var timeStart = "HH:MM:SS";
var timeEnd = "HH:MM:SS";

var loopStart = getSeconds(timeStart);
var loopEnd =  getSeconds(timeEnd);

var section = {
  start: loopStart,
  end: loopEnd
};

et ajouter la fonction;

function getSeconds(str) {
    var p = str.split(':'),
    s = 0, m = 1;

    while (p.length > 0) {
        s += m * parseInt(p.pop(), 10);
        m *= 60;
    }

    return s;
}

Et dans le cas où vous souhaiteriez inclure une lecture plus lente jusqu’à la vitesse normale avec ce code, modifiez la fonction suivante avec

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        var duration;

        var playerSpeed = player.getPlaybackRate();

        if (playerSpeed == .25)
            duration = (section.end - section.start) * 4;
        else if (playerSpeed == .5) 
            duration = (section.end - section.start) * 2;
        else if (playerSpeed == .75) 
            duration = (section.end - section.start) * 1.5;
        else if (playerSpeed == 1) 
            duration = (section.end - section.start);

        setTimeout(restartVideoSection, duration * 1000);
    }
  }

aussi bien que

    function onPlayerReady(event) {
        player.seekTo(section.start);
        player.setPlaybackRate(.25);     // choose .25, .50, .75, or 1
        player.playVideo();
    }

Bien sûr, vous devrez modifier les champs id de la vidéo/HH: MM: SS dans le code chaque fois que vous souhaitez une vidéo/une section de vidéo différente. De plus, si l’on choisit d’inclure la prise en charge de la vitesse de lecture variable comme ci-dessus, ces valeurs devront être ajoutées à volonté. La vitesse de lecture peut être modifiée via les boutons du lecteur une fois démarrée si le code ci-dessus est inclus, mais si elle est modifiée pendant la lecture, la durée ne s'actualisera pas tant que la vidéo n'aura pas commencé. 

1
kjp