2013-06-06 10 views
5

मेरे पास वेबसाइट पर पृष्ठभूमि शोर है जो ग्राहक वेबसाइट पर लूप पर खेलना चाहता है, इसलिए मैंने <audio> टैग स्थापित किया है जो ऑटोप्ले और लूप।यूट्यूब जावास्क्रिप्ट एपीआई - जब यूट्यूब वीडियो चलाता है तो ऑडियो रोकें

कई पृष्ठों पर, मैं उदाहरण के लिए एक से अधिक YouTube एम्बेडेड iframes का जो यूट्यूब वीडियो पृष्ठों के साथ एम्बेडेड कोड का उपयोग कर की घोषणा की जाती है,:

<iframe width="420" height="315" src="http://www.youtube.com/embed/Y3OR9HnB14I?rel=0" frameborder="0" allowfullscreen></iframe>

क्या वे चाहते हैं, है कि एक यूट्यूब वीडियो है जब खेला/फिर से शुरू किया गया, ऑडियो रुक गया और जब एक यूट्यूब वीडियो रोका/रोका गया तो ऑडियो फिर से शुरू करें।

क्या किसी को यह पता चला है कि यूट्यूब जावास्क्रिप्ट एपीआई का उपयोग करके इसे कैसे किया जाए?

उत्तर

7

आपको ऐसा करने के लिए यूट्यूब जावास्क्रिप्ट प्लेयर एपीआई का उपयोग करने में सक्षम होना चाहिए। आप अपने सभी एम्बेडेड खिलाड़ियों पर ऑनस्टेट चेंज इवेंट सुन सकते हैं, जब उनमें से किसी एक से "1" (खेलना) आता है, तो आप इसे रोक देते हैं। जब या तो "2" (रोका गया) या "0" (समाप्त) आता है तो आप फिर से शुरू कर सकते हैं।

यह मेरे लिए काम करता है:

<html> 
    <head> 
    <script language="javascript"> 
     var player = null; 
     var lobbyAudio = null; 

     function onYouTubePlayerReady(playerapiid) { 
     player = document.getElementById(playerapiid); 
     lobbyAudio = document.getElementById('lobby-audio'); 
     player.addEventListener("onStateChange", "onYouTubePlayerStateChange"); 
     } 

     function onYouTubePlayerStateChange(state) { 
     switch (state) { 
      case 1: // playing 
      lobbyAudio.pause(); 
      break; 
      case 0: // ended 
      case 2: // paused 
      lobbyAudio.play(); 
      break; 
     } 
     } 
    </script> 
    <body> 
    <audio id="lobby-audio" src="lobby-audio.mp3" autoplay="True" controls="True" loop="True"></audio> 

    <object width="640" height="360"> 
     <param name="movie" 
     value="https://www.youtube.com/v/t-aOvEweUEw?enablejsapi=1&playerapiid=ytplayer1&version=3"></param> 
     <param name="allowFullScreen" value="true"></param> 
     <param name="allowScriptAccess" value="always"></param> 
     <embed 
      id="ytplayer1" 
      src="https://www.youtube.com/v/t-aOvEweUEw?enablejsapi=1&playerapiid=ytplayer1&version=3" 
      type="application/x-shockwave-flash" allowfullscreen="true" 
      allowScriptAccess="always" width="640" height="360"> 
     </embed> 
    </object> 
    </body> 
</html> 

मैं एक व्यायाम के रूप में छोड़ आप यह पता लगाने के लिए कैसे में कई वीडियो = के लिए राज्य का ट्रैक रखने के) लेकिन एक संकेत है कि onYouTubePlayerReady() कहा जाता है एक बार पृष्ठ पर हर खिलाड़ी के लिए। आप प्रत्येक खिलाड़ी को अलग करने के लिए एक अलग प्लेयरपीआईड निर्दिष्ट कर सकते हैं। (उदाहरण में ऊपर मैं एकल खिलाड़ी के लिए "ytplayer1" का इस्तेमाल किया

+0

आपके द्वारा घोषित किए गए दो कार्यों के साथ, क्या ये यूट्यूब जावास्क्रिप्ट एपीआई फ़ंक्शंस को ओवरराइड करते हैं? मुझे आपके द्वारा निष्पादित कोड में कहीं भी दिखाई नहीं देता है - इसलिए मुझे लगता है कि एपीआई के माध्यम से इन निष्पादन? –

+0

मुझे मेरी टिप्पणी का उत्तर मिला एपीआई संदर्भ। Usua नए संदर्भ गाइड के आसपास मेरा सिर पाने के लिए मुझे कुछ घंटे लगते हैं .. धन्यवाद। –

+1

हेहे। हां, वे दोनों एपीआई से निष्पादित हैं, जैसे ईवेंट आधारित। onYouTubePlayerReady() एक हार्ड-कोड नाम है। YouTubePlayerStateChange पर मैं पहले नाम के साथ addEventListener को कॉल करके कॉल करने के लिए कहता हूं। – Christian

3
API docs से

:

घटनाक्रम

onStateChange इस घटना आग जब भी खिलाड़ी के राज्य बदल जाता है। एपीआई आपके ईवेंट श्रोता समारोह में गुजरने वाला मान पूर्णांक निर्दिष्ट करेगा जो नए प्लेयर स्थिति से मेल खाता है। संभावित मान हैं:

-1 (unstarted) 
    0 (ended) 
    1 (playing) 
    2 (paused) 
    3 (buffering) 
    5 (video cued). 

जब खिलाड़ी पहले वीडियो लोड करता है, तो यह एक अनस्टार्ट (-1) ईवेंट प्रसारित करेगा। जब कोई वीडियो क्यूड और खेलने के लिए तैयार होता है, तो खिलाड़ी एक वीडियो cued (5) ईवेंट प्रसारित करेगा। अपने कोड में, आप पूर्णांक मान निर्दिष्ट कर सकते हैं या आप निम्नलिखित namespaced चर से एक का उपयोग कर सकते हैं:

YT.PlayerState.ENDED 
    YT.PlayerState.PLAYING 
    YT.PlayerState.PAUSED 
    YT.PlayerState.BUFFERING 
    YT.PlayerState.CUED 

और खेलने के लिए/वीडियो उपयोग थामने:

एक वीडियो बजाना

player.playVideo(): शून्य वर्तमान में cued/loaded वीडियो चलाता है। इस समारोह निष्पादन के बाद अंतिम खिलाड़ी राज्य खेलेंगे (1)।

नोट: प्लेबैक केवल वीडियो के आधिकारिक दृश्य गणना की ओर गिना जाता है यदि इसे प्लेयर में देशी प्ले बटन के माध्यम से शुरू किया जाता है।

प्लेयर.pause वीडियो(): शून्य वर्तमान में चल रहे वीडियो को रोकता है। इस फ़ंक्शन निष्पादन के बाद अंतिम खिलाड़ी स्थिति रोका जाएगा (2) जब तक कि खिलाड़ी में समाप्त होता है (0) राज्य को फ़ंक्शन कहा जाता है, जिस स्थिति में खिलाड़ी स्थिति नहीं बदलेगी।

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