Предварительная загрузка YouTube встраивания

Question

Я хочу, чтобы встроенное хромированное видео на YouTube предварительно загружало видео без воспроизведения при загрузке страницы. Прямо сейчас я использую неловкий сценарий «играй потом быстро пауза», который вызывает небольшие проблемы (полсекунды аудио пропадает и терпит неудачу совсем немного). Для этой, казалось бы, простой функциональности, есть ли лучший / более элегантный способ предварительной загрузки?

Answer 1

У меня был тот же вопрос, и я столкнулся с этим вопросом.После некоторого исследования, я думаю, я нашел более чистый, хотя и похожий ответ.

Когда JavaScript API вызывает OnYouTubePlayerReady, вы нажимаете кнопку воспроизведения и добавляете прослушиватель событий в onStateChange, который будет вызываться каждый раз, когдаигрок переключается с буферизации на воспроизведение.

Например, внутри функции, которую вы слушаете для состояния 3, которая является буферизацией, и как только она вызывается, вы приостанавливаете видео.

Вы можете увидетьэта техника в действии в this jsFiddle .

Примечание: я воздержался от использования JavaScript-фреймворка в моем примере, но вы могли бы легко установить его здесь.

Кроме того, мне не удалось абстрагировать тег script от тела HTML с помощью jsFiddle, но внешний файл script.js прекрасно работает на моем собственном сервере.

Answer 2

Если мы посмотрим на это: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Предварительная загрузка Iframe может помочь:

    <link rel="preload" href="https://www.youtube.com/embed/dQw4w9WgXcQ" as="document">

Answer 3

Я искал решение этой проблемы и наткнулся на эту статью:

Отзыв видео YouTube без увеличения времени загрузки

Сводная информация гласит: этот метод уменьшит размер ваших веб-страниц на 300-400 КБ, делая ваш сайт мобильным.

Вставьте это на страницу :

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

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>

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>

Обратитесь к исходным комментариям к статье для дополнительных предложений по модификации и изменениям.

Answer 4

Вызов

player.cueVideoById(videoId:String);

Вместо

player.loadVideoById(videoId:String);