Vorausladen von youtube einbetten

Möchte ich über ein eingebettetes chromeless youtube-video Vorspannung video OHNE zu spielen, wenn die Seite geladen wird. Jetzt bin ich mit einem peinlichen "spielen, dann schnell pause" - script, das bewirkt, dass kleine Probleme (halb-Sekunden-audio-Lecks und scheitert ganz ein bisschen). Für diese scheinbar einfache Funktionalität, gibt es eine bessere/elegantere Möglichkeit, Vorspannung?

InformationsquelleAutor zakdances | 2011-11-11
  1. 3

    Ich hatte die gleiche Frage und bin auf diese Frage. Nach einigen Forschung, ich glaube, ich fand eine saubere, wenn auch ähnlich, Antwort.

    Wenn die JavaScript-API-Aufrufe OnYouTubePlayerReady ist, drücken Sie spielen und fügen Sie einen Ereignis-listener für onStateChange wird jedesmal aufgerufen, wenn der Spieler wechselt von Puffern zu spielen.

    Beispielsweise innerhalb der Funktion, die Sie hören, für Zustand 3,, die Pufferung, und sobald es heißt, Sie das video auf pause stellen.

    Können Sie sehen, diese Technik in Aktion in dieses jsFiddle.

    Seite Anmerkung: ich habe darauf verzichtet, die mit einem JavaScript-framework, das in meinem Beispiel, aber Sie konnte einfach ein hier.

    Auch, ich war nicht in der Lage zu abstrahieren, das Skript-tag aus dem body des HTML mit jsFiddle, aber eine externe script.js - Datei funktioniert Prima auf meinem eigenen server.

    • Ich fand, dass der Zustand 3 nicht immer in der Ladesequenz auf meinem high-speed-Verbindung. Stattdessen, was funktionierte, war das hören das, spielen Status, Stummschaltung der audio -, und anhalten.
    • Als der 2017.11.12, wenn ich versuche zu laufen, das JSFiddle in Chrome sehe ich You need Flash Player version 8 or higher to view this content.
    InformationsquelleAutor Steven Sokulski
  2. 0

    War ich auf der Suche nach einer Lösung für dieses problem und stieß auf diesen Artikel:

    Einbetten von YouTube-Videos Effizient und ohne Erhöhung der Ladezeit

    In der Zusammenfassung angegeben: mit Dieser Methode reduzieren Sie die Größe Ihrer Webseiten von 300-400 KB, während Sie Ihre Website mobilen freundlich.

    Fügen Sie diesen auf der Seite:

    <div class="youtube-container">
<div class="youtube-player" data-id="VIDEOID"></div>
</div>

    Die javascript -:

    <script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" +
        this.parentNode.dataset.id + "?  autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

    Die CSS -:

    <style>
.youtube-container {
    display: block;
    margin: 20px auto;
    width: 100%;
    max-width: 600px;
}
.youtube-player {
    display: block;
    width: 100%;
    /* assuming that the video has a 16:9 ratio */

    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: hand;
    cursor: pointer;
    display: block;
}
img.youtube-thumb {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: auto
}
div.play-button {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
</style>

    Finden Sie den original-Artikel Kommentare für zusätzliche änderungen, Vorschläge und Verbesserungen.

    • Ich könnte etwas fehlen, aber aus der Lektüre des Artikels, wird dieser code nicht Vorspannung ein YouTube-video, ohne es zu spielen, und damit ist nicht eine Antwort auf die Frage, wie angegeben.
    InformationsquelleAutor TexasB
  3. 0

    Wenn wir diese: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

    Vorspannung das Iframe kann helfen:

        <link rel="preload" href="https://www.youtube.com/embed/dQw4w9WgXcQ" as="document">
    InformationsquelleAutor dlaw007
  4. -1

    Call

    player.cueVideoById(videoId:String);

    Statt

    player.loadVideoById(videoId:String);
    • Funktioniert nicht. Von der offiziellen docs: "cueVideoByID: Lädt das angegebene video die Miniaturansicht, und bereitet den player, um das video abzuspielen. Der Spieler hat nicht verlangen, den FLV-bis playVideo() oder seekTo() aufgerufen wird." In anderen Worten, es hat nicht wirklich starten Pufferung der clip.
    • Du hast Recht. Wie es scheint, der einzige Weg wäre, es zu tun die Art und Weise Sie es tun. Ich kann vorschlagen, versuchen Listener für das Ereignis "playerStateChanged" und zu sehen, wenn der Staat spielt (1) rufen Sie dann pause. Sie könnten in der Lage zu unterbrechen früher.
    InformationsquelleAutor zachzurn
Schreibe einen Kommentar