आइफ्रेम छुपाते समय YouTube खिलाड़ी को कैसे रोकें?

Question 1

मैं एक छिपा div एक में एक यूट्यूब वीडियो से युक्त है <iframe>। जब उपयोगकर्ता किसी लिंक पर क्लिक करता है, तो यह div दिखाई देता है, उपयोगकर्ता को तब वीडियो चलाने में सक्षम होना चाहिए।

जब उपयोगकर्ता पैनल को बंद कर देता है, तो वीडियो को प्लेबैक बंद कर देना चाहिए। इसे कैसे प्राप्त किया जा सकता है?

कोड:

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->

Question 2

इस व्यवहार को लागू करने का सबसे आसान तरीका आवश्यक होने पर pauseVideoऔर playVideoतरीकों को कॉल करके है। मेरे पिछले उत्तर के परिणाम से प्रेरित होकर , मैंने वांछित व्यवहार को प्राप्त करने के लिए एक प्लगइन रहित फ़ंक्शन लिखा है।

केवल समायोजन:

मैंने एक फंक्शन जोड़ा है, toggleVideo
मैंने ?enablejsapi=1सुविधा को सक्षम करने के लिए YouTube के URL में जोड़ा है

डेमो: http://jsfiddle.net/ZcMkt/
कोड:

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>

Question 3

यहाँ एक jQuery के लिए एक खिड़की में एक आइफ्रेम छिपाने / उपयोग को रोकने के लिए रॉब के जवाब पर लिया गया है:

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

Html तत्वों को संदर्भित किया जाता है जो मोडल डिव (# वीडियो-डिव) शो / छिपाने के तरीकों को बुलाता है, और iframe (# वीडियो-आईफ्रेम) जो कि वीडियो url है जैसा कि src = "" है और इसमें प्रत्यय enablesapi = 1 है ? जो खिलाड़ी के प्रोग्रामेटिक नियंत्रण को सक्षम बनाता है (उदा।

Html पर अधिक जानकारी के लिए रॉब का जवाब देखें।

Question 4

यहाँ एक सरल jQuery स्निपेट है जो रॉब के और ड्रू के उत्तरों के आधार पर सभी वीडियो को रोकने के लिए है:

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});

Question 5

अरे एक आसान तरीका यह है कि आप वीडियो के src को कुछ भी सेट न करें, ताकि वीडियो डिसैपियर हो जाए जब वह छिपा हुआ हो, तब src वापस उस वीडियो पर सेट करें जिसे आप चाहते हैं जब आप वीडियो को खोलने वाले लिंक पर क्लिक करें .. करने के लिए कि बस यूट्यूब आइफ्रेम के लिए एक आईडी सेट और इस तरह से उस आईडी का उपयोग करके src फ़ंक्शन को कॉल करें:

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>

Question 6

चूंकि आपको अन्य उत्तरों में उल्लिखित / आदेशों का ?enablejsapi=trueउपयोग करने से पहले iframe के src में सेट करने की आवश्यकता होती है , इसलिए इस प्रोग्राम को जावास्क्रिप्ट के माध्यम से जोड़ना उपयोगी हो सकता है (विशेषकर यदि, उदाहरण के लिए। आप चाहते हैं कि यह व्यवहार दूसरे के साथ वीडियो पर लागू हो। वे उपयोगकर्ता जिन्होंने अभी-अभी YouTube एम्बेड कोड को काट और पेस्ट किया है)। उस स्थिति में, ऐसा कुछ उपयोगी हो सकता है:playVideopauseVideo

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

... यदि आप इस पर कॉल करते हैं, document.readyतो "वीडियो" के एक वर्ग के साथ एक div में सभी iframes enablejsapi=trueको उनके स्रोत में जोड़ दिया जाएगा , जो playVideo / pauseVideo कमांड को उन पर काम करने की अनुमति देता है।

(नायब। यह उदाहरण उस एक लाइन के लिए jQuery का उपयोग करता है जो सेट करता है var iframes, लेकिन सामान्य दृष्टिकोण को शुद्ध जावास्क्रिप्ट के साथ ही काम करना चाहिए यदि आप jQuery का उपयोग नहीं कर रहे हैं)।

Question 7

आप stopVideo()YouTube प्लेयर इंस्टेंस पर विधि को कॉल करके वीडियो को रोक सकते हैं जैसे div को छिपाने से पहले

player.stopVideo()

अधिक जानकारी के लिए यहां देखें: http://code.google.com/apis/youtube/js_api_reference.html#Playback-controls

Question 8

रॉब के तरीके ने मेरे लिए बहुत अच्छा काम किया। JQuery का उपयोग करने वाले लोगों के लिए यहां एक सरलीकृत संस्करण है जिसे मैंने उपयोग करके समाप्त किया है:

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);

इस उदाहरण में "video_player" एक पैरेंट डिव है जिसमें आइफ्रेम होता है।

Question 9

मैं एक समाधान साझा करना चाहता था जो कि jQuery का उपयोग करके आया था जो काम करता है यदि आपके पास एक ही पृष्ठ पर कई YouTube वीडियो एम्बेडेड हैं। मेरे मामले में, मैंने प्रत्येक वीडियो के लिए एक मोडल पॉपअप को निम्नानुसार परिभाषित किया है:

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

इस मामले में, VideoModalXX वीडियो के लिए एक अद्वितीय आईडी का प्रतिनिधित्व करता है। फिर, निम्न फ़ंक्शन वीडियो को रोकता है:

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

मुझे यह दृष्टिकोण पसंद है क्योंकि यह उस वीडियो को रोक कर रखता है जहां आप उस स्थिति में गए थे जब आप वापस जाना चाहते थे और बाद में देखते रहना चाहते थे। यह मेरे लिए अच्छी तरह से काम करता है क्योंकि यह एक विशिष्ट आईडी के साथ वीडियो मोडल के अंदर iframe की तलाश कर रहा है। किसी विशेष YouTube तत्व आईडी की आवश्यकता नहीं है। उम्मीद है, कोई इसे उपयोगी भी पाएगा।

Question 10

बस iframe का src हटा दें

$('button.close').click(function(){
    $('iframe').attr('src','');;
});

Question 11

रोब डब्ल्यू जवाब ने मुझे यह पता लगाने में मदद की कि एक स्लाइडर के छिपे होने पर iframe पर एक वीडियो को कैसे रोकना है। फिर भी, मुझे काम करने से पहले कुछ संशोधनों की आवश्यकता थी। यहाँ मेरे html का स्निपेट है:

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

ध्यान रखें कि यह लोकलहोस्टेस पर काम करता है और जैसा कि रोब डब्ल्यू ने उल्लेख किया है कि " enablejsapi = 1 " वीडियो URL के अंत में जोड़ा गया था।

निम्नलिखित मेरी JS फाइल है:

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};

इसके अलावा, एक सरल उदाहरण के रूप में, JSFiddle पर इसे देखें

Question 12

इस दृष्टिकोण के लिए jQuery की आवश्यकता है। सबसे पहले, अपना iframe चुनें:

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

अब आप इस iframe का बटन प्ले / पॉज़ चुनें और इसे क्लिक करें

$('button.ytp-play-button.ytp-button', yourIframe).click();

मुझे आशा है कि यह आपकी मदद करेगा।

Question 13

रॉब के जवाब यहां और अन्य जगहों पर बहुत मददगार थे, लेकिन मैंने पाया कि मेरी ज़रूरतें बहुत सरल हैं। मैंने इसका जवाब कहीं और दिया है , लेकिन शायद यह यहां भी उपयोगी होगा।

मेरे पास एक तरीका है जहां मैं UIWebView में लोड होने के लिए एक HTML स्ट्रिंग बनाता हूं:

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

आप तैयार किए गए HTML स्ट्रिंग में स्टाइलिंग सामान को अनदेखा कर सकते हैं। महत्वपूर्ण पहलू हैं:

"YT.player" ऑब्जेक्ट बनाने के लिए API का उपयोग करना। एक बिंदु पर, मेरे पास केवल iFrame टैग में वीडियो था और जिसने मुझे बाद में JS के साथ "प्लेयर" ऑब्जेक्ट को संदर्भित करने से रोका।
मैंने वेब पर कुछ उदाहरण देखे हैं जहां पहला स्क्रिप्ट टैग (iframe_api src टैग के साथ एक) छोड़ा गया है, लेकिन मुझे यह काम करने के लिए निश्चित रूप से आवश्यकता है।
एपीआई स्क्रिप्ट की शुरुआत में "खिलाड़ी" चर बनाना। मैंने कुछ उदाहरण भी देखे हैं जो उस लाइन को छोड़ चुके हैं।
एपीआई स्क्रिप्ट में संदर्भित करने के लिए iFrame में एक आईडी टैग जोड़ना। मैं उस हिस्से को लगभग भूल गया था।
IFrame src टैग के अंत में "enablejsapi = 1" जोड़ना। इसने मुझे थोड़ी देर के लिए लटका दिया, जैसा कि मैंने शुरू में इसे iFrame टैग की विशेषता के रूप में लिया था, जो मेरे लिए काम नहीं करता / करती।

जब मुझे वीडियो को रोकने की आवश्यकता होती है, तो मैं इसे चलाता हूं:

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

उम्मीद है की वो मदद करदे!

Question 14

यह मेरे लिए YT खिलाड़ी के साथ ठीक काम कर रहा है

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

this.youtube.player.pauseVideo ();

Question 15

एक और अधिक संक्षिप्त, सुरुचिपूर्ण और सुरक्षित उत्तर: वीडियो URL के अंत में "enablejsapi = 1" जोड़ें, फिर पॉज़ कमांड का प्रतिनिधित्व करने वाली एक सामान्य वस्तु का निर्माण और कड़ाई करें:

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

Window.postMessageएम्बेडेड वीडियो दस्तावेज़ में परिणामी JSON स्ट्रिंग भेजने के लिए विधि का उपयोग करें :

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

यह सुनिश्चित करने के लिए कि आप यह सुनिश्चित करने के लिए कि आपके संदेश किसी भी अनपेक्षित प्राप्तकर्ता को नहीं भेजे जाएंगे , Window.postMessageविधि के targetOriginतर्क के लिए वीडियो URL निर्दिष्ट करें ।