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


116

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?


1
Une solution IFrame comme donnée ci-dessous par stackoverflow.com/questions/5157377/… devrait suffire comme solution de contournement.
S Meaden

Réponses:


15

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


77
L'expiration et le fait que cela ne fonctionne que dans un navigateur spécifique rend cette solution assez inutile.
pjv

1
Est-il capable de lire TOUTES les vidéos YouTube?
Raj Pawan Gumdal

2
YouTube pourrait théoriquement modifier les URL de stockage sous-jacentes de toutes ses vidéos s'il le souhaite à tout moment. L'URL fournie dans l' srcattribut ci-dessus n'est probablement pas garantie de fonctionner à long terme.
Chris Peters

1
Oui, des informations utiles mais cela semble être une mauvaise idée. YouTube peut décider de fermer l'accès au lien vidéo direct à tout moment.
Oliver Moran du

36

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


Fonction agréable et fonctionne sur Mozilla et Chrome mais comment définir la largeur et la hauteur de la vidéo si <video> a une largeur de 100% et une hauteur de 200 px.
Anmol Ratan Mohla

J'ai implémenté cette solution, mais 2 jours plus tard, YT l'a bloquée. Ça ne marche plus. :(
apires

cela ne fonctionne plus malheureusement. Cela fonctionnait très bien. J'espère qu'il y a une autre solution pour cela!
Chamilyan

19

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

J'ai récemment eu ce problème: le plein écran n'est plus pris en charge sur iPad! Votre exemple jsfiddle est parfait pour illustrer: sur PC ça marche, pas sur iPad. .. Je suppose que je devrais poser une nouvelle question à ce sujet, mais quelqu'un ici peut peut-être commenter?
Snorvarg

1
@Snorvarg Ma réponse devrait fonctionner sur n'importe quel navigateur compatible HTML5, ce qui devrait fonctionner tant que vous exécutez une version assez récente d'iOS (10+) sur votre iPad. Si vous n'avez pas besoin de contrôler la vidéo par programme, vous pouvez essayer d'utiliser la simple API d'intégration iframe. Vous pouvez trouver un exemple ici developer.google.com/youtube/iframe_api_reference#Examples , ou consulter la réponse de vinayvasyani. Si vous avez toujours un problème, alors je poserais une nouvelle question en utilisant les directives "Comment poser une bonne question" trouvées sur stackoverflow.com/help/how-to-ask .
Norman Breau

@Snorvarg Je suis tombé sur ce productforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y , un problème similaire survenant dans Firefox et il a été résolu car ils devaient demander des autorisations plein écran. Je suis donc prêt à parier que c'est pourquoi le plein écran ne fonctionne pas sur votre iPad, ce que malheureusement iOS Safari ne semble pas prendre en charge. Une autre solution consiste à ajouter votre propre bouton plein écran et à redimensionner simplement le lecteur iframe à la largeur / hauteur de votre écran.
Norman Breau

1
Merci pour vos conseils et liens. J'ai ajouté une question il y a quelques jours, ici: stackoverflow.com/questions/49650040/... Mais après un certain temps, j'ai décidé de créer mon propre bouton plein écran comme vous l'avez proposé, et cela fonctionne très bien.
Snorvarg

Super truc, mais j'ai rencontré l'erreur "TypeError: YT.Player n'est pas un constructeur", comme décrit ici: stackoverflow.com/questions/52062169/… . Comme le souligne la (seule) réponse, cela résulte du chargement du script asynchrone et de l'API qui n'est pas encore prête lors de l'appel. Cela peut être évité en implémentant la onYouTubeIframeAPIReadyfonction (et en y mettant le dernier bloc de code du code ci-dessus).
jakob.j


-3

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


-6

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>

23
"Nouveau" iframetag? iframeexiste depuis des lustres…
Zearin

11
Ce n'est pas une solution à la réponse, il indique clairement la balise vidéo et non l'iframe ...
TGarrett

7
Peut-être que l'OP ne savait tout simplement pas l'existence de la iframebalise et c'est pourquoi il a directement posé des questions sur la videobalise. Sinon, il n'aurait pas demandé si HTML5 (de manière générique) prend en charge les vidéos Youtube, mais il aurait limité la question à la videobalise. Il a même demandé "y a-t-il une solution de contournement pour cela?" dans sa dernière phrase, donc cette réponse est parfaitement valable.
Daniel Muñoz Parsapoormoghadam

1
Pour intégrer des vidéos youtube.com dans mon blog blogger.com, iframe est la seule solution pratique. En plus de cela, le code d'intégration généré par youtube.com est une balise iframe. De plus, w3schools.com recommande les iframes: http://www.w3schools.com/html/html_youtube.asp . Où la balise vidéo n'est pas mentionnée.
noobninja

1
Juste au cas où quelqu'un serait curieux ... Le problème est que l'utilisation d'une balise vidéo n'est pas la bonne approche pour les vidéos YouTube, car les URL publiques pour intégrer des vidéos YouTube ne sont pas une véritable ressource multimédia. C'est pourquoi il y a des gens qui suggèrent d'utiliser des iframes. Si vous essayez d'utiliser un tag vidéo, vous utiliserez des URL privées susceptibles de changer à l'avenir. C'est comme tenter d'accéder à un membre privé dans un langage orienté objet. Vous pouvez consulter la documentation officielle de YouTube ici. Developer.google.com/youtube/iframe_api_reference#Examples
Norman Breau
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.