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

J'essaie de mettre une source vidéo YouTube dans la <video>balise HTML5 , 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 en tant que source.

Pouvez-vous utiliser HTML5 pour intégrer des vidéos YouTube? Sinon, existe-t-il une solution de contournement?

Étape 1: ajoutez &html5=Trueà votre URL YouTube préférée

Étape 2: rechercher la <video/>balise dans la source

Étape 3: Ajouter controls="controls"au tag vidéo:<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 des expirechoses. Je ne sais pas combien de temps la srcchaîne fonctionnera.

Je me teste toujours.

Edit (28 juillet 2011) : Notez que cette vidéo src est spécifique au navigateur que vous utilisez pour récupérer la source de la page. Je pense que Youtube génère ce HTML dynamiquement (du moins actuellement) donc en testant si je copie dans Firefox cela fonctionne dans Firefox, mais pas Chrome, par exemple.

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

À partir du . 2015/02/24. il existe un site Web (youtubeinmp4) qui vous permet de télécharger des vidéos youtube .mp4 format, vous pouvez l'exploiter (avec du JavaScript) pour vous en sortir en incorporant des vidéos youtube dans des <video>balises. En voici une démonstration en action.

Avantages

• Assez facile à mettre en œuvre .
• Réponse du serveur assez rapide en fait (il n'en faut 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 à l'avance quelles vidéos vous alliez lire, cela fonctionne pour toute URL saisie par l'utilisateur).

Les inconvénients

• Cela dépend évidemment des youtubeinmp4.comserveurs et de leur manière de fournir un lien de téléchargement (qui peut être passé comme <video>source), donc cette réponse peut ne plus être valide à l'avenir.

• 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;
        }
    }
}

Utilisation (complète)

<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 courant mais plus petit, en utilisant l'url raccourcie youtu.becomme srcattribut directement dans la <video>balise.

J'espère que ça aide! :)

La <video>balise est destinée à se charger dans une vidéo d'un format pris en charge (qui peut différer selon le navigateur).

Les liens d'intégration YouTube ne sont pas seulement des vidéos, ce sont généralement des pages Web qui contiennent 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, Flash, ou un autre plugin basé sur ce qui est disponible sur le PC de l'utilisateur. C'est pourquoi vous avez du mal à utiliser la balise vidéo avec des vidéos YouTube.

YouTube propose une API de développeur pour intégrer une vidéo YouTube dans votre page.

J'ai fait un JSFiddle comme exemple en direct: 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
    }
});

La réponse la plus simple est donnée par W3schools. https://www.w3schools.com/html/html_youtube.asp

1. Téléchargez votre vidéo sur Youtube
2. Notez l'ID vidéo
3. Maintenant, écrivez ce code dans votre HTML5.

<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>

que diriez-vous de le faire comme hooktube ? ils n'utilisent pas réellement l'URL de la vidéo pour l'élément html5, mais l'URL du redirecteur vidéo google qui fait appel à cette vidéo. Découvrez comment ils présentent une vidéo aléatoire despacito ...

<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

le code est pour la page vidéo suivante https://hooktube.com/watch?v=72UO0v5ESUo

youtube en mp3, en revanche, s'est transformé en monstre extrêmement monétisé qui renvoie désormais download.html sur la moitié des demandes de téléchargement de vidéos ... ennuyeux ...

les 2 liens de cette réponse concernent mes expériences personnelles avec les deux ressources. comment hooktube est agréable et frais et aide en fait à éviter la censure et les restrictions géographiques ... vérifiez-le, c'est plutôt cool. et youtubeinmp4 est un monstre popup maintenant connu sous le nom de ConvertInMp4 ...

Avec la nouvelle balise iframe intégrée à votre site Web, le code détectera automatiquement si vous utilisez un navigateur qui prend en charge HTML5 ou non.

Le code iframe pour intégrer des vidéos YouTube est le suivant, copiez simplement l'ID vidéo et remplacez-le dans le code ci-dessous:

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>