Youtube-Videoquelle in HTML5-Video-Tag anzeigen?

Ich versuche, eine YouTube-Videoquelle in das HTML5- <video>Tag einzufügen , aber es scheint nicht zu funktionieren. Nach einigem Googeln stellte ich fest, dass HTML5 YouTube-Video-URLs als Quelle nicht unterstützt.

Können Sie mit HTML5 YouTube-Videos einbetten? Wenn nicht, gibt es eine Problemumgehung?

Schritt 1: Fügen Sie &html5=TrueIhrer Lieblings-Youtube-URL hinzu

Schritt 2: Suchen Sie das <video/>Tag in der Quelle

Schritt 3: controls="controls"Zum Video-Tag hinzufügen:<video controls="controls"..../>

Beispiel:

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

Beachten Sie, dass es einige expireDinge zu geben scheint . Ich weiß nicht, wie lange die srcSaite funktionieren wird.

Ich teste mich immer noch.

Bearbeiten (28. Juli 2011) : Beachten Sie, dass dieses Video src spezifisch für den Browser ist, mit dem Sie die Seitenquelle abrufen. Ich denke, Youtube generiert diesen HTML-Code dynamisch (zumindest derzeit). Wenn ich also teste, ob ich in Firefox kopiere, funktioniert dies in Firefox, aber nicht beispielsweise in Chrome.

Diese Antwort funktioniert nicht mehr, aber ich suche nach einer Lösung.

Ab . 2015/02/24. Es gibt eine Website (youtubeinmp4) , auf der Sie YouTube-Videos herunterladen .mp4 formatkönnen. Sie können diese (mit etwas JavaScript) nutzen, um YouTube-Videos in <video>Tags einzubetten. Hier ist eine Demo davon in Aktion.

Vorteile

• Ziemlich einfach zu implementieren .
• Eigentlich ziemlich schnelle Serverantwort (es braucht nicht so viel, um die Videos abzurufen).
• Abstraktion (die akzeptierte Lösung, selbst wenn sie ordnungsgemäß funktioniert, wäre nur anwendbar, wenn Sie vorher wussten, welche Videos Sie abspielen würden. Dies funktioniert für jede vom Benutzer eingegebene URL).

Nachteile

• Dies hängt natürlich von den youtubeinmp4.comServern und ihrer Art der Bereitstellung eines Download-Links ab (der als <video>Quelle übergeben werden kann), sodass diese Antwort möglicherweise in Zukunft nicht mehr gültig ist.

• Sie können die Videoqualität nicht auswählen.

JavaScript (nach 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;
        }
    }
}

Nutzung (voll)

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

Standard-Videoformat.

Verwendung (Mini)

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

Etwas seltener, aber viel kleiner, wobei die verkürzte URL youtu.beals srcAttribut direkt im <video>Tag verwendet wird.

Ich hoffe es hilft! :) :)

Das <video>Tag soll in ein Video eines unterstützten Formats geladen werden (das je nach Browser unterschiedlich sein kann).

Bei YouTube-Einbettungslinks handelt es sich nicht nur um Videos, sondern in der Regel um Webseiten, die Logik enthalten, um zu erkennen, was Ihr Nutzer unterstützt und wie er das YouTube-Video mithilfe von HTML5, Flash oder einem anderen Plugin abspielen kann, je nachdem, was auf dem PC des Benutzers verfügbar ist. Aus diesem Grund fällt es Ihnen schwer, das Video-Tag mit YouTube-Videos zu verwenden.

YouTube bietet eine Entwickler-API zum Einbetten eines YouTube-Videos in Ihre Seite.

Ich habe eine JSFiddle als Live-Beispiel erstellt: http://jsfiddle.net/zub16fgt/

Weitere Informationen zur YouTube-API finden Sie hier: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Der Code ist auch unten zu finden

In Ihrem HTML:

<div id="player"></div>

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

Wie wäre es so, wie es Hooktube macht? Sie verwenden nicht die Video-URL für das HTML5-Element, sondern die Google Video Redirector-URL, die dieses Video aufruft. Schauen Sie sich hier an, wie sie ein Despacito-Zufallsvideo präsentieren ...

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

Der Code bezieht sich auf die folgende Videoseite: https://hooktube.com/watch?v=72UO0v5ESUo

youtube to mp3 hingegen hat sich in ein extrem monetisiertes Monster verwandelt, das jetzt download.html auf die Hälfte der Video-Download-Anfragen zurückgibt ... ärgerlich ...

Die 2 Links in dieser Antwort beziehen sich auf meine persönlichen Erfahrungen mit beiden Ressourcen. Wie hooktube schön und frisch ist und tatsächlich dazu beiträgt, Zensur und Geobeschränkungen zu vermeiden. Probieren Sie es aus, es ist ziemlich cool. und youtubeinmp4 ist ein Popup-Monster, das jetzt als ConvertInMp4 bekannt ist ...

Mit dem neuen iframe-Tag, das in Ihre Website eingebettet ist, erkennt der Code automatisch, ob Sie einen Browser verwenden, der HTML5 unterstützt oder nicht.

Der Iframe-Code zum Einbetten von YouTube-Videos lautet wie folgt: Kopieren Sie einfach die Video-ID und ersetzen Sie sie im folgenden Code:

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