YouTube Player API Reference for iframe Embeds

iFrame प्लेयर एपीआई की मदद से, अपनी वेबसाइट पर YouTube वीडियो प्लेयर को एम्बेड किया जा सकता है. साथ ही, JavaScript का इस्तेमाल करके प्लेयर को कंट्रोल किया जा सकता है.

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

इस गाइड में, IFrame API का इस्तेमाल करने का तरीका बताया गया है. यह उन अलग-अलग तरह के इवेंट की पहचान करता है जिन्हें एपीआई भेज सकता है. साथ ही, उन इवेंट का जवाब देने के लिए, इवेंट लिसनर लिखने का तरीका भी बताता है. इसमें अलग-अलग JavaScript फ़ंक्शन के बारे में भी बताया गया है. इन फ़ंक्शन का इस्तेमाल करके, वीडियो प्लेयर को कंट्रोल किया जा सकता है. साथ ही, प्लेयर पैरामीटर का इस्तेमाल करके, प्लेयर को पसंद के मुताबिक बनाया जा सकता है.

ज़रूरी शर्तें

उपयोगकर्ता के ब्राउज़र में, HTML5 postMessage सुविधा काम करती हो. ज़्यादातर आधुनिक ब्राउज़र में postMessage काम करता है.

एम्बेड किए गए प्लेयर का व्यूपोर्ट कम से कम 200 x 200 पिक्सल का होना चाहिए. अगर प्लेयर में कंट्रोल दिखते हैं, तो वे ज़रूरत के मुताबिक बड़े होने चाहिए, ताकि वे व्यूपोर्ट को कम से कम साइज़ से छोटा किए बिना पूरी तरह से दिख सकें. हमारा सुझाव है कि 16:9 आसपेक्ट रेशियो वाले प्लेयर कम से कम 480 पिक्सल चौड़े और 270 पिक्सल लंबे होने चाहिए.

IFrame API का इस्तेमाल करने वाले किसी भी वेब पेज को, यह JavaScript फ़ंक्शन भी लागू करना होगा:

  • onYouTubeIframeAPIReady – जब पेज, प्लेयर एपीआई के लिए JavaScript डाउनलोड कर लेगा, तब एपीआई इस फ़ंक्शन को कॉल करेगा. इसके बाद, पेज पर एपीआई का इस्तेमाल किया जा सकेगा. इसलिए, यह फ़ंक्शन ऐसे प्लेयर ऑब्जेक्ट बना सकता है जिन्हें आपको पेज लोड होने पर दिखाना है.

शुरू करना

यहां दिए गए सैंपल HTML पेज में, एम्बेड किया गया प्लेयर बनाया गया है. यह प्लेयर, वीडियो को लोड करके छह सेकंड तक चलाएगा और फिर उसे बंद कर देगा. एचटीएमएल में नंबर वाली टिप्पणियों के बारे में, उदाहरण के नीचे दी गई सूची में बताया गया है.

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <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. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

ऊपर दिए गए सैंपल के बारे में ज़्यादा जानकारी यहां दी गई है:

  1. इस सेक्शन में मौजूद <div> टैग, पेज पर उस जगह की पहचान करता है जहां IFrame API, वीडियो प्लेयर को डालेगा. प्लेयर ऑब्जेक्ट के कन्स्ट्रक्टर, जिसे वीडियो प्लेयर लोड करना सेक्शन में बताया गया है, वह <div> टैग की पहचान उसके id से करता है. इससे यह पक्का होता है कि एपीआई, <iframe> को सही जगह पर डालता है. खास तौर पर, IFrame API, <div> टैग को <iframe> टैग से बदल देगा.

    इसके अलावा, <iframe> एलिमेंट को सीधे पेज पर भी डाला जा सकता है. वीडियो प्लेयर लोड करना सेक्शन में, ऐसा करने का तरीका बताया गया है.

  2. इस सेक्शन में मौजूद कोड, IFrame Player API का JavaScript कोड लोड करता है. इस उदाहरण में, एपीआई कोड को डाउनलोड करने के लिए डीओएम में बदलाव किया गया है. इससे यह पक्का किया जा सकता है कि कोड को एसिंक्रोनस तरीके से वापस पाया जाए. <script> टैग का async एट्रिब्यूट, सिंक किए बिना डाउनलोड करने की सुविधा भी चालू करता है. हालांकि, यह अभी तक सभी आधुनिक ब्राउज़र में काम नहीं करता. इस बारे में Stack Overflow के इस जवाब में बताया गया है.

  3. प्लेयर एपीआई कोड डाउनलोड होने के बाद, onYouTubeIframeAPIReady फ़ंक्शन लागू हो जाएगा. कोड के इस हिस्से में, एक ग्लोबल वैरिएबल player तय किया गया है. यह वैरिएबल, एम्बेड किए जा रहे वीडियो प्लेयर को रेफ़र करता है. इसके बाद, फ़ंक्शन वीडियो प्लेयर ऑब्जेक्ट बनाता है.

  4. onReady इवेंट ट्रिगर होने पर, onPlayerReady फ़ंक्शन लागू होगा. इस उदाहरण में, फ़ंक्शन से पता चलता है कि वीडियो प्लेयर तैयार होने पर, उसे चलाना शुरू कर देना चाहिए.

  5. प्लेयर की स्थिति में बदलाव होने पर, एपीआई onPlayerStateChange फ़ंक्शन को कॉल करेगा. इससे यह पता चल सकता है कि प्लेयर चल रहा है, रोका गया है, खत्म हो गया है वगैरह. इस फ़ंक्शन से पता चलता है कि जब प्लेयर की स्थिति 1 (चल रहा है) हो, तो प्लेयर को छह सेकंड तक चलना चाहिए. इसके बाद, वीडियो को रोकने के लिए stopVideo फ़ंक्शन को कॉल करना चाहिए.

वीडियो प्लेयर लोड हो रहा है

एपीआई का JavaScript कोड लोड होने के बाद, एपीआई onYouTubeIframeAPIReady फ़ंक्शन को कॉल करेगा. इसके बाद, अपने पेज पर वीडियो प्लेयर डालने के लिए, YT.Player ऑब्जेक्ट बनाया जा सकता है. यहां दिए गए एचटीएमएल के उदाहरण में, ऊपर दिए गए उदाहरण में मौजूद onYouTubeIframeAPIReady फ़ंक्शन दिखाया गया है:

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      'playsinline': 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

वीडियो प्लेयर के कंस्ट्रक्टर में ये पैरामीटर तय किए जाते हैं:

  1. पहला पैरामीटर, एचटीएमएल एलिमेंट के DOM एलिमेंट या id को बताता है. यहां एपीआई, प्लेयर वाले <iframe> टैग को डालेगा.

    IFrame API, चुने गए एलिमेंट को <iframe> एलिमेंट से बदल देगा. इसमें प्लेयर शामिल होगा. अगर बदले जा रहे एलिमेंट की डिसप्ले स्टाइल, डाले गए <iframe> एलिमेंट की डिसप्ले स्टाइल से अलग है, तो इससे आपके पेज के लेआउट पर असर पड़ सकता है. डिफ़ॉल्ट रूप से, <iframe> एक inline-block एलिमेंट के तौर पर दिखता है.

  2. दूसरा पैरामीटर एक ऑब्जेक्ट है, जिसमें प्लेयर के विकल्पों की जानकारी होती है. ऑब्जेक्ट में ये प्रॉपर्टी शामिल हैं:
    • width (संख्या) – वीडियो प्लेयर की चौड़ाई. डिफ़ॉल्ट वैल्यू 640 है.
    • height (संख्या) – वीडियो प्लेयर की ऊंचाई. डिफ़ॉल्ट वैल्यू 390 है.
    • videoId (स्ट्रिंग) – YouTube वीडियो का आईडी, जो उस वीडियो की पहचान करता है जिसे प्लेयर लोड करेगा.
    • playerVars (ऑब्जेक्ट) – ऑब्जेक्ट की प्रॉपर्टी, प्लेयर पैरामीटर की पहचान करती हैं. इनका इस्तेमाल, प्लेयर को पसंद के मुताबिक बनाने के लिए किया जा सकता है.
    • events (ऑब्जेक्ट) – ऑब्जेक्ट की प्रॉपर्टी उन इवेंट की पहचान करती हैं जिन्हें एपीआई ट्रिगर करता है. साथ ही, उन फ़ंक्शन (इवेंट लिसनर) की पहचान करती हैं जिन्हें एपीआई उन इवेंट के होने पर कॉल करेगा. उदाहरण में, कन्स्ट्रक्टर से पता चलता है कि onReady इवेंट ट्रिगर होने पर onPlayerReady फ़ंक्शन और onStateChange इवेंट ट्रिगर होने पर onPlayerStateChange फ़ंक्शन काम करेगा.

शुरू करना सेक्शन में बताया गया है कि अपने पेज पर खाली <div> एलिमेंट लिखने के बजाय, <iframe> टैग खुद बनाया जा सकता है. इसके बाद, प्लेयर एपीआई का JavaScript कोड उसे <iframe> एलिमेंट से बदल देगा. उदाहरण सेक्शन में दिया गया पहला उदाहरण, ऐसा करने का तरीका दिखाता है.

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

ध्यान दें कि अगर आपने <iframe> टैग लिखा है, तो YT.Player ऑब्जेक्ट बनाते समय, आपको width और height के लिए वैल्यू तय करने की ज़रूरत नहीं है. ये वैल्यू, <iframe> टैग के एट्रिब्यूट के तौर पर तय की जाती हैं. इसके अलावा, videoId और प्लेयर पैरामीटर के लिए भी वैल्यू तय करने की ज़रूरत नहीं है. ये वैल्यू, src यूआरएल में तय की जाती हैं. सुरक्षा के लिए, आपको यूआरएल में origin पैरामीटर भी शामिल करना चाहिए. इसके लिए, पैरामीटर की वैल्यू के तौर पर यूआरएल स्कीम (http:// या https://) और अपने होस्ट पेज का पूरा डोमेन डालें. origin को शामिल करना ज़रूरी नहीं है. हालांकि, इसे शामिल करने से आपके पेज में तीसरे पक्ष के नुकसान पहुंचाने वाले JavaScript को इंजेक्ट होने और आपके YouTube प्लेयर को हैक होने से बचाया जा सकता है.

वीडियो प्लेयर ऑब्जेक्ट बनाने के अन्य उदाहरणों के लिए, उदाहरण देखें.

ऑपरेशंस

प्लेयर एपीआई के तरीकों को कॉल करने के लिए, आपको पहले उस प्लेयर ऑब्जेक्ट का रेफ़रंस लेना होगा जिसे आपको कंट्रोल करना है. इस दस्तावेज़ के शुरू करना और वीडियो प्लेयर लोड करना सेक्शन में बताए गए तरीके से YT.Player ऑब्जेक्ट बनाकर, रेफ़रंस पाया जा सकता है.

फ़ंक्शन

सूची बनाने की सुविधा वाले फ़ंक्शन

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

एपीआई, सूची में जोड़ने के फ़ंक्शन को कॉल करने के लिए, दो अलग-अलग सिंटैक्स के साथ काम करता है.

  • आर्ग्युमेंट सिंटैक्स के मुताबिक, फ़ंक्शन के आर्ग्युमेंट तय किए गए क्रम में होने चाहिए.

  • ऑब्जेक्ट सिंटैक्स की मदद से, किसी ऑब्जेक्ट को एक पैरामीटर के तौर पर पास किया जा सकता है. साथ ही, उन फ़ंक्शन आर्ग्युमेंट के लिए ऑब्जेक्ट प्रॉपर्टी तय की जा सकती हैं जिन्हें सेट करना है. इसके अलावा, एपीआई में ऐसी अतिरिक्त सुविधाएं काम कर सकती हैं जो आर्ग्युमेंट सिंटैक्स के साथ काम नहीं करती हैं.

उदाहरण के लिए, loadVideoById फ़ंक्शन को इनमें से किसी भी तरीके से कॉल किया जा सकता है. ध्यान दें कि ऑब्जेक्ट सिंटैक्स, endSeconds प्रॉपर्टी के साथ काम करता है, जबकि आर्ग्युमेंट सिंटैक्स नहीं.

  • आर्ग्युमेंट सिंटैक्स

    loadVideoById("bHQqvYy5KYo", 5, "large")
  • ऑब्जेक्ट सिंटैक्स

    loadVideoById({'videoId': 'bHQqvYy5KYo',
                   'startSeconds': 5,
                   'endSeconds': 60});

वीडियो की सूची बनाने की सुविधाएं

cueVideoById
  • आर्ग्युमेंट सिंटैक्स

    player.cueVideoById(videoId:String,
                        startSeconds:Number):Void
  • ऑब्जेक्ट सिंटैक्स

    player.cueVideoById({videoId:String,
                         startSeconds:Number,
                         endSeconds:Number}):Void

यह फ़ंक्शन, चुने गए वीडियो का थंबनेल लोड करता है और प्लेयर को वीडियो चलाने के लिए तैयार करता है. प्लेयर तब तक FLV का अनुरोध नहीं करता, जब तक playVideo() या seekTo() को कॉल नहीं किया जाता.

  • ज़रूरी videoId पैरामीटर, चलाए जाने वाले वीडियो का YouTube वीडियो आईडी बताता है. YouTube Data API में, video रिसॉर्स की id प्रॉपर्टी से आईडी की जानकारी मिलती है.
  • वैकल्पिक startSeconds पैरामीटर, फ़्लोट/इंटिजर स्वीकार करता है. साथ ही, यह तय करता है कि playVideo() को कॉल करने पर, वीडियो कब चलना शुरू होना चाहिए. अगर आपने startSeconds वैल्यू तय की है और फिर seekTo() को कॉल किया है, तो प्लेयर seekTo() कॉल में बताए गए समय से चलता है. जब वीडियो को चलाने के लिए तैयार कर दिया जाएगा, तब प्लेयर एक video cued इवेंट (5) ब्रॉडकास्ट करेगा.
  • endSeconds पैरामीटर ज़रूरी नहीं है. यह सिर्फ़ ऑब्जेक्ट सिंटैक्स में काम करता है. यह फ़्लोटिंग/इंटिजर वैल्यू स्वीकार करता है. साथ ही, यह तय करता है कि playVideo() को कॉल करने पर, वीडियो कब चलना बंद हो जाए. अगर आपने endSeconds वैल्यू तय की है और फिर seekTo() को कॉल किया है, तो endSeconds वैल्यू अब लागू नहीं होगी.

loadVideoById

  • आर्ग्युमेंट सिंटैक्स

    player.loadVideoById(videoId:String,
                         startSeconds:Number):Void
  • ऑब्जेक्ट सिंटैक्स

    player.loadVideoById({videoId:String,
                          startSeconds:Number,
                          endSeconds:Number}):Void

यह फ़ंक्शन, चुने गए वीडियो को लोड और चलाता है.

  • ज़रूरी videoId पैरामीटर, चलाए जाने वाले वीडियो का YouTube वीडियो आईडी बताता है. YouTube Data API में, video रिसॉर्स की id प्रॉपर्टी से आईडी की जानकारी मिलती है.
  • ज़रूरी नहीं startSeconds पैरामीटर, फ़्लोट/इंटिजर स्वीकार करता है. अगर यह तय किया गया है, तो वीडियो उस समय के सबसे करीबी की-फ़्रेम से शुरू होगा.
  • ज़रूरी नहीं endSeconds पैरामीटर, फ़्लोटिंग/पूर्णांक को स्वीकार करता है. अगर इसकी जानकारी दी गई है, तो वीडियो तय किए गए समय पर चलना बंद हो जाएगा.

cueVideoByUrl

  • आर्ग्युमेंट सिंटैक्स

    player.cueVideoByUrl(mediaContentUrl:String,
                         startSeconds:Number):Void
  • ऑब्जेक्ट सिंटैक्स

    player.cueVideoByUrl({mediaContentUrl:String,
                          startSeconds:Number,
                          endSeconds:Number}):Void

यह फ़ंक्शन, चुने गए वीडियो का थंबनेल लोड करता है और प्लेयर को वीडियो चलाने के लिए तैयार करता है. प्लेयर तब तक FLV का अनुरोध नहीं करता, जब तक playVideo() या seekTo() को कॉल नहीं किया जाता.

  • ज़रूरी mediaContentUrl पैरामीटर, http://www.youtube.com/v/VIDEO_ID?version=3 फ़ॉर्मैट में YouTube प्लेयर का पूरा यूआरएल बताता है.
  • वैकल्पिक startSeconds पैरामीटर, फ़्लोट/इंटिजर स्वीकार करता है. साथ ही, यह तय करता है कि playVideo() को कॉल करने पर, वीडियो कब चलना शुरू होना चाहिए. अगर startSeconds तय करने के बाद seekTo() कॉल किया जाता है, तो प्लेयर seekTo() कॉल में बताए गए समय से चलता है. जब वीडियो को चलाने के लिए तैयार कर लिया जाएगा, तब प्लेयर video cued इवेंट (5) ब्रॉडकास्ट करेगा.
  • endSeconds पैरामीटर ज़रूरी नहीं है. यह सिर्फ़ ऑब्जेक्ट सिंटैक्स में काम करता है. यह फ़्लोटिंग/इंटिजर वैल्यू स्वीकार करता है. साथ ही, यह तय करता है कि playVideo() को कॉल करने पर, वीडियो कब चलना बंद हो जाए. अगर आपने endSeconds वैल्यू तय की है और फिर seekTo() को कॉल किया है, तो endSeconds वैल्यू अब लागू नहीं होगी.

loadVideoByUrl

  • आर्ग्युमेंट सिंटैक्स

    player.loadVideoByUrl(mediaContentUrl:String,
                          startSeconds:Number):Void
  • ऑब्जेक्ट सिंटैक्स

    player.loadVideoByUrl({mediaContentUrl:String,
                           startSeconds:Number,
                           endSeconds:Number}):Void

यह फ़ंक्शन, चुने गए वीडियो को लोड और चलाता है.

  • ज़रूरी mediaContentUrl पैरामीटर, http://www.youtube.com/v/VIDEO_ID?version=3 फ़ॉर्मैट में YouTube प्लेयर का पूरा यूआरएल बताता है.
  • वैकल्पिक startSeconds पैरामीटर में फ़्लोट/इंटिजर का इस्तेमाल किया जा सकता है. साथ ही, यह पैरामीटर यह भी तय करता है कि वीडियो कब चलना शुरू होना चाहिए. अगर startSeconds (यह संख्या फ़्लोट हो सकती है) तय किया गया है, तो वीडियो उस समय के सबसे नज़दीक वाले कीफ़्रेम से शुरू होगा.
  • endSeconds पैरामीटर ज़रूरी नहीं है. यह सिर्फ़ ऑब्जेक्ट सिंटैक्स में काम करता है. यह फ़्लोटिंग/इंटिजर स्वीकार करता है और यह तय करता है कि वीडियो कब चलना बंद हो जाए.

सूचियों के लिए फ़ंक्शन को सूची में जोड़ना

cuePlaylist और loadPlaylist फ़ंक्शन की मदद से, प्लेलिस्ट को लोड और चलाया जा सकता है. अगर इन फ़ंक्शन को कॉल करने के लिए ऑब्जेक्ट सिंटैक्स का इस्तेमाल किया जा रहा है, तो उपयोगकर्ता के अपलोड किए गए वीडियो की सूची को भी सूची में जोड़ा (या लोड) जा सकता है.

फ़ंक्शन, आर्ग्युमेंट सिंटैक्स या ऑब्जेक्ट सिंटैक्स का इस्तेमाल करके कॉल किए जाने पर अलग-अलग तरीके से काम करते हैं. इसलिए, कॉल करने के दोनों तरीकों के बारे में यहां बताया गया है.

cuePlaylist
  • आर्ग्युमेंट सिंटैक्स

    player.cuePlaylist(playlist:String|Array,
                       index:Number,
                       startSeconds:Number):Void
    चुनी गई प्लेलिस्ट को सूची में जोड़ता है. जब प्लेलिस्ट को चलाने के लिए तैयार कर दिया जाएगा, तब प्लेयर एक video cued इवेंट (5) ब्रॉडकास्ट करेगा.
    • ज़रूरी playlist पैरामीटर, YouTube वीडियो आईडी की सूची तय करता है. YouTube Data API में, video रिसॉर्स की id प्रॉपर्टी से उस वीडियो के आईडी की पहचान की जाती है.

    • index पैरामीटर, प्लेलिस्ट में पहले वीडियो के इंडेक्स की जानकारी देता है. इस पैरामीटर में शून्य से शुरू होने वाले इंडेक्स का इस्तेमाल किया जाता है. साथ ही, पैरामीटर की डिफ़ॉल्ट वैल्यू 0 होती है. इसलिए, डिफ़ॉल्ट रूप से प्लेलिस्ट में पहला वीडियो लोड और चलाया जाता है.

    • startSeconds पैरामीटर में फ़्लोट/इंटिजर का इस्तेमाल किया जा सकता है. यह पैरामीटर, playVideo() फ़ंक्शन के कॉल होने पर, प्लेलिस्ट में पहले वीडियो के चलने का समय तय करता है. अगर आपने startSeconds वैल्यू तय की है और फिर seekTo() को कॉल किया है, तो प्लेयर seekTo() कॉल में बताए गए समय से चलता है. अगर किसी प्लेलिस्ट को क्यू में डालने के बाद playVideoAt() फ़ंक्शन को कॉल किया जाता है, तो प्लेयर उस वीडियो की शुरुआत से चलने लगेगा.

  • ऑब्जेक्ट सिंटैक्स

    player.cuePlaylist({listType:String,
                        list:String,
                        index:Number,
                        startSeconds:Number}):Void
    वीडियो की चुनी गई सूची को सूची में जोड़ता है. यह सूची, प्लेलिस्ट या उपयोगकर्ता के अपलोड किए गए वीडियो का फ़ीड हो सकता है. खोज के नतीजों की सूची को सूची में जोड़ने की सुविधा अब काम नहीं करती. इसे 15 नवंबर, 2020 से इस्तेमाल नहीं किया जा सकेगा.

    जब सूची में वीडियो को चलाने के लिए तैयार कर दिया जाएगा, तब प्लेयर एक video cued इवेंट (5) ब्रॉडकास्ट करेगा.

    • listType प्रॉपर्टी (ज़रूरी नहीं) से पता चलता है कि आपको किस तरह के नतीजों के फ़ीड को वापस लाना है. मान्य वैल्यू playlist और user_uploads हैं. search वैल्यू का इस्तेमाल अब नहीं किया जा सकेगा. यह वैल्यू 15 नवंबर, 2020 से काम नहीं करेगी. डिफ़ॉल्ट वैल्यू playlist है.

    • ज़रूरी list प्रॉपर्टी में एक कुंजी होती है, जो उन वीडियो की खास सूची की पहचान करती है जिन्हें YouTube को दिखाना चाहिए.

      • अगर listType प्रॉपर्टी की वैल्यू playlist है, तो list प्रॉपर्टी से प्लेलिस्ट आईडी या वीडियो आईडी का कलेक्शन पता चलता है. YouTube Data API में, playlist रिसॉर्स की id प्रॉपर्टी से प्लेलिस्ट के आईडी की पहचान होती है. साथ ही, video रिसॉर्स की id प्रॉपर्टी से वीडियो आईडी की जानकारी मिलती है.
      • अगर listType प्रॉपर्टी की वैल्यू user_uploads है, तो list प्रॉपर्टी उस उपयोगकर्ता की पहचान करती है जिसके अपलोड किए गए वीडियो दिखाए जाएंगे.
      • अगर listType प्रॉपर्टी की वैल्यू search है, तो list प्रॉपर्टी से खोज क्वेरी के बारे में पता चलता है. ध्यान दें: यह सुविधा बंद कर दी गई है और 15 नवंबर, 2020 से काम नहीं करेगी.

    • वैकल्पिक index प्रॉपर्टी, सूची में पहले वीडियो के इंडेक्स की जानकारी देती है. पैरामीटर में शून्य-आधारित इंडेक्स का इस्तेमाल किया जाता है और पैरामीटर की डिफ़ॉल्ट वैल्यू 0 होती है. इसलिए, डिफ़ॉल्ट रूप से सूची में पहला वीडियो लोड और चलाया जाता है.

    • वैकल्पिक startSeconds प्रॉपर्टी, फ़्लोट/इंटिजर स्वीकार करती है. साथ ही, यह बताती है कि playVideo() फ़ंक्शन को कॉल करने पर, सूची में मौजूद पहला वीडियो किस समय से चलना चाहिए. अगर आपने startSeconds वैल्यू तय की है और फिर seekTo() को कॉल किया है, तो प्लेयर seekTo() कॉल में बताए गए समय से चलता है. अगर किसी सूची को क्यू में डालने के बाद playVideoAt() फ़ंक्शन को कॉल किया जाता है, तो प्लेयर उस वीडियो की शुरुआत से चलने लगेगा.

loadPlaylist
  • आर्ग्युमेंट सिंटैक्स

    player.loadPlaylist(playlist:String|Array,
                        index:Number,
                        startSeconds:Number):Void
    यह फ़ंक्शन, बताई गई प्लेलिस्ट को लोड करके चलाता है.
    • ज़रूरी playlist पैरामीटर, YouTube वीडियो आईडी की सूची तय करता है. YouTube Data API में, video रिसॉर्स की id प्रॉपर्टी से वीडियो आईडी पता चलता है.

    • index पैरामीटर, प्लेलिस्ट में पहले वीडियो के इंडेक्स की जानकारी देता है. इस पैरामीटर में शून्य से शुरू होने वाले इंडेक्स का इस्तेमाल किया जाता है. साथ ही, पैरामीटर की डिफ़ॉल्ट वैल्यू 0 होती है. इसलिए, डिफ़ॉल्ट रूप से प्लेलिस्ट में पहला वीडियो लोड और चलाया जाता है.

    • startSeconds पैरामीटर, वैकल्पिक होता है. यह फ़्लोट/इंटिजर स्वीकार करता है. साथ ही, यह बताता है कि प्लेलिस्ट में पहला वीडियो किस समय से चलना चाहिए.

  • ऑब्जेक्ट सिंटैक्स

    player.loadPlaylist({list:String,
                         listType:String,
                         index:Number,
                         startSeconds:Number}):Void
    यह फ़ंक्शन, बताई गई सूची को लोड करके चलाता है. यह सूची, प्लेलिस्ट या उपयोगकर्ता के अपलोड किए गए वीडियो का फ़ीड हो सकता है. खोज के नतीजों की सूची लोड करने की सुविधा अब काम नहीं करती. साथ ही, 15 नवंबर, 2020 से यह सुविधा उपलब्ध नहीं होगी.
    • listType प्रॉपर्टी (ज़रूरी नहीं) से पता चलता है कि आपको किस तरह के नतीजों के फ़ीड को वापस लाना है. मान्य वैल्यू playlist और user_uploads हैं. search वैल्यू का इस्तेमाल अब नहीं किया जा सकेगा. यह वैल्यू 15 नवंबर, 2020 से काम नहीं करेगी. डिफ़ॉल्ट वैल्यू playlist है.

    • ज़रूरी list प्रॉपर्टी में एक कुंजी होती है, जो उन वीडियो की खास सूची की पहचान करती है जिन्हें YouTube को दिखाना चाहिए.

      • अगर listType प्रॉपर्टी की वैल्यू playlist है, तो list प्रॉपर्टी में प्लेलिस्ट आईडी या वीडियो आईडी का कलेक्शन दिया जाता है. YouTube Data API में, playlist रिसॉर्स की id प्रॉपर्टी से प्लेलिस्ट का आईडी पता चलता है. साथ ही, video रिसॉर्स की id प्रॉपर्टी से वीडियो आईडी पता चलता है.
      • अगर listType प्रॉपर्टी की वैल्यू user_uploads है, तो list प्रॉपर्टी उस उपयोगकर्ता की पहचान करती है जिसके अपलोड किए गए वीडियो दिखाए जाएंगे.
      • अगर listType प्रॉपर्टी की वैल्यू search है, तो list प्रॉपर्टी से खोज क्वेरी के बारे में पता चलता है. ध्यान दें: यह सुविधा बंद कर दी गई है और 15 नवंबर, 2020 से काम नहीं करेगी.

    • वैकल्पिक index प्रॉपर्टी, सूची में पहले वीडियो के इंडेक्स की जानकारी देती है. पैरामीटर में शून्य-आधारित इंडेक्स का इस्तेमाल किया जाता है और पैरामीटर की डिफ़ॉल्ट वैल्यू 0 होती है. इसलिए, डिफ़ॉल्ट रूप से सूची में पहला वीडियो लोड और चलाया जाता है.

    • वैकल्पिक startSeconds प्रॉपर्टी, फ़्लोट/इंटिजर स्वीकार करती है. साथ ही, यह बताती है कि सूची में पहला वीडियो किस समय से चलना चाहिए.

प्लेबैक कंट्रोल और प्लेयर की सेटिंग

वीडियो चलाना

player.playVideo():Void
इससे, क्य्यू में जोड़ा गया या लोड किया गया वीडियो चलता है. इस फ़ंक्शन के लागू होने के बाद, प्लेयर की आखिरी स्थिति playing (1) होगी.

ध्यान दें: किसी वीडियो को तब ही आधिकारिक व्यू के तौर पर गिना जाता है, जब उसे प्लेयर में मौजूद नेटिव प्ले बटन से चलाया जाता है.
player.pauseVideo():Void
इससे, चल रहे वीडियो को रोका जा सकता है. इस फ़ंक्शन के लागू होने के बाद, खिलाड़ी की आखिरी स्थिति paused (2) होगी. हालांकि, अगर फ़ंक्शन को कॉल करने पर खिलाड़ी ended (0) स्थिति में है, तो खिलाड़ी की स्थिति में कोई बदलाव नहीं होगा.
player.stopVideo():Void
मौजूदा वीडियो को लोड होने से रोकता है और उसे रद्द करता है. इस फ़ंक्शन का इस्तेमाल, सिर्फ़ उन मामलों में किया जाना चाहिए जब आपको पता हो कि उपयोगकर्ता प्लेयर में कोई और वीडियो नहीं देखेगा. अगर आपको वीडियो रोकना है, तो आपको सिर्फ़ pauseVideo फ़ंक्शन को कॉल करना चाहिए. अगर आपको प्लेयर पर चल रहे वीडियो को बदलना है, तो stopVideo को कॉल किए बिना, सूची में वीडियो जोड़ने वाले किसी फ़ंक्शन को कॉल किया जा सकता है.

अहम जानकारी: pauseVideo फ़ंक्शन, प्लेयर को paused (2) स्टेटस में छोड़ देता है. वहीं, stopVideo फ़ंक्शन, प्लेयर को ended (0), paused (2), video cued (5) या unstarted (-1) जैसे किसी भी स्टेटस में डाल सकता है.
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
वीडियो में किसी खास समय पर जाएं. अगर फ़ंक्शन कॉल होने पर प्लेयर रोका गया है, तो वह रुका ही रहेगा. अगर फ़ंक्शन को किसी दूसरे स्टेटस (playing, video cued वगैरह) से कॉल किया जाता है, तो प्लेयर वीडियो चलाएगा.
  • seconds पैरामीटर से पता चलता है कि प्लेयर को किस समय तक आगे बढ़ना चाहिए.

    अगर वीडियो के उस हिस्से को पहले से डाउनलोड नहीं किया गया है जिस पर उपयोगकर्ता जाना चाहता है, तो प्लेयर उस समय से पहले के सबसे करीबी की-फ़्रेम पर चला जाएगा.

  • allowSeekAhead पैरामीटर से यह तय होता है कि अगर seconds पैरामीटर में, बफ़र किए गए मौजूदा वीडियो डेटा के बाहर का समय बताया गया है, तो प्लेयर सर्वर से नया अनुरोध करेगा या नहीं.

    हमारा सुझाव है कि जब उपयोगकर्ता वीडियो के प्रोग्रेस बार पर कर्सर घुमाए, तो इस पैरामीटर को false पर सेट करें. इसके बाद, जब उपयोगकर्ता कर्सर को छोड़े, तो इसे true पर सेट करें. इस तरीके से, उपयोगकर्ता किसी वीडियो के अलग-अलग हिस्सों पर स्क्रोल कर सकता है. इसके लिए, उसे नई वीडियो स्ट्रीम का अनुरोध करने की ज़रूरत नहीं पड़ती. इसके लिए, उसे वीडियो के उन हिस्सों पर स्क्रोल करना होता है जिन्हें बफ़र नहीं किया गया है. जब उपयोगकर्ता माउस बटन को छोड़ता है, तो प्लेयर वीडियो के उस हिस्से पर आगे बढ़ जाता है जहां उपयोगकर्ता ने माउस बटन को दबाया था. साथ ही, ज़रूरत पड़ने पर नई वीडियो स्ट्रीम का अनुरोध करता है.

360° वीडियो के प्लेबैक को कंट्रोल करना

ध्यान दें: मोबाइल डिवाइसों पर, 360° वीडियो चलाने की सुविधा सीमित तौर पर उपलब्ध है. जिन डिवाइसों पर 360-डिग्री वीडियो नहीं चलते उन पर वीडियो खराब दिखते हैं. साथ ही, वीडियो देखने के तरीके को बदलने का कोई तरीका नहीं होता. इनमें एपीआई का इस्तेमाल करना, ओरिएंटेशन सेंसर का इस्तेमाल करना या डिवाइस की स्क्रीन पर टच/खींचने/छोड़ने की कार्रवाइयों का जवाब देना शामिल है.

player.getSphericalProperties():Object
यह ऐसी प्रॉपर्टी दिखाता है जिनसे वीडियो चलाने के दौरान, दर्शक के मौजूदा नज़रिए या व्यू के बारे में पता चलता है. इसके अलावा:
  • यह ऑब्जेक्ट सिर्फ़ 360° वीडियो के लिए पॉप्युलेट होता है. इन्हें गोलाकार वीडियो भी कहा जाता है.
  • अगर मौजूदा वीडियो 360° वीडियो नहीं है या फ़ंक्शन को ऐसे डिवाइस से कॉल किया जाता है जिस पर यह काम नहीं करता, तो फ़ंक्शन खाली ऑब्जेक्ट दिखाता है.
  • जिन मोबाइल डिवाइसों पर यह सुविधा काम करती है उन पर, अगर enableOrientationSensor प्रॉपर्टी को true पर सेट किया जाता है, तो यह फ़ंक्शन एक ऑब्जेक्ट दिखाता है. इसमें fov प्रॉपर्टी में सही वैल्यू होती है और अन्य प्रॉपर्टी 0 पर सेट होती हैं.
इस ऑब्जेक्ट में ये प्रॉपर्टी शामिल होती हैं:
प्रॉपर्टी
yaw [0, 360] की रेंज में एक संख्या, जो व्यू के हॉरिज़ॉन्टल ऐंगल को डिग्री में दिखाती है. इससे पता चलता है कि उपयोगकर्ता ने व्यू को कितनी दूरी तक बाईं या दाईं ओर घुमाया है. वीडियो के बीच में, उसके इक्वीरेक्टैंगलर प्रोजेक्शन में, नॉन-न्यूट्रल पोज़िशन 0° दिखाती है. दर्शक के बाईं ओर मुड़ने पर, यह वैल्यू बढ़ती जाती है.
pitch यह [-90, 90] की रेंज में एक संख्या होती है, जो व्यू के वर्टिकल ऐंगल को डिग्री में दिखाती है. इससे पता चलता है कि उपयोगकर्ता ने ऊपर या नीचे देखने के लिए, व्यू को कितनी दूर तक अडजस्ट किया है. वीडियो के बीच में, इक्विरेक्टांग्युलर प्रोजेक्शन में, नॉन-नेगेटिव पोज़िशन 0° होती है. दर्शक के ऊपर की ओर देखने पर यह वैल्यू बढ़ती जाती है.
roll यह वैल्यू [-180, 180] की रेंज में होती है. यह व्यू के घड़ी की दिशा में या घड़ी की विपरीत दिशा में घूमने के कोण को डिग्री में दिखाती है. न्योट्रल पोज़िशन में, इक्वीरेक्टैंगलर प्रोजेक्शन में हॉरिज़ॉन्टल ऐक्सिस, व्यू के हॉरिज़ॉन्टल ऐक्सिस के समानांतर होता है. यह 0° दिखाता है. व्यू को घड़ी की सुई के घूमने की दिशा में घुमाने पर वैल्यू बढ़ती है और घड़ी की सुई के उल्टी दिशा में घुमाने पर वैल्यू कम होती है.

ध्यान दें कि एम्बेड किए गए प्लेयर में, व्यू के रोल को अडजस्ट करने के लिए कोई यूज़र इंटरफ़ेस नहीं होता. रोल में इनमें से किसी एक तरीके से बदलाव किया जा सकता है:
  1. व्यू के लिए रोल देने के लिए, मोबाइल ब्राउज़र में ओरिएंटेशन सेंसर का इस्तेमाल करें. अगर ओरिएंटेशन सेंसर चालू है, तो getSphericalProperties फ़ंक्शन हमेशा roll प्रॉपर्टी की वैल्यू के तौर पर 0 दिखाता है.
  2. अगर ओरिएंटेशन सेंसर बंद है, तो इस एपीआई का इस्तेमाल करके रोल को शून्य से ज़्यादा की वैल्यू पर सेट करें.
fov यह वैल्यू [30, 120] के बीच होनी चाहिए. यह व्यूपोर्ट के लंबे किनारे के हिसाब से, व्यू के फ़ील्ड-ऑफ़-व्यू को डिग्री में दिखाती है. छोटा किनारा, व्यू के आसपेक्ट रेशियो के हिसाब से अपने-आप अडजस्ट हो जाता है.

डिफ़ॉल्ट वैल्यू 100 डिग्री होती है. वैल्यू कम करने का मतलब है कि वीडियो कॉन्टेंट को ज़ूम इन करना और वैल्यू बढ़ाने का मतलब है कि वीडियो कॉन्टेंट को ज़ूम आउट करना. वीडियो के फ़ुलस्क्रीन मोड में होने पर, एपीआई का इस्तेमाल करके या माउसव्हील का इस्तेमाल करके, इस वैल्यू में बदलाव किया जा सकता है.
player.setSphericalProperties(properties:Object):Void
360° वीडियो चलाने के लिए, वीडियो का ओरिएंटेशन सेट करता है. (अगर मौजूदा वीडियो गोलाकार नहीं है, तो इनपुट के बावजूद यह तरीका काम नहीं करेगा.)

प्लेयर व्यू, properties ऑब्जेक्ट में मौजूद किसी भी जानी-पहचानी प्रॉपर्टी की वैल्यू दिखाने के लिए अपडेट करके, इस तरीके के कॉल का जवाब देता है. व्यू, उस ऑब्जेक्ट में शामिल नहीं की गई किसी भी अन्य प्रॉपर्टी की वैल्यू सेव करता है.

इसके अलावा:
  • अगर ऑब्जेक्ट में ऐसी प्रॉपर्टी शामिल हैं जिनके बारे में पहले से पता नहीं है और/या जिनकी उम्मीद नहीं है, तो प्लेयर उन्हें अनदेखा कर देता है.
  • इस सेक्शन की शुरुआत में बताया गया है कि 360° वीडियो चलाने की सुविधा, सभी मोबाइल डिवाइसों पर काम नहीं करती.
  • यह फ़ंक्शन, काम करने वाले मोबाइल डिवाइसों पर डिफ़ॉल्ट रूप से सिर्फ़ fov प्रॉपर्टी को सेट करता है. साथ ही, 360° वीडियो चलाने पर yaw, pitch, और roll प्रॉपर्टी पर इसका कोई असर नहीं पड़ता. ज़्यादा जानकारी के लिए, नीचे दी गई enableOrientationSensor प्रॉपर्टी देखें.
फ़ंक्शन में पास किए गए properties ऑब्जेक्ट में ये प्रॉपर्टी होती हैं:
प्रॉपर्टी
yaw ऊपर परिभाषा देखें.
pitch ऊपर परिभाषा देखें.
roll ऊपर परिभाषा देखें.
fov ऊपर परिभाषा देखें.
enableOrientationSensor ध्यान दें: इस प्रॉपर्टी का असर सिर्फ़ उन डिवाइसों पर 360° व्यू के अनुभव पर पड़ता है जिन पर यह सुविधा काम करती है.यह एक बूलियन वैल्यू है, जो बताती है कि IFrame एम्बेड को उन इवेंट का जवाब देना चाहिए या नहीं जो किसी डिवाइस के ओरिएंटेशन में हुए बदलावों का सिग्नल देते हैं. जैसे, मोबाइल ब्राउज़र का DeviceOrientationEvent. पैरामीटर की डिफ़ॉल्ट वैल्यू true है.

इसके साथ काम करने वाले मोबाइल डिवाइस
  • अगर वैल्यू true है, तो एम्बेड किया गया प्लेयर 360° वीडियो चलाने के लिए, yaw, pitch, और roll प्रॉपर्टी में बदलाव करने के लिए, सिर्फ़ डिवाइस की मूवमेंट पर निर्भर करता है. हालांकि, एपीआई की मदद से fov प्रॉपर्टी में अब भी बदलाव किया जा सकता है. असल में, मोबाइल डिवाइस पर fov प्रॉपर्टी में बदलाव करने का यही एक तरीका है. यह डिफ़ॉल्ट व्यवहार है.
  • अगर वैल्यू false है, तो डिवाइस के हिलने-डुलने से 360° व्यू के अनुभव पर कोई असर नहीं पड़ता. साथ ही, yaw, pitch, roll, और fov प्रॉपर्टी को एपीआई के ज़रिए सेट किया जाना चाहिए.

ऐसे मोबाइल डिवाइस जिन पर वीडियो नहीं चलाया जा सकता
enableOrientationSensor प्रॉपर्टी की वैल्यू का, वीडियो चलाने के अनुभव पर कोई असर नहीं पड़ता.

प्लेलिस्ट में कोई वीडियो चलाना

player.nextVideo():Void
यह फ़ंक्शन, प्लेलिस्ट में मौजूद अगला वीडियो लोड और चलाता है.
  • अगर प्लेलिस्ट का आखिरी वीडियो देखते समय player.nextVideo() को कॉल किया जाता है और प्लेलिस्ट को लगातार चलाने के लिए सेट किया गया है (loop), तो प्लेयर सूची में पहला वीडियो लोड करके चलाएगा.

  • अगर प्लेलिस्ट में मौजूद आखिरी वीडियो देखते समय player.nextVideo() को कॉल किया जाता है और प्लेलिस्ट को लगातार चलने के लिए सेट नहीं किया गया है, तो प्लेबैक खत्म हो जाएगा.

player.previousVideo():Void
यह फ़ंक्शन, प्लेलिस्ट में मौजूद पिछले वीडियो को लोड और चलाता है.
  • अगर प्लेलिस्ट में पहला वीडियो देखते समय player.previousVideo() को कॉल किया जाता है और प्लेलिस्ट को लगातार चलाने के लिए सेट किया गया है (loop), तो प्लेयर सूची में मौजूद आखिरी वीडियो को लोड और चलाएगा.

  • अगर प्लेलिस्ट का पहला वीडियो देखते समय player.previousVideo() को कॉल किया जाता है और प्लेलिस्ट को लगातार चलने के लिए सेट नहीं किया गया है, तो प्लेयर प्लेलिस्ट के पहले वीडियो को फिर से शुरू कर देगा.

player.playVideoAt(index:Number):Void
यह फ़ंक्शन, प्लेलिस्ट में मौजूद किसी वीडियो को लोड और चलाता है.
  • ज़रूरी index पैरामीटर, उस वीडियो का इंडेक्स बताता है जिसे आपको प्लेलिस्ट में चलाना है. यह पैरामीटर, शून्य पर आधारित इंडेक्स का इस्तेमाल करता है. इसलिए, 0 की वैल्यू से सूची में पहले वीडियो की पहचान होती है. अगर आपने प्लेलिस्ट को शफ़ल किया है, तो यह फ़ंक्शन, शफ़ल की गई प्लेलिस्ट में बताई गई जगह पर वीडियो चलाएगा.

प्लेयर की आवाज़ कम या ज़्यादा करना

player.mute():Void
इससे प्लेयर को म्यूट किया जा सकता है.
player.unMute():Void
इससे प्लेयर अनम्यूट हो जाता है.
player.