javascript 预加载 youtube 嵌入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8088245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preloading a youtube embed
提问by zakdances
I want to have an embedded chromeless youtube video preload its video WITHOUT playing when the page loads. Right now I'm using an awkward "play then quickly pause" script which causes small problems (half-second audio leaks and fails quite a bit). For this seemingly simple functionality, is there a better/more elegant way to preload?
我想要一个嵌入的 chromeless youtube 视频预加载它的视频而不在页面加载时播放。现在我正在使用一个笨拙的“播放然后快速暂停”脚本，它会导致小问题（半秒音频泄漏并失败很多）。对于这个看似简单的功能，有没有更好/更优雅的预加载方式？
采纳答案by Steven Sokulski
I had the same question and came across this question. After some research, I think I found a cleaner, albeit similar, answer.
我有同样的问题，并遇到了这个问题。经过一番研究，我想我找到了一个更简洁但相似的答案。
When the JavaScript API calls OnYouTubePlayerReady, you press play and add an event listener to onStateChangethat will be called every time the player changes from buffering to play.
当 JavaScript API 调用 时OnYouTubePlayerReady，您按下播放键并添加一个事件侦听器onStateChange，每次播放器从缓冲变为播放时都会调用该侦听器。
For example, inside the function you listen for state 3, which is buffering, and as soon as it's called, you pause the video.
例如，在函数内部，您侦听状态 3（正在缓冲），一旦调用它，您就暂停视频。
You can see this technique in action in this jsFiddle.
您可以在这个 jsFiddle 中看到这种技术的实际应用。
Side note: I refrained from using a JavaScript framework in my example, but you could easily put one into place here.
旁注：在我的示例中，我没有使用 JavaScript 框架，但您可以轻松地在此处放置一个。
Also, I was unable to abstract the script tag out of the body of the HTML using jsFiddle, but an external script.jsfile works just fine on my own server.
此外，我无法使用 jsFiddle 从 HTML 正文中提取脚本标记，但外部script.js文件在我自己的服务器上运行良好。
回答by TexasB
I was looking for a solution to this problem and ran across this article:
我正在寻找解决此问题的方法并浏览了这篇文章：
Embed YouTube Videos Responsively without Increasing Load Time
在不增加加载时间的情况下以响应方式嵌入 YouTube 视频
The summary states: This method will reduce the size of your webpages by 300-400 KB while making your site mobile friendly.
摘要指出：此方法将您的网页大小减少 300-400 KB，同时使您的网站对移动设备友好。
Paste this on the page:
将此粘贴到页面上：
<div class="youtube-container">
<div class="youtube-player" data-id="VIDEOID"></div>
</div>
The javascript:
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>
The CSS:
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>
Refer to the original article comments for additional modification suggestions and improvements.
其他修改建议和改进请参考原文评论。
回答by dlaw007
If we view this: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
如果我们查看这个：https: //developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Preloading the Iframe may help:
预加载 Iframe 可能有帮助：
<link rel="preload" href="https://www.youtube.com/embed/dQw4w9WgXcQ" as="document">
回答by zachzurn
Call
称呼
player.cueVideoById(videoId:String);
Instead of
代替
player.loadVideoById(videoId:String);
