Question

我希望有一个嵌入式chromeless youtube视频预加载其视频，而不会在页面加载时播放。现在我正在使用一个尴尬的“播放然后快速暂停”脚本，这会导致小问题（半秒音频泄漏并且失败很多）。对于这个看似简单的功能，是否有更好/更优雅的预加载方式？

Answer 1

我有同样的问题并且遇到了这个问题。经过一些研究，我认为我找到了一个更清晰，尽管相似的答案。

当JavaScript API调用OnYouTubePlayerReady时，您按下播放并向onStateChange添加一个事件侦听器，每次播放器从缓冲更改为播放时都会调用该事件侦听器。

例如，在您正在侦听状态3的函数内部，即缓冲状态，并且一旦调用它，您就会暂停视频。

您可以在this jsFiddle中查看此技术。

旁注：在我的示例中，我没有使用JavaScript框架，但您可以轻松地将其放在此处。

此外，我无法使用jsFiddle从HTML主体中抽象出脚本标记，但外部script.js文件在我自己的服务器上运行正常。

Answer 2

我一直在寻找这个问题的解决方案并遇到了这篇文章：

Embed YouTube Videos Responsively without Increasing Load Time

摘要说明：此方法会将您的网页大小减少300-400 KB，同时使您的网站对移动设备友好。

将其粘贴在页面上：

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

如果我们查看以下内容：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 4

呼叫

player.cueVideoById(videoId:String);

而不是

player.loadVideoById(videoId:String);

预加载youtube嵌入

4 个答案: