wake-up-neo.com

YouTube-Videoquelle in HTML5-Video-Tag anzeigen?

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

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

94
sri

Schritt 1: Füge &html5=True Zu deiner Lieblings-Youtube-URL hinzu

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

Schritt 3: Fügen Sie dem Video-Tag controls="controls" Hinzu: <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 expire Dinge zu geben scheint. Ich weiß nicht, wie lange die Zeichenfolge src funktioniert.

Ich teste mich immer noch.

Bearbeiten (28. Juli 2011): Beachten Sie, dass dieser Video-Quellcode spezifisch für ist den Browser, den Sie zum Abrufen der Seitenquelle verwenden. Ich denke, Youtube generiert diesen HTML-Code dynamisch (zumindest derzeit). Wenn ich also prüfe, ob ich ihn in Firefox kopiere, funktioniert er beispielsweise in Firefox, aber nicht in Chrome.

13
Simon Flack

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

Stand . 2015/02/24. Es gibt eine Website (youtubeinmp4) , die es erlaubt Wenn Sie YouTube-Videos in .mp4 format herunterladen möchten, können Sie dies (mit etwas JavaScript) ausnutzen, um YouTube-Videos nicht in <video> - Tags einzubetten. Hier ist eine Demo davon in Aktion.

Vorteile

  • Ziemlich einfach zu implementieren .
  • Ziemlich schnelle Serverantwort (zum Abrufen der Videos ist nicht viel erforderlich).
  • Abstraktion (die akzeptierte Lösung, auch wenn sie richtig funktioniert, wäre nur anwendbar, wenn Sie vorher wussten, welche Videos Sie abspielen würden. Dies funktioniert für alle vom Benutzer eingegebene URL).

Nachteile

  • Dies hängt natürlich von den youtubeinmp4.com - Servern und ihrer Art ab, einen Download-Link bereitzustellen (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;
        }
    }
}

Verwendung (vollständig)

<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, wenn Sie die verkürzte URL youtube.be Und das Attribut src direkt im Tag <video> Verwenden.

Ich hoffe es hilft! :)

36
undefined

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 mit Logik, mit der ermittelt wird, was Ihre Nutzer unterstützen und wie sie das YouTube-Video mit HTML5 oder Flash oder einem anderen Plug-in abspielen können, je nachdem, was auf dem PC des Nutzers verfügbar ist. Aus diesem Grund fällt es Ihnen schwer, das Video-Tag für 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 erhalten Sie hier: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Der Code kann auch unten gefunden werden

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
    }
});
16
Norman Breau