我正在使用youtube API，并且有几个Divs作为缩略图。单击一个缩略图（DIV）时，应播放相应的YouTube视频。我正在为视频使用iframe元素，并且网页仅由HTML，CSS和JavaScript组成。如果我不使用按钮（带有OnClick的缩略图/DIV），而是使用YouTube API JavaScript代码的空白页，则可以使用。但是，当我尝试将函数调用中的所有内容包裹起来（从DIV的OnClick中），但没有发生任何错误，但是我会遇到此错误。
"拒绝从'https://www.youtube.com/embed/hvldrjnb4be'执行脚本，因为它的MIME类型（'Text/html'）不可执行，并且启用了严格的Mime类型检查。P>
这是我的代码：
html：
<div id="player"></div>
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();
}
此代码仅从https://developers.google.com/youtube/iframe_api_reference复制。
当我在文档中所拥有的一切时，页面加载时会有一个播放器，并且可以播放视频。因此，为了澄清我的问题，我该怎么做，以便用户点击一个按钮（DIV）时，YouTube播放器显示并播放视频？
你好，我认为这会帮助您：
<!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>
我意识到这是一个旧线程，但这是Google上的最佳搜索结果。在JavaScript中播放YouTube视频的一种更简单的方法是更改YouTube Iframe对象的 src 属性，以包括？autoplay = 1 属性。
>JavaScript：
document.getElementById('my_youtube').src = 'https://www.youtube.com/embed/VIDEO_ID?autoplay=1'
html：
<iframe id="my_youtube" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
上面的JavaScript代码可以添加到 onclick 处理程序中。