web-dev-qa-db-fra.com

Afficher la source vidéo Youtube en balise vidéo HTML5?

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?

html5youtubeembedded-video
94
sri

É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&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;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.

13
Simon Flack

Cette réponse ne fonctionne plus, mais je cherche une solution.

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

Avantages

  • Assez facile à mettre en œuvre .
  • Très rapide réponse rapide du serveur en fait (cela ne prend pas beaucoup pour récupérer les vidéos).
  • Abstraction (la solution acceptée, même si elle fonctionnait correctement, ne serait applicable que si vous saviez au préalable quelles vidéos vous allez jouer, cela fonctionne pour tout URL saisie par l'utilisateur).

Les inconvénients

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

JavaScript (après 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;
        }
    }
}

Usage (complet)

<video controls="true">
    <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>

Format vidéo standard.

Utilisation (mini)

<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! :)

36
undefined

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
    }
});
16
Norman Breau