在YouTube视频开始前显示自定义图片

我试图在“播放器”div中显示图像，然后在访问者单击按钮后，用视频替换它（用iFrame替换div）。这是我的代码：在YouTube视频开始前显示自定义图片

<!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 s，视频顶部的图片上，然后点击隐藏顶部div并开始播放视频，但这也不起作用。

来源

2012-11-01 Noga

这是一个变量范围界定问题。

YouTubeIframeAPIReady函数需要是一个全局变量 - 就像播放器变量一样。

我相信这个例子应该作为你想要的基础（如果你在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>

来源

2012-11-07 18:43:54

这工作正如我想要的，非常感谢。 – Noga

在YouTube视频开始前显示自定义图片

回答

相关问题