Afficher la source de la vidéo Youtube dans le tag vidéo HTML5?

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

à partir de . 2015 / 02 / 24 . Il ya un site web (youtubeinmp4) qui vous permet de télécharger des vidéos youtube dans .mp4 format , vous pouvez exploiter ce (avec un peu de JavaScript) pour s'en tirer avec intégration des vidéos youtube dans <video> tags. Voici un démo de ceci en action.

Pros

• Assez facile à mettre en œuvre .
• tout à fait réponse de serveur rapide en fait (il ne 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 au préalable quelles vidéos vous alliez jouer, cela fonctionne pour tout utilisateur entré url).

Cons

• cela dépend évidemment des serveurs youtubeinmp4.com et de leur façon de fournir un lien de téléchargement (qui peut être passé comme une source <video> ), de sorte que cette réponse peut ne pas ê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 Standart.

Utilisation De La (Mini)

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

un peu moins commun mais assez petit, en utilisant l'url raccourcie youtube.be et l'attribut src directement dans la balise <video> .

Espère que cela aide! :)

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

liens intégrés YouTube ne sont pas seulement des vidéos, ils sont généralement des pages web qui contiennent de la logique pour détecter ce que votre utilisateur prend en charge et comment ils peuvent lire la vidéo youtube, en utilisant HTML5, ou flash, ou un autre plugin basé sur ce qui est disponible sur le PC des utilisateurs. C'est pourquoi vous avez du mal à utiliser la balise vidéo avec les vidéos youtube.

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

j'ai fait un JSFiddle comme un exemple vivant: 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 se trouve aussi 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
    }
});

impossible de le faire sans Javascript. Mais le merveilleux Médiaelement.la bibliothèque js travaillera merveilleusement dans ce but:

http://mediaelementjs.com/examples/?name=youtube

l'exemple ci-dessus montre l'utilisation d'une vidéo YouTube avec une balise <video> , mais a également un repli pour Flash pour les navigateurs qui ne le prennent pas en charge.

avec la nouvelle balise iframe intégrée dans votre site web, le code détectera automatiquement si vous utilisez un navigateur qui supporte HTML5 ou non.

le code iframe pour intégrer des vidéos YouTube est comme suit, il suffit de copier L'ID de la vidéo et de 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>

étapes à suivre:

1. ouvrez la vidéo de votre Youtube link .
2. clic Droit sur la vidéo. (Parfois tenir le clic droit)
3. cliquez sur"Copier le Code D'intégration". (Il sera automatiquement copier HTML Code )
4. collez-le dans votre propre HTML .

Que diriez-vous de faire comme hooktube does it? ils n'utilisent pas réellement L'URL vidéo pour l'élément html5, mais l'url du redirecteur vidéo google qui fait appel à cette vidéo. regardez ici 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 to mp3 on l'autre main est devenu extrêmement monétisé monstre qui retourne maintenant télécharger.html sur la moitié des demandes de téléchargement de vidéos... ennuyeux...

les 2 liens dans cette réponse sont à 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éo.. check it out, c'est plutôt cool. et youtubeinmp4 est un monstre popup maintenant connu sous le nom de ConvertInMp4...

<iframe allowfullscreen="true"
         allowscriptaccess="always"
         frameborder="0"
         height="100%"
         width="100%"
         scrolling="no"
         src="//www.youtube.com/embed/VIDEO_ID">
</iframe>