youtubeビデオが始まる前にカスタム画像を表示する

"player" divに画像を表示しようとしているのですが、訪問者がボタンをクリックした後、ビデオに置き換えます（divをiFrameに置き換えてください）。ここに私のコード：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に入れようとしましたが、ビデオの上に画像があり、クリックした後では上のdivを隠してビデオを開始しましたが、どちらもうまくいきませんでした。

出典

2012-11-01 Noga

これは可変スコープの問題です。

YouTubeIframeAPIReadyの関数は、player変数と同様にグローバル変数である必要があります。

私はこの例があなたの望むものの基礎として機能すると信じています（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ビデオが始まる前にカスタム画像を表示する

答えて

関連する問題