我尝试在“播放器”div 中显示图像，然后在访问者单击按钮后，将其替换为视频(将 div 替换为 iFrame)。这是我的代码:
<!DOCTYPE html>
<head>
<style type="text/css">
html {
text-align: center;
}
#player {
display: inline-block;
width: 640px;
height: 360px;
background: url(http://placehold.it/640x360) no-repeat;
}
</style>
</head>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<p><button onclick="playMe()">Play</button></p>
<script>
function playMe() {
// 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: '360',
width: '640',
videoId: 'JW5meKfy3fY',
playerVars: { 'autoplay': 0, 'controls': 0, 'rel': 0, 'showinfo': 0 },
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
}
</script>
</body>
</html>
但它不起作用。
它在删除“playMe”功能时有效，但我需要在单击按钮/div/链接后开始播放视频。我试图将图片和视频放入单独的 div 中，图片放在视频顶部，然后点击隐藏顶部 div 并启动视频，但这也不起作用.
最佳答案
这是一个可变范围问题。
函数 onYouTubeIframeAPIReady 需要是一个全局变量 - 播放器变量也是如此。
我相信这个例子应该可以作为你想要的基础(如果你在 api 下载之前点击按钮会出现竞争条件，但完整的实现可能是特定于应用程序的，所以我会把它留给读者)
<!DOCTYPE html>
<head>
<style type="text/css">
html {
text-align: center;
}
#player {
display: inline-block;
width: 640px;
height: 360px;
background: url(http://placehold.it/640x360) no-repeat;
}
</style>
</head>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<p><button onclick="playMe()">Play</button></p>
<script>
// 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. called after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
// don't need anything here
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
function playMe() {
if (window.YT) {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'JW5meKfy3fY',
playerVars: { 'autoplay': 0, 'controls': 0, 'rel': 0, 'showinfo': 0 },
events: {
'onReady': onPlayerReady
}
});
}
}
</script>
</body>
</html>
关于javascript - 在 youtube 视频开始之前显示自定义图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13178800/