J'essaie de placer une source vidéo YouTube dans la balise HTML5 <video>
, mais cela ne semble pas fonctionner. Après quelques recherches sur Google, j'ai découvert que HTML5 ne prend pas en charge les URL de vidéo YouTube.
Pouvez-vous utiliser HTML5 pour intégrer des vidéos YouTube? Si non, existe-t-il une solution de contournement?
Étape 1: ajoutez &html5=True
à votre URL youtube préférée
Étape 2: Trouver la balise <video/>
dans la source
Étape 3: Ajouter controls="controls"
à la balise video: <video controls="controls"..../>
Exemple:
<video controls="controls"
class="video-stream"
x-webkit-airplay="allow"
data-youtube-id="N9oxmRT2YWw"
src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
Notez qu'il semble y avoir quelques expire
trucs. Je ne sais pas combien de temps la chaîne src
fonctionnera.
Je me teste toujours.
Edit (28 juillet 2011): Notez que cette vidéo src est spécifique à le navigateur que vous utilisez pour récupérer la source de la page. Je pense que Youtube génère ce code HTML de manière dynamique (du moins à l’heure actuelle), donc lors du test, si je copie dans Firefox, cela fonctionne dans Firefox, mais pas dans Chrome par exemple.
À partir de . 2015/02/24. il y a un site Web (youtubeinmp4) qui vous permet de télécharger des vidéos youtube Dans .mp4 format
, vous pouvez exploiter cela (avec du JavaScript) pour vous permettre d'incorporer des vidéos youtube dans les balises <video>
. Voici une démo de en action.
Cela dépend évidemment des serveurs youtubeinmp4.com
et de leur manière de fournir un lien de téléchargement (qui peut être transmis en tant que source <video>
, par conséquent), de sorte que cette réponse risque de ne plus être valable dans le futur.
Vous ne pouvez pas choisir la qualité vidéo.
load
)videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
var video = videos[i];
var src = video.src || (function () {
var sources = video.querySelectorAll("source");
for (var j = 0, sl = sources.length; j < sl; j++) {
var source = sources[j];
var type = source.type;
var isMp4 = type.indexOf("mp4") != -1;
if (isMp4) return source.src;
}
return null;
})();
if (src) {
var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
if (isYoutube) {
var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
id = (id.length > 1) ? id.splice(1) : id;
id = id.toString();
var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
video.src = mp4url + id;
}
}
}
<video controls="true">
<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>
Format vidéo standard.
<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>
Un peu moins commun mais assez petit, en utilisant l'URL raccourci youtube.be
et l'attribut src
directement dans la balise <video>
.
J'espère que ça aide! :)
La balise <video>
est destinée à être chargée dans une vidéo d’un format pris en charge (qui peut différer d’un navigateur à l’autre).
Les liens incorporés dans YouTube ne sont pas simplement des vidéos, ils sont généralement des pages Web contenant une logique permettant de détecter ce que votre utilisateur prend en charge et comment il peut lire la vidéo youtube, en utilisant HTML5 ou flash, ou tout autre plug-in basé sur ce qui est disponible sur le PC de l'utilisateur. C'est pourquoi vous rencontrez des difficultés en utilisant la balise video avec des vidéos youtube.
YouTube propose une API de développeur pour intégrer une vidéo youtube à votre page.
J'ai créé un JSFiddle à titre d'exemple: http://jsfiddle.net/zub16fgt/
Et vous pouvez en savoir plus sur l'API YouTube ici: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
Le code peut également être trouvé ci-dessous
Dans votre HTML:
<div id="player"></div>
Dans votre Javascript:
var onPlayerReady = function(event) {
event.target.playVideo();
};
// The first argument of YT.Player is an HTML element ID.
// YouTube API will replace my <div id="player"> tag
// with an iframe containing the youtube video.
var player = new YT.Player('player', {
height: 320,
width: 400,
videoId : '6Dc1C77nra4',
events : {
'onReady' : onPlayerReady
}
});