Le préchargement une youtube

Je veux avoir un intégré à chromeless vidéo youtube précontrainte sa vidéo SANS jouer lorsque le chargement de la page. Je suis aujourd'hui à l'aide d'un maladroit "jouer, puis rapidement pause" script qui provoque des petits problèmes (une demi-seconde de l'audio fuites et ne parvient pas tout à fait un peu). Pour ce qui semble être une fonctionnalité simple, est-il mieux/plus élégant pour précharger?

InformationsquelleAutor zakdances | 2011-11-11
  1. 3

    J'ai eu la même question et suis tombé sur cette question. Après quelques recherches, je crois que j'ai trouvé un nettoyant, quoique similaire, réponse.

    Lorsque les appels d'API JavaScript OnYouTubePlayerReady, vous appuyez sur play et ajouter un écouteur d'événement à onStateChange qui sera appelée à chaque fois que le joueur changements de mise en mémoire tampon à jouer.

    Par exemple, à l'intérieur de la fonction vous écouter pour l'état 3, qui est la mémoire tampon, et dès qu'on l'appelle, vous mettre la vidéo en pause.

    Vous pouvez le voir, cette technique dans cette jsFiddle.

    Note de côté: je me suis abstenu de l'aide d'un framework JavaScript dans mon exemple, mais vous pouvez facilement en mettre un en place ici.

    Aussi, j'ai été incapable d'abstraction de la balise de script sur le corps de l'HTML à l'aide de jsFiddle, mais externe script.js fichier fonctionne très bien sur mon propre serveur.

    • J'ai trouvé que l'état 3 n'était pas toujours une partie de la séquence de chargement sur ma connexion à haute vitesse. Au lieu de ce qui a fonctionné a été à l'écoute à la lecture de l'état, l'inhibition de l'audio, et la mise en pause.
    • Comme de 2017.11.12, lorsque j'essaie d'exécuter le JSFiddle dans google Chrome, je vois You need Flash Player version 8 or higher to view this content.
    InformationsquelleAutor Steven Sokulski
  2. 0

    Je cherchais une solution à ce problème et a couru à travers cet article:

    Intégration de Vidéos YouTube Rapidement sans Augmenter les Temps de Chargement

    Les états de synthèse: Cette méthode permettra de réduire la taille de vos pages web par 300 à 400 KO tout en rendant votre site mobile-friendly.

    Coller sur la page:

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

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

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

    Se référer à l'article original commentaires pour plus d'modification des suggestions et des améliorations.

    • J'ai peut être raté quelque chose, mais d'avoir lu l'article, ce code n'est pas précharger une vidéo YouTube sans jouer, et n'est donc pas une réponse à la question comme l'a déclaré.
    InformationsquelleAutor TexasB
  3. 0

    Si nous considérons ceci: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

    De préchargement de l'Iframe peut aider:

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

    Appel

    player.cueVideoById(videoId:String);

    Au lieu de

    player.loadVideoById(videoId:String);
    • Ne fonctionne pas. De la officiel docs: "cueVideoByID: Charge la vidéo de la miniature et prépare le lecteur à la lecture de la vidéo. Le joueur ne demande pas l'FLV jusqu'à playVideo() ou seekTo() est appelée." En d'autres termes, il n'a pas vraiment de début de mise en mémoire tampon le clip.
    • Vous êtes de droite. Il semble que le seul moyen serait de le faire de la façon dont vous le faites. Je peux vous suggérer d'essayer d'écouter l'événement "playerStateChanged" et de voir si l'état est en cours de lecture (1) puis d'appeler la pause. Vous pourriez être en mesure de mettre en pause plus tôt.
    InformationsquelleAutor zachzurn