Javascript 点击播放 Youtube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42711959/
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
Play Youtube video on click
提问by Fred
I'm using Youtube API, and have several Divs as thumbnails. When one thumbnail (div) is clicked, the corresponding Youtube video should play. I'm using an iframe element for the video, and the webpage is made up of only HTML, CSS and JavaScript. If I don't use a button (thumbnails/div with onclick) but rather have a blank page with the Youtube API JavaScript code, it'll work. However, when I try to wrap everything inside a function call (from the div's onclick) nothing happens, but I get this error.
我正在使用 Youtube API，并有几个 Div 作为缩略图。单击一个缩略图 (div) 时，应播放相应的 Youtube 视频。我为视频使用了 iframe 元素，网页仅由 HTML、CSS 和 JavaScript 组成。如果我不使用按钮（带有 onclick 的缩略图/div），而是使用带有 Youtube API JavaScript 代码的空白页面，它会起作用。但是，当我尝试将所有内容包装在函数调用中（来自 div 的 onclick）时，没有任何反应，但出现此错误。
"Refused to execute script from 'https://www.youtube.com/embed/HVldRjNb4BE' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."
“拒绝执行来自‘ https://www.youtube.com/embed/HVldRjNb4BE’的脚本，因为其 MIME 类型 (‘text/html’) 不可执行，并且启用了严格的 MIME 类型检查。”
Here is my code:
这是我的代码：
HTML:
HTML：
<div id="player"></div>
JavaScript:
JavaScript：
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
This code is just copied from https://developers.google.com/youtube/iframe_api_reference.
此代码只是从https://developers.google.com/youtube/iframe_api_reference复制而来。
When this is all I have in the document, a player is there when the page loads, and the video is ready to play. So to clarify my question, how can I make it so that when a user clicks one of the buttons (div) the Youtube player displays and play the video?
当这是我在文档中的全部内容时，当页面加载时播放器就在那里，并且视频可以播放了。因此，为了澄清我的问题，我该如何制作，以便当用户单击其中一个按钮 (div) 时，Youtube 播放器会显示并播放视频？
回答by Amitesh Kumar
Hello i think this will help you :
您好，我认为这会对您有所帮助：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Play Youtube Video On Click</title>
</head>
<body>
<button onclick="myFunction();return false;">Click me</button>
<div id="video"></div>
<script>
function myFunction() {
document.getElementById("video").innerHTML = "<div id='player'></div>";
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
