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

J'essaie de mettre une vidéo de YouTube, source dans le HTML5 <video> tag, mais il ne semble pas fonctionner. Après quelques recherches sur Google, j'ai trouvé que le HTML5 ne prend pas en charge la vidéo YouTube Url en tant que source.

Pouvez-vous utiliser HTML5 pour intégrer des vidéos de YouTube? Si non, est-il une solution de contournement?

InformationsquelleAutor sri | 2011-03-01
  1. 14

    Étape 1: ajouter &html5=True à vos favoris youtube url

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

    Étape 3: Ajouter controls="controls" vidéo tag: <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>

    Remarque il semble que certains expire choses. Je ne sais pas combien de temps la src chaîne de travail.

    Toujours le tester moi-même.

    Modifier juillet 28, 2011): Noter que cette vidéo src spécifique au navigateur que vous utilisez pour récupérer le code source de la page. Je pense que Youtube génère ce code HTML dynamiquement (au moins actuellement) afin de tester si je copie dans Firefox, cela fonctionne dans Firefox, mais pas avec Chrome par exemple.

    • La date d'expiration et le fait qu'il ne fonctionne que dans un navigateur spécifique rend cette solution assez inutile.
    • Est-il capable de jouer TOUTES les vidéos de youtube?
    • Des informations utiles, mais ce n'est pas une solution.
    • YouTube pourrait théoriquement changer le stockage sous-jacent Url pour l'ensemble de leurs vidéos si ils le souhaitent, à tout moment. L'URL fournie dans le src attribut ci-dessus n'est probablement pas garanti à long terme.
    • Cette Réponse n'est pas de travail.
    • Oui, des informations utiles, mais sonne comme une mauvaise idée. YouTube pourrait décider de fermer l'accès à la vidéo en direct lien à tout moment.

    InformationsquelleAutor Simon Flack
  2. 35

    Cette réponse ne fonctionne plus, mais je suis à la recherche d'une solution.

    De . 2015 /02 /24 . il y a un site web (youtubeinmp4) qui vous permet de télécharger des vidéos youtube en .mp4 format, vous pouvez exploiter de cette manière (avec un peu de JavaScript) pour échapper à l'incorporation de vidéos youtube en <video> balises. Voici une démo de cette action dans le.

    Pros

    • Assez facile à mettre en œuvre.
    • Assez rapide réponse du serveur en fait (ça ne prend pas beaucoup pour récupérer les vidéos).
    • Abstraction (la solution retenue, même si elle a fonctionné correctement, ne serait applicable si vous connaissait d'avance les vidéos qui vous ont été à jouer, cela fonctionne pour n'importe quel utilisateur saisie url).

    Contre

    • Cela dépend évidemment de la youtubeinmp4.com serveurs et de leur façon de fournir un lien de téléchargement (qui peut être passé sous un <video> source), de sorte que cette réponse peut ne pas être valable dans l'avenir.

    • Vous ne pouvez pas choisir la qualité de la 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;
        }
    }
}

    D'Utilisation (Complet)

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

    Standart vidéo format.

    D'Utilisation (Mini)

    <video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

    Un peu moins commun, mais assez petites, à l'aide de la youtube.be url raccourcie et le src attribut directement dans le <video> tag.

    Espère que cela aide! 🙂

    • Les œuvres, mais de ne pas afficher l'aperçu.
    • Belle fonction et fonctionne sur Mozilla et Chrome, mais comment mettre la vidéo de la largeur et de la hauteur si <video> 100% de la largeur et de 200px de hauteur.
    • J'ai mis en œuvre cette solution, mais 2 jours plus tard, YT bloqué. Il se complique pas travailler plus. 🙁
    • cela ne fonctionne plus malheureusement. Il utilisé pour l'excellent travail. J'espère qu'il y est une autre solution pour vous!
    InformationsquelleAutor undefined
  3. 16

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

    YouTube liens ne sont pas juste des vidéos, ils sont généralement des pages web qui contiennent la logique de détecter que l'utilisateur de votre soutient et comment ils peuvent jouer la vidéo sur youtube, à l'aide de HTML5 ou flash, ou un autre plugin basé sur ce qui est disponible sur l'ordinateur des utilisateurs. C'est pourquoi vous rencontrez un moment difficile à l'aide de la balise video avec les vidéos de youtube.

    YouTube offre un développeur de l'API pour intégrer une vidéo youtube dans votre page.

    J'ai fait un JSFiddle comme un vivant 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 code 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 supporté sur iPad! Votre jsfiddle-exemple parfait pour illustrer: Sur pc, il fonctionne, sur iPad. ..Je suppose que je devrais poser une nouvelle question sur ce sujet, mais quelqu'un ici peut-être pouvez commenter?
    • Ma réponse devrait fonctionner sur n'importe quel navigateur compatible HTML5, qui aussi longtemps que vous avez une assez récente version de l'iOS (10+) sur votre iPad, il doit travailler. Si vous n'avez pas besoin de contrôler par programme de la vidéo, vous pouvez essayer d'utiliser le simple iframe intégrer des API. Vous pouvez trouver un exemple ici developers.google.com/youtube/iframe_api_reference#Examples, ou de la vue vinayvasyani de réponse. Si vous avez encore un problème, je voudrais poser une nouvelle question à l'aide de la ""Comment Poser une Bonne Question" lignes directrices sur la page stackoverflow.com/help/how-to-ask.
    • Je suis tombé sur ce productforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y, un problème similaire se produisant dans Firefox et il a été décidé qu'ils avaient besoin de demander plein écran autorisations. Donc, je suis prêt à parier que c'est pourquoi le plein écran ne fonctionne pas sur votre iPad, qui, malheureusement, iOS Safari n'apparaît pas à l'appui. Une autre solution est d'ajouter votre propre bouton plein écran et il suffit de les redimensionner l'iframe joueur de la largeur ou de la hauteur de votre écran.
    • 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 faire un plein écran bouton de mon propre comme vous l'avez proposé, et il fonctionne très bien.
    InformationsquelleAutor Norman Breau
  4. -3

    comment faire de la même manière hooktube t-il? ils n'en utilisent pas l'URL de la vidéo pour l'élément html5, mais la vidéo de google redirecteur url qui appelle cette vidéo. découvrez ici comment ils présentent quelques despacito vidéo aléatoire...

    <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 pour la vidéo à la suite de la page https://hooktube.com/watch?v=72UO0v5ESUo

    youtube mp3 sur l'autre main est devenu extrêmement monétisé monstre qui retourne maintenant download.html sur la moitié de la vidéo, les demandes de téléchargement... ennuyeux...

    les 2 liens dans cette réponse sont à mes expériences personnelles avec les deux ressources. comment hooktube est frais et agréable et permet en fait d'éviter la censure et de la géo restrictions.. check it out, c'est plutôt cool. et youtubeinmp4 est un popup monster maintenant connu comme ConvertInMp4...

    • cela ne fonctionne pas
    InformationsquelleAutor Sergey Kireyev
  5. -4

    Avec la nouvelle balise iframe intégré dans votre site web, le code détecte automatiquement si vous utilisez un navigateur qui prend en charge le HTML5 ou pas.

    Le code iframe pour intégrer des vidéos YouTube est la suivante, il suffit de copier l'ID Vidéo et de les remplacer dans le code ci-dessous:

    <iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>
    • La Question est pour la balise vidéo de droit???
    • "Nouveau" iframe tag? iframe a été autour depuis des siècles...
    • Le code ci-dessus a fonctionné pour moi
    • Ce n'est pas une solution pour la réponse, il indique clairement balise vidéo et pas d'iframe...
    • Peut-être que les OP ne savent pas à propos de l'existence de la iframe tag et c'est pourquoi il a demandé directement sur le video tag. Sinon, il n'aurait pas demandé si HTML5 (génériquement) prend en charge les vidéos de Youtube, mais il restreint la question de la video tag. Il a même demandé "est-il une solution de contournement pour qui?", dans sa dernière phrase, de sorte que cette réponse est parfaitement valide.
    • Pour intégrer youtube.com vidéos dans mon blogger.com blog, iframe est la seule solution pratique. En plus de cela, le code embed que youtube.com génère une balise iframe. Aussi, w3schools.com recommande iframes: http://www.w3schools.com/html/html_youtube.asp. Où la balise vidéo n'est pas mentionné.
    • Juste au cas où si quelqu'un est curieux... La question est à l'aide d'une balise vidéo n'est pas la bonne approche pour les vidéos YouTube, car les Url publiques à intégrer les vidéos YouTube ne sont pas une réelle ressource pour les médias. C'est pourquoi il y a des gens suggérant à l'aide des iframes. Essayez d'utiliser une balise vidéo va dire que vous allez être en utilisant des Url qui peut changer dans le futur. C'est comme tenter d'accéder à un membre privé dans un langage orienté-objet. Vous pouvez visionner des vidéos sur YouTube de la documentation officielle ici developers.google.com/youtube/iframe_api_reference#Examples

    InformationsquelleAutor vinayvasyani