我想让嵌入的 chromeless youtube 视频预加载其视频，而不在页面加载时播放。现在我正在使用一个尴尬的“播放然后快速暂停”脚本，这会导致一些小问题（半秒音频泄漏并且失败了很多）。对于这个看似简单的功能，有没有更好/更优雅的预加载方式？
【问题讨论】：
标签： javascript jquery video youtube embedding
打电话
player.cueVideoById(videoId:String);
代替
player.loadVideoById(videoId:String);
【讨论】：
我有同样的问题并遇到了这个问题。经过一番研究，我想我找到了一个更简洁但相似的答案。
当 JavaScript API 调用 OnYouTubePlayerReady 时，您按下播放键并向 onStateChange 添加一个事件监听器，每次播放器从缓冲变为播放时都会调用该监听器。
例如，在函数内部，您监听状态 3，即正在缓冲，一旦调用，您就暂停视频。
您可以在this jsFiddle 中看到这种技术的实际应用。
附注：在我的示例中，我没有使用 JavaScript 框架，但您可以轻松地在此处使用。
此外，我无法使用 jsFiddle 从 HTML 正文中提取脚本标记，但外部 script.js 文件在我自己的服务器上运行良好。
【讨论】：
You need Flash Player version 8 or higher to view this content.
我一直在寻找解决这个问题的方法，偶然发现了这篇文章：
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>
更多修改建议和改进请参考原文章cmets。
【讨论】：
如果我们看到这个：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
预加载 iframe 可能会有所帮助：
<link rel="preload" href="https://www.youtube.com/embed/dQw4w9WgXcQ" as="document">
【讨论】：