ध्वनि क्लाउड एम्बेड करते समय यूट्यूब एम्बेड रोकें

Question

मेरे पास एक संगीत ब्लॉग है जिसमें विभिन्न एम्बेडेड ध्वनि क्लाउड और यूट्यूब प्लेयर शामिल हैं।

मैं जो करना चाहता हूं वह किसी भी ऑडियो को एक साथ खेलने से रोकता है। दूसरे शब्दों में, जबकि मैं यूट्यूब वीडियो चला रहा हूं, अगर मैं ध्वनि क्लाउड एम्बेड करने के लिए क्लिक करता हूं तो मैं यूट्यूब प्लेयर को रोकना चाहता हूं और इसके विपरीत।

मैंने कोड विकसित किया है जो स्ट्रीमिंग यूट्यूब प्लेयर को रोकता है यदि मैं एक और यूट्यूब प्लेयर खेलने के लिए क्लिक करता हूं (ध्वनि क्लाउड पहले से ही यह निहित करता है)। मुझे बस इसे संगत पार करने की जरूरत है। वास्तव में कुछ मदद की सराहना करेंगे, धन्यवाद।

var playerCurrentlyPlaying = null; 
var players = {} 
YT_ready(function() { 
    $(".youtube_embed").each(function() { 
     var identifier = this.id; 
     var frameID = getFrameID(identifier); 
     if (frameID) { 
      players[frameID] = new YT.Player(frameID, { 
       events: { 
        "onStateChange": function(event){ 
         if (event.data == YT.PlayerState.PLAYING) 
         { 
          if(playerCurrentlyPlaying != null && 
           playerCurrentlyPlaying != frameID) 
          callPlayer(playerCurrentlyPlaying , 'pauseVideo'); 
          playerCurrentlyPlaying = frameID; 
         } 
        } 
       } 
      }); 
     } 
    }); 
}); 

मैं इन स्रोतों से कार्यों का इस्तेमाल किया है: Listening for Youtube Event in JavaScript or jQuery

YouTube iframe API: how do I control a iframe player that's already in the HTML?

YouTube API Target (multiple) existing iframe(s)

गाया UniqueID() का उपयोग कर HTML:

<span class="soundcloud_embed" id="soundcloud_post_312"> 
    <iframe id="ui-id-1" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F103518792&show_artwork=true&secret_token=s-LnOTK"></iframe> 
</span> 

<span class="youtube_embed" id="youtube_post_309"> 
    <iframe id="ui-id-2" width="528" height="190" src="//www.youtube.com/embed/Y3CYKXBEtf0" frameborder="0" allowfullscreen></iframe> 
</span> 

Answer 1

सबसे पहले शुरुआत पर SC.Widget.Events.PLAY {"loadedProgress":0,"currentPosition":0,"relativePosition":0} घटना के लिए घड़ी, बातें बहुत सरल बनाया जाएगा अगर आप इस तरह खुद को iframes पर एक आईडी प्राप्त करने में समर्थ हैं:

<span class="soundcloud_embed"> 
    <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F4997623" id="sound1"></iframe> 
</span> 
<span class="soundcloud_embed"> 
    <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F105153133" id="sound2"></iframe> 
</span> 
<span class="youtube_embed"> 
    <iframe width="400" height="225" src="//www.youtube.com/embed/tv8WgLEIPBg" id="vid1" frameborder="0" allowfullscreen></iframe> 
</span> 
<span class="youtube_embed"> 
    <iframe width="400" height="225" src="//www.youtube.com/embed/FmICU1gMAAw" id="vid2" frameborder="0" allowfullscreen></iframe> 
</span> 

हैं आप आईडी प्राप्त करने के लिए उल्लेख किए गए auto_html मणि को हैक करना नहीं चाहते हैं, तो आप या तो jquery के .uniqueId() फ़ंक्शन का उपयोग सभी आईफ्रेम पर उत्पन्न करने के लिए कर सकते हैं या आपके द्वारा संदर्भित पोस्ट से getFrameID() सहायक विधि का उपयोग कर सकते हैं (और पहले से ही प्रतीत होता है का उपयोग)।

यह संभव के रूप में आसान दो API (यूट्यूब और Soundcloud) एक दूसरे की घटनाओं के लिए प्रतिक्रिया करने के लिए सक्षम होने के लिए प्राप्त करने के लिए बनाने के लिए, आप जिनमें से खिलाड़ियों को अपने पृष्ठ पर हैं नियंत्रण वस्तुओं है कि ट्रैक रखने के एक जोड़े का उपयोग कर सकते हैं और उनमें से कौन सा वर्तमान में खेल रहा है (यह रणनीति आपके द्वारा संदर्भित लिंक द्वारा नियोजित की तरह ही है, लेकिन यह ट्रैक रखने में सक्षम होने के लिए विस्तारित किया जाता है कि कौन सा प्लेयर एपीआई से संबंधित है)। इसके साथ, एक सामान्य ठहराव समारोह है कि दोनों एपीआई के लिए एक साधारण आवरण रूप में कार्य करता परिभाषित:

var playerCurrentlyPlaying = {"api":null,"frameID":null}; 
var players = {"yt":{},"sc":{}}; 

pauseCurrentPlayer=function() { 
    var api=playerCurrentlyPlaying["api"], 
     frameid=playerCurrentlyPlaying["frameID"]; 

    switch(api) { 
    case "yt": 
     players[api][frameid].pauseVideo(); 
     break; 
    case "sc": 
     players[api][frameid]["widget"].pause(); 
     break; 
    } 
}; 

इसके बाद, आप दो अलग-अलग कार्यों को परिभाषित करना चाहते हैं; पहली बार जब भी एक यूट्यूब प्ले इवेंट कैप्चर किया जाता है, और दूसरा जब भी ध्वनि क्लाउड प्ले इवेंट कैप्चर किया जाता है तो उसे कॉल किया जाएगा। वर्तमान में साउंडक्लाउड एचटीएमएल 5 विजेट में कुछ बग हैं जो कुछ सुंदर बदसूरत हैक्स को शामिल करने की आवश्यकता को मजबूर करती हैं - यानी, जब आप पहली बार ध्वनि ध्वनि ध्वनि चलाते हैं तो कभी-कभी प्ले इवेंट नहीं निकाल दिया जाता है। सौभाग्य से, PLAY_PROGRESS घटना है, तो हम उस लाभ उठा सकते हैं, लेकिन यह भी तो कोई आवाज नहीं रुक कर और कोई वीडियो शुरू एक रेस स्थिति पैदा नहीं करता एक समाधान के शामिल करना चाहिए:

onYTPlay =function(frameid) { 
    if (playerCurrentlyPlaying["frameID"]!=frameid && playerCurrentlyPlaying["frameID"]!=null) { 
    pauseCurrentPlayer(); 
    } 
    playerCurrentlyPlaying["api"]="yt"; 
    playerCurrentlyPlaying["frameID"]=frameid; 
}; 

onSCPlay=function(frameid,event) { 
    if (event==SC.Widget.Events.PLAY||players["sc"][frameid]["firstplay"]==true) { 
    if (playerCurrentlyPlaying["api"]=="yt") { // because any soundcloud player will be automatically paused by another soundcloud event, we only have to worry if the currently active player is Youtube 
     pauseCurrentPlayer(); 
    } 
    playerCurrentlyPlaying["api"]="sc"; 
    playerCurrentlyPlaying["frameID"]=frameid; 
    players["sc"][frameid]["firstplay"]=false; 
    } 
}; 

अंत में, आप तो जोड़ सकते हैं यूट्यूब एम्बेड और साउंडक्लाउड एम्बेड करने के लिए आपके हुक, हैक को याद करते हुए हमें साउंडक्लाउड प्ले इवेंट के लिए डालना होगा।Soundcloud विजेट एपीआई (<script src="w.soundcloud.com/player/api.js"; type="text/javascript"></script>) एम्बेड करने के लिए याद रखें, और उसके बाद अपने बाइंडिंग करने के लिए इस कोड का उपयोग:

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

function onYouTubeIframeAPIReady() { 
    $(".youtube_embed iframe").each(function() { 
    players["yt"][$(this).attr('id')] = new YT.Player($(this).attr('id'), { 
     events: { 'onStateChange': onYTPlayerStateChange } 
    }); 
    }); 
} 

onYTPlayerStateChange = function(event) { 
    if (event.data==YT.PlayerState.PLAYING) { 
    onYTPlay(event.target.a.id); 
    } 
}; 

(function(){ 
    $(".soundcloud_embed iframe").each(function() { 
     var frameid=$(this).attr('id'); 
     players["sc"][frameid]={}; 
     players["sc"][frameid]={"widget":SC.Widget(document.getElementById(frameid)),"firstplay":true}; 
     players["sc"][frameid]["widget"].bind(SC.Widget.Events.READY, function() { 
     players["sc"][frameid]["widget"].bind(SC.Widget.Events.PLAY, function() { 
     onSCPlay(frameid,SC.Widget.Events.PLAY); 
     }); 
     players["sc"][frameid]["widget"].bind(SC.Widget.Events.PLAY_PROGRESS, function() { 
     onSCPlay(frameid,SC.Widget.Events.PLAY_PROGRESS); 
     }); 
    }); 
    }); 
    }()); 

यह दृष्टिकोण दोनों APIs के कई खिलाड़ियों को संभालने के लिए सेट किया गया है, और शालीनता से अगर एक्स्टेंसिबल होना चाहिए आप अन्य एम्बेड करने योग्य मीडिया विगेट्स का समर्थन करना चाहते हैं (बशर्ते वे एक ईवेंट का पर्दाफाश करते हैं जब वे खेलना शुरू करते हैं और उनके पास प्रोग्रामेटिक रूप से खिलाड़ियों को रोकने की क्षमता होती है)।

Answer 2

यह possi है ble। विजेट एपीआई खेल का मैदान जांचें। आप soundcloud iframe विजेट से सभी राज्य घटनाओं को देख सकते हैं। यह फ्लैश एम्बेड पर भी किया जा सकता है। https://w.soundcloud.com/player/api_playground.html

खेलने