यूट्यूब वीडियो शुरू होने से पहले एक कस्टम तस्वीर दिखाएं

मैं "प्लेयर" 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/link क्लिक करने के बाद वीडियो प्रारंभ करने की आवश्यकता होगी। मैंने तस्वीर और वीडियो को div एस में अलग करने की कोशिश की है, वीडियो के शीर्ष पर चित्र और क्लिक के बाद शीर्ष div को छुपाएं और वीडियो शुरू करें, लेकिन यह काम नहीं करता है।

स्रोत

2012-11-01 Noga

यह एक परिवर्तनीय स्कॉइंग समस्या है।

YouTubeIframeAPIReady पर फ़ंक्शन एक वैश्विक चर होने की आवश्यकता है - जैसा कि खिलाड़ी चर है।

मेरा मानना है कि इस उदाहरण को आप जो चाहते हैं उसके आधार के रूप में काम करना चाहिए (अगर आप एपीआई डाउनलोड करने से पहले बटन पर क्लिक करते हैं तो दौड़ की स्थिति होती है, लेकिन एक पूर्ण कार्यान्वयन शायद ऐप-विशिष्ट होगा इसलिए मैं इसे छोड़ दूंगा पाठक)

<!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

यूट्यूब वीडियो शुरू होने से पहले एक कस्टम तस्वीर दिखाएं

उत्तर

संबंधित मुद्दे