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>
ऊपर दिए गए सैंपल के बारे में ज़्यादा जानकारी यहां दी गई है:
-
इस सेक्शन में मौजूद
<div>टैग, पेज पर उस जगह की पहचान करता है जहां IFrame API, वीडियो प्लेयर को डालेगा. प्लेयर ऑब्जेक्ट के कन्स्ट्रक्टर, जिसे वीडियो प्लेयर लोड करना सेक्शन में बताया गया है, वह<div>टैग की पहचान उसकेidसे करता है. इससे यह पक्का होता है कि एपीआई,<iframe>को सही जगह पर डालता है. खास तौर पर, IFrame API,<div>टैग को<iframe>टैग से बदल देगा.इसके अलावा,
<iframe>एलिमेंट को सीधे पेज पर भी डाला जा सकता है. वीडियो प्लेयर लोड करना सेक्शन में, ऐसा करने का तरीका बताया गया है. -
इस सेक्शन में मौजूद कोड, IFrame Player API का JavaScript कोड लोड करता है. इस उदाहरण में, एपीआई कोड को डाउनलोड करने के लिए डीओएम में बदलाव किया गया है. इससे यह पक्का किया जा सकता है कि कोड को एसिंक्रोनस तरीके से वापस पाया जाए.
<script>टैग काasyncएट्रिब्यूट, सिंक किए बिना डाउनलोड करने की सुविधा भी चालू करता है. हालांकि, यह अभी तक सभी आधुनिक ब्राउज़र में काम नहीं करता. इस बारे में Stack Overflow के इस जवाब में बताया गया है. -
प्लेयर एपीआई कोड डाउनलोड होने के बाद,
onYouTubeIframeAPIReadyफ़ंक्शन लागू हो जाएगा. कोड के इस हिस्से में, एक ग्लोबल वैरिएबलplayerतय किया गया है. यह वैरिएबल, एम्बेड किए जा रहे वीडियो प्लेयर को रेफ़र करता है. इसके बाद, फ़ंक्शन वीडियो प्लेयर ऑब्जेक्ट बनाता है. -
onReadyइवेंट ट्रिगर होने पर,onPlayerReadyफ़ंक्शन लागू होगा. इस उदाहरण में, फ़ंक्शन से पता चलता है कि वीडियो प्लेयर तैयार होने पर, उसे चलाना शुरू कर देना चाहिए. -
प्लेयर की स्थिति में बदलाव होने पर, एपीआई
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 } }); }
वीडियो प्लेयर के कंस्ट्रक्टर में ये पैरामीटर तय किए जाते हैं:
-
पहला पैरामीटर, एचटीएमएल एलिमेंट के DOM एलिमेंट या
idको बताता है. यहां एपीआई, प्लेयर वाले<iframe>टैग को डालेगा.IFrame API, चुने गए एलिमेंट को
<iframe>एलिमेंट से बदल देगा. इसमें प्लेयर शामिल होगा. अगर बदले जा रहे एलिमेंट की डिसप्ले स्टाइल, डाले गए<iframe>एलिमेंट की डिसप्ले स्टाइल से अलग है, तो इससे आपके पेज के लेआउट पर असर पड़ सकता है. डिफ़ॉल्ट रूप से,<iframe>एकinline-blockएलिमेंट के तौर पर दिखता है. - दूसरा पैरामीटर एक ऑब्जेक्ट है, जिसमें प्लेयर के विकल्पों की जानकारी होती है. ऑब्जेक्ट में ये प्रॉपर्टी शामिल हैं:
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):Voidvideo 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}):Void15 नवंबर, 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}):Void15 नवंबर, 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° दिखाता है. व्यू को घड़ी की सुई के घूमने की दिशा में घुमाने पर वैल्यू बढ़ती है और घड़ी की सुई के उल्टी दिशा में घुमाने पर वैल्यू कम होती है.
ध्यान दें कि एम्बेड किए गए प्लेयर में, व्यू के रोल को अडजस्ट करने के लिए कोई यूज़र इंटरफ़ेस नहीं होता. रोल में इनमें से किसी एक तरीके से बदलाव किया जा सकता है:- व्यू के लिए रोल देने के लिए, मोबाइल ब्राउज़र में ओरिएंटेशन सेंसर का इस्तेमाल करें. अगर ओरिएंटेशन सेंसर चालू है, तो
getSphericalPropertiesफ़ंक्शन हमेशाrollप्रॉपर्टी की वैल्यू के तौर पर0दिखाता है. - अगर ओरिएंटेशन सेंसर बंद है, तो इस एपीआई का इस्तेमाल करके रोल को शून्य से ज़्यादा की वैल्यू पर सेट करें.
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.