web-dev-qa-db-fra.com

Comment puis-je créer des liens sur ma propre page qui fonctionnent comme des liens profonds interagissant avec un youtube / vimeo intégré sur cette même page?

Est-ce que quelqu'un connaît une technique permettant de faire que les liens sur un site Web fonctionnent comme des liens profonds vers une vidéo vimeo/youtube incorporée sur la même page?

De cette façon, vous pouvez inclure des vidéos dans un article de blog ou similaire, et référencer certaines parties de la vidéo par le biais de codes temporels liés en profondeur. Je pense qu’il faudrait un peu de magie javascript pour le faire.

Sur une autre note, j'aimerais avoir le "balisage possible" pour pouvoir introduire les balises deep-linking et vimeo.

videoembedpersonal-websiteyoutube
2
thunki

Vous pouvez intégrer des vidéos YouTube à liens profonds en utilisant l'attribut 'démarrer' pour que la lecture commence à une heure précise, comme ceci:

<iframe id="video" width="560" height="349" src="http://www.youtube.com/embed/3CR5y8qZf0Y?start=20" frameborder="0" allowfullscreen></iframe>

Vous pouvez modifier l'heure de début en utilisant JavaScript et jQuery, comme ceci:

jQuery 

function setTheTime(theTime) {
    var videoURL = $('iframe#video').attr('src');
    videoURL = videoURL.replace(/=.+/, "="+theTime+"&autoplay=1");
    $('iframe#video').attr('src',videoURL);
}

$('.time').click(function() {
    var newTime = $(this).attr('href').replace('#','');
    setTheTime(newTime);
});

HTML

<p>Watch this video from <a href="#20" class="time">20 seconds</a> or from <a href="#40" class="time">40 seconds.</a></p><br/><br/>

<iframe id="video" width="560" height="349" src="http://www.youtube.com/embed/3CR5y8qZf0Y?start=0" frameborder="0" allowfullscreen>    </iframe>

Démo
Voici une démonstration du résultat. (Cliquez sur les touches '20 secondes 'et '40 secondes' liens dans le cadre "Résultat" en bas à droite pour le voir fonctionner.)

Notes
Notez que j'ai modifié le code incorporé par défaut de YouTube pour ajouter ?start=0 à l'attribut src et à l'attribut id="video" afin que nous puissions cibler cette iframe avec jQuery.

Une fois que vous avez terminé, tous les liens de la page utilisant le format <a href="#20" class="time">link text here</a> modifieront l'heure de début et la lecture automatique de la vidéo.

Je ne sais pas si cela est possible avec Vimeo, car je ne connais pas aussi bien leur code d'intégration.

1
Nick

Pour YouTube, vous établissez un lien en utilisant des codes temporels pour obtenir le bit souhaité: http://www.google.com/support/youtube/bin/answer.py?answer=116618

Pour Vimeo, ceci FAQ décrit comment le faire, mais uniquement s'il s'agit de votre vidéo: http://vimeo.com/help/faq#chapters

0
paulmorriss