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.isMuted():Boolean- अगर प्लेयर को म्यूट किया गया है, तो
trueदिखाता है. अगर नहीं किया गया है, तोfalseदिखाता है.
player.setVolume(volume:Number):Void- वॉल्यूम सेट करता है.
0और100के बीच का पूर्णांक स्वीकार करता है.
player.getVolume():Number- यह प्लेयर का मौजूदा वॉल्यूम दिखाता है. यह
0से100के बीच का कोई पूर्णांक होता है. ध्यान दें किgetVolume(), प्लेयर के म्यूट होने पर भी वॉल्यूम दिखाएगा.
प्लेयर का साइज़ सेट करना
player.setSize(width:Number, height:Number):Object- इससे, प्लेयर वाले
<iframe>का साइज़ पिक्सल में सेट होता है.
वीडियो चलाने की रफ़्तार सेट करना
player.getPlaybackRate():Number- यह फ़ंक्शन, फ़िलहाल चल रहे वीडियो के प्लेबैक रेट को वापस लाता है. वीडियो चलाने की डिफ़ॉल्ट स्पीड
1होती है. इससे पता चलता है कि वीडियो सामान्य स्पीड पर चल रहा है. प्लेबैक रेट में0.25,0.5,1,1.5, और2जैसी वैल्यू शामिल हो सकती हैं.
player.setPlaybackRate(suggestedRate:Number):Void- यह फ़ंक्शन, मौजूदा वीडियो के लिए प्लेबैक रेट का सुझाव देता है. वीडियो चलाने की स्पीड बदलने पर, यह बदलाव सिर्फ़ उस वीडियो के लिए होगा जिसे पहले से क्यू किया गया है या जो चल रहा है. अगर आपने किसी वीडियो के लिए, वीडियो चलाने की दर सेट की है, तो
playVideoफ़ंक्शन को कॉल करने या उपयोगकर्ता के सीधे प्लेयर कंट्रोल से वीडियो चलाने पर भी वह दर लागू रहेगी. इसके अलावा, वीडियो या प्लेलिस्ट (cueVideoById,loadVideoByIdवगैरह) को क्यू में जोड़ने या लोड करने के लिए फ़ंक्शन कॉल करने पर, वीडियो चलाने की दर1पर रीसेट हो जाएगी.
इस फ़ंक्शन को कॉल करने से यह गारंटी नहीं मिलती कि वीडियो चलाने की दर में असल में बदलाव होगा. हालांकि, अगर वीडियो चलाने की दर बदलती है, तोonPlaybackRateChangeइवेंट ट्रिगर होगा. साथ ही, आपका कोडsetPlaybackRateफ़ंक्शन को कॉल करने के बजाय, इवेंट का जवाब देगा.
getAvailablePlaybackRatesवाला तरीका, फ़िलहाल चल रहे वीडियो के लिए प्लेबैक रेट दिखाएगा. हालांकि, अगर आपनेsuggestedRateपैरामीटर को ऐसी पूरी संख्या या फ़्लोट वैल्यू पर सेट किया है जो काम नहीं करती, तो प्लेयर उस वैल्यू को1की दिशा में, काम करने वाली सबसे करीब की वैल्यू पर राउंड कर देगा.
player.getAvailablePlaybackRates():Array- यह फ़ंक्शन, प्लेबैक रेट का वह सेट दिखाता है जिसमें मौजूदा वीडियो उपलब्ध है. डिफ़ॉल्ट वैल्यू
1है. इससे पता चलता है कि वीडियो सामान्य रफ़्तार से चल रहा है.
यह फ़ंक्शन, संख्याओं का एक अरे दिखाता है. इसमें वीडियो चलाने की स्पीड, सबसे धीमी से सबसे तेज़ तक के क्रम में होती है. भले ही, प्लेयर में गाने की स्पीड बदलने की सुविधा न हो, लेकिन कलेक्शन में हमेशा कम से कम एक वैल्यू (1) होनी चाहिए.
प्लेलिस्ट के लिए वीडियो चलाने का तरीका सेट करना
player.setLoop(loopPlaylists:Boolean):Void-
इस फ़ंक्शन से पता चलता है कि वीडियो प्लेयर को प्लेलिस्ट को लगातार चलाना चाहिए या प्लेलिस्ट का आखिरी वीडियो खत्म होने के बाद उसे चलाना बंद कर देना चाहिए. डिफ़ॉल्ट रूप से, प्लेलिस्ट में वीडियो लूप में नहीं चलते.
यह सेटिंग तब भी बनी रहेगी, जब कोई दूसरी प्लेलिस्ट लोड की जाएगी या उसके गाने चलाए जाएंगे. इसका मतलब है कि अगर कोई प्लेलिस्ट लोड की जाती है, तो
setLoopफ़ंक्शन कोtrueकी वैल्यू के साथ कॉल करें और फिर दूसरी प्लेलिस्ट लोड करें, तो दूसरी प्लेलिस्ट भी लूप में चलेगी.ज़रूरी
loopPlaylistsपैरामीटर, लूपिंग व्यवहार की पहचान करता है.-
अगर पैरामीटर की वैल्यू
trueहै, तो वीडियो प्लेयर लगातार प्लेलिस्ट चलाएगा. प्लेलिस्ट में आखिरी वीडियो चलने के बाद, वीडियो प्लेयर प्लेलिस्ट की शुरुआत पर वापस चला जाएगा और उसे फिर से चलाएगा. -
अगर पैरामीटर की वैल्यू
falseहै, तो वीडियो प्लेयर किसी प्लेलिस्ट में आखिरी वीडियो चलाने के बाद, वीडियो चलाना बंद कर देगा.
-
player.setShuffle(shufflePlaylist:Boolean):Void-
इस फ़ंक्शन से पता चलता है कि किसी प्लेलिस्ट के वीडियो को शफ़ल किया जाना चाहिए या नहीं, ताकि वे प्लेलिस्ट क्रिएटर के तय किए गए क्रम से अलग क्रम में चलें. अगर प्लेलिस्ट में वीडियो चलने के बाद, उसे शफ़ल किया जाता है, तो चल रहे वीडियो के खत्म होने तक प्लेलिस्ट में वीडियो का क्रम बदला रहेगा. इसके बाद, क्रम में बदली गई सूची के आधार पर अगला वीडियो चलाया जाएगा.
अगर कोई दूसरी प्लेलिस्ट लोड की जाती है या उसे लाइन में लगाया जाता है, तो यह सेटिंग लागू नहीं रहेगी. इसका मतलब है कि अगर कोई प्लेलिस्ट लोड की जाती है,
setShuffleफ़ंक्शन को कॉल किया जाता है, और फिर दूसरी प्लेलिस्ट लोड की जाती है, तो दूसरी प्लेलिस्ट को शफ़ल नहीं किया जाएगा.ज़रूरी
shufflePlaylistपैरामीटर से पता चलता है कि YouTube को प्लेलिस्ट में वीडियो शफ़ल करने चाहिए या नहीं.-
अगर पैरामीटर की वैल्यू
trueहै, तो YouTube प्लेलिस्ट के क्रम को बदल देगा. अगर किसी ऐसी प्लेलिस्ट को शफ़ल करने का निर्देश दिया जाता है जिसे पहले ही शफ़ल किया जा चुका है, तो YouTube उस प्लेलिस्ट के क्रम को फिर से शफ़ल कर देगा. -
अगर पैरामीटर की वैल्यू
falseहै, तो YouTube प्लेलिस्ट के क्रम को उसके मूल क्रम में वापस ले जाएगा.
-
वीडियो चलने की स्थिति
player.getVideoLoadedFraction():Float- यह
0और1के बीच की संख्या दिखाता है. इससे यह पता चलता है कि वीडियो का कितना प्रतिशत हिस्सा बफ़र किया गया है. यह तरीका, अब बंद किए गएgetVideoBytesLoadedऔरgetVideoBytesTotalतरीकों के मुकाबले ज़्यादा भरोसेमंद संख्या दिखाता है.
player.getPlayerState():Number- यह प्लेयर की स्थिति दिखाता है. वैल्यू, इनमें से कोई हो सकती है:
-1– शुरू नहीं किया गया0– खत्म हो गया1– चल रहा है2– रोका गया3– बफ़र हो रहा है5– वीडियो के लिए क्यू
player.getCurrentTime():Number- वीडियो चलने के बाद से बीता समय, सेकंड में दिखाता है.
player.getVideoStartBytes():Number- यह सुविधा 31 अक्टूबर, 2012 से काम नहीं करती. इससे पता चलता है कि वीडियो फ़ाइल किस बाइट से लोड होना शुरू हुई. (यह तरीका अब हमेशा
0की वैल्यू दिखाता है.) उदाहरण के लिए: उपयोगकर्ता वीडियो के उस हिस्से पर जाता है जो अभी तक लोड नहीं हुआ है. इसके बाद, प्लेयर वीडियो के उस हिस्से को चलाने के लिए नया अनुरोध करता है जो अभी तक लोड नहीं हुआ है.
player.getVideoBytesLoaded():Number-
18 जुलाई, 2012 से काम नहीं करती. इसके बजाय, वीडियो के बफ़र किए गए हिस्से का प्रतिशत तय करने के लिए,
getVideoLoadedFractionका तरीका इस्तेमाल करें.
यह तरीका,0से1000के बीच की वैल्यू दिखाता है. यह वैल्यू, वीडियो के लोड होने के अनुमानित प्रतिशत को दिखाती है.getVideoBytesLoadedवैल्यू कोgetVideoBytesTotalवैल्यू से भाग देकर, वीडियो के लोड होने के अनुपात का हिसाब लगाया जा सकता है.
player.getVideoBytesTotal():Number-
18 जुलाई, 2012 से काम नहीं करती. इसके बजाय, वीडियो के बफ़र किए गए हिस्से का प्रतिशत तय करने के लिए,
getVideoLoadedFractionका इस्तेमाल करें.
फ़िलहाल लोड किए जा रहे/चल रहे वीडियो का साइज़ बाइट में दिखाता है. इसके अलावा, यह वीडियो के साइज़ का अनुमान भी दिखाता है.
यह तरीका हमेशा1000की वैल्यू दिखाता है.getVideoBytesLoadedवैल्यू कोgetVideoBytesTotalवैल्यू से भाग देकर, वीडियो के लोड होने के अनुपात का हिसाब लगाया जा सकता है.
वीडियो की जानकारी हासिल की जा रही है
player.getDuration():Number- इस फ़ंक्शन से, चल रहे वीडियो की अवधि सेकंड में मिलती है. ध्यान दें कि वीडियो का मेटाडेटा लोड होने तक,
getDuration()0दिखाता रहेगा. आम तौर पर, वीडियो चलने के तुरंत बाद मेटाडेटा लोड हो जाता है.
अगर फ़िलहाल चल रहा वीडियो कोई लाइव इवेंट है, तोgetDuration()फ़ंक्शन, लाइव वीडियो स्ट्रीम शुरू होने के बाद से बीता हुआ समय दिखाएगा. खास तौर पर, यह वह समय होता है जब वीडियो को रीसेट किए बिना या किसी रुकावट के बिना स्ट्रीम किया गया हो. साथ ही, यह अवधि आम तौर पर इवेंट के असल समय से ज़्यादा होती है, क्योंकि स्ट्रीमिंग इवेंट के शुरू होने के समय से पहले शुरू हो सकती है.
player.getVideoUrl():String- फ़िलहाल लोड किए गए/चल रहे वीडियो का YouTube.com यूआरएल दिखाता है.
player.getVideoEmbedCode():String- मौजूदा समय में लोड किए गए/चल रहे वीडियो का एम्बेड कोड दिखाता है.
प्लेलिस्ट की जानकारी हासिल की जा रही है
player.getPlaylist():Array- यह फ़ंक्शन, प्लेलिस्ट में मौजूद वीडियो के आईडी का एक कलेक्शन दिखाता है. यह कलेक्शन, प्लेलिस्ट में मौजूद वीडियो के मौजूदा क्रम के हिसाब से होता है. डिफ़ॉल्ट रूप से, यह फ़ंक्शन वीडियो आईडी को उसी क्रम में दिखाएगा जिसे प्लेलिस्ट के मालिक ने तय किया है. हालांकि, अगर आपने प्लेलिस्ट के क्रम को शफ़ल करने के लिए
setShuffleफ़ंक्शन को कॉल किया है, तोgetPlaylist()फ़ंक्शन की रिटर्न वैल्यू में शफ़ल किया गया क्रम दिखेगा.
player.getPlaylistIndex():Number- यह फ़ंक्शन, प्लेलिस्ट में मौजूद उस वीडियो का इंडेक्स दिखाता है जो फ़िलहाल चल रहा है.
-
अगर आपने प्लेलिस्ट में वीडियो का क्रम नहीं बदला है, तो रिटर्न वैल्यू से उस पोज़िशन का पता चलेगा जहां प्लेलिस्ट बनाने वाले ने वीडियो को रखा है. रिटर्न वैल्यू में शून्य-आधारित इंडेक्स का इस्तेमाल किया जाता है. इसलिए,
0की वैल्यू से प्लेलिस्ट में पहले वीडियो की पहचान होती है. -
अगर आपने प्लेलिस्ट में वीडियो का क्रम बदला है, तो रिटर्न वैल्यू से, प्लेलिस्ट में वीडियो के क्रम की पहचान की जा सकती है.
-
इवेंट लिस्नर जोड़ना या हटाना
player.addEventListener(event:String, listener:String):Void- तय किए गए
eventके लिए, लिसनर फ़ंक्शन जोड़ता है. नीचे दिए गए इवेंट सेक्शन में, उन अलग-अलग इवेंट की पहचान की जाती है जिन्हें प्लेयर ट्रिगर कर सकता है. लिसनर एक स्ट्रिंग होती है, जो उस फ़ंक्शन के बारे में बताती है जो तय किए गए इवेंट के ट्रिगर होने पर लागू होगा.
player.removeEventListener(event:String, listener:String):Void- तय किए गए
eventके लिए, किसी लिसनर फ़ंक्शन को हटाता है.listenerएक स्ट्रिंग है, जो उस फ़ंक्शन की पहचान करती है जो तय किए गए इवेंट के ट्रिगर होने पर, अब लागू नहीं होगा.
डीओएम नोड ऐक्सेस करना और उनमें बदलाव करना
player.getIframe():Object- यह तरीका, एम्बेड किए गए
<iframe>के लिए डीओएम नोड दिखाता है.
player.destroy():Void- इससे, प्लेयर वाले
<iframe>को हटा दिया जाता है.
इवेंट
एम्बेड किए गए प्लेयर में हुए बदलावों की सूचना आपके ऐप्लिकेशन को देने के लिए, एपीआई इवेंट ट्रिगर करता है. पिछले सेक्शन में बताया गया था कि YT.Player ऑब्जेक्ट बनाते समय, इवेंट सुनने वाला कोई फ़ंक्शन जोड़कर इवेंट की सदस्यता ली जा सकती है. इसके अलावा, addEventListener फ़ंक्शन का भी इस्तेमाल किया जा सकता है.
एपीआई, हर फ़ंक्शन के लिए एक आर्ग्युमेंट के तौर पर इवेंट ऑब्जेक्ट पास करेगा. इवेंट ऑब्जेक्ट में ये प्रॉपर्टी होती हैं:
- इवेंट का
target, उस वीडियो प्लेयर की पहचान करता है जो इवेंट से जुड़ा है. - इवेंट का
data, इवेंट से जुड़ी वैल्यू बताता है. ध्यान दें किonReadyऔरonAutoplayBlockedइवेंट मेंdataप्रॉपर्टी की जानकारी नहीं दी जाती.
यहां दी गई सूची में, उन इवेंट के बारे में बताया गया है जिन्हें एपीआई ट्रिगर करता है:
onReady- यह इवेंट तब ट्रिगर होता है, जब कोई प्लेयर लोड हो जाता है और एपीआई कॉल पाने के लिए तैयार हो जाता है. अगर आपको प्लेयर के तैयार होने पर, वीडियो चलाने या वीडियो की जानकारी दिखाने जैसे कुछ काम अपने-आप होने चाहिए, तो आपके ऐप्लिकेशन को यह फ़ंक्शन लागू करना चाहिए.
नीचे दिए गए उदाहरण में, इस इवेंट को हैंडल करने के लिए सैंपल फ़ंक्शन दिखाया गया है. फ़ंक्शन में भेजे गए इवेंट ऑब्जेक्ट मेंtargetप्रॉपर्टी होती है, जो प्लेयर की पहचान करती है. यह फ़ंक्शन, फ़िलहाल लोड किए गए वीडियो का एम्बेड कोड वापस लाता है, वीडियो चलाना शुरू करता है, और उस पेज एलिमेंट में एम्बेड कोड दिखाता है जिसमेंidकी वैल्यूembed-codeहै.function onPlayerReady(event) { var embedCode = event.target.getVideoEmbedCode(); event.target.playVideo(); if (document.getElementById('embed-code')) { document.getElementById('embed-code').innerHTML = embedCode; } }
onStateChange- जब भी प्लेयर की स्थिति बदलती है, तब यह इवेंट ट्रिगर होता है.
इवेंट ऑब्जेक्ट की
dataप्रॉपर्टी, एपीआई को आपके इवेंट लिसनर फ़ंक्शन में भेजती है. यह प्रॉपर्टी, प्लेयर की नई स्थिति से जुड़ा एक पूर्णांक बताएगी. संभावित वैल्यू ये हैं:-1(शुरू नहीं किया गया)0(खत्म हो गया है)1(चल रहा है)2(रोका गया)3(बफ़र हो रहा है)5(वीडियो को क्यू दिया गया).
unstarted(-1) इवेंट ब्रॉडकास्ट करेगा. जब कोई वीडियो चलाने के लिए तैयार हो जाएगा, तब प्लेयरvideo cued(5) इवेंट ब्रॉडकास्ट करेगा. अपने कोड में, पूर्णांक वैल्यू तय की जा सकती हैं या इनमें से किसी नेमस्पेस वाले वैरिएबल का इस्तेमाल किया जा सकता है:YT.PlayerState.ENDEDYT.PlayerState.PLAYINGYT.PlayerState.PAUSEDYT.PlayerState.BUFFERINGYT.PlayerState.CUED
onPlaybackQualityChange- वीडियो चलाने की क्वालिटी में बदलाव होने पर, यह इवेंट ट्रिगर होता है. इससे दर्शक के वीडियो चलाने के तरीके में हुए बदलाव का पता चल सकता है. वीडियो चलाने की शर्तों पर असर डालने वाले फ़ैक्टर या इवेंट ट्रिगर करने वाले फ़ैक्टर के बारे में ज़्यादा जानकारी के लिए, YouTube सहायता केंद्र पर जाएं.
इवेंट ऑब्जेक्ट कीdataप्रॉपर्टी वैल्यू, एक स्ट्रिंग होगी. एपीआई, इवेंट ऑब्जेक्ट की यह वैल्यू, इवेंट लिसनर फ़ंक्शन को पास करता है. इस स्ट्रिंग से, वीडियो चलाने की नई क्वालिटी की पहचान की जाती है. संभावित वैल्यू ये हैं:smallmediumlargehd720hd1080highres
onPlaybackRateChange- वीडियो चलाने की स्पीड में बदलाव होने पर, यह इवेंट ट्रिगर होता है. उदाहरण के लिए,
setPlaybackRate(suggestedRate)फ़ंक्शन को कॉल करने पर, यह इवेंट तब ट्रिगर होगा, जब वीडियो चलाने की दर में असल में बदलाव होगा. आपका ऐप्लिकेशन इस इवेंट का जवाब देना चाहिए. साथ ही, यह नहीं मानना चाहिए किsetPlaybackRate(suggestedRate)फ़ंक्शन को कॉल करने पर, वीडियो चलाने की दर अपने-आप बदल जाएगी. इसी तरह, आपके कोड को यह नहीं मानना चाहिए कि वीडियो चलाने की दर सिर्फ़setPlaybackRateको साफ़ तौर पर कॉल करने की वजह से बदलेगी.
इवेंट ऑब्जेक्ट कीdataप्रॉपर्टी वैल्यू, एक संख्या होगी. यह वैल्यू, एपीआई से इवेंट लिसनर फ़ंक्शन को पास की जाती है. इससे, वीडियो चलाने की नई दर की पहचान होती है.getAvailablePlaybackRatesवाला तरीका, फ़िलहाल क्य्यू में रखे गए या चल रहे वीडियो के लिए, वीडियो चलाने की मान्य दरों की सूची दिखाता है.
onError- वीडियो प्लेयर में कोई गड़बड़ी होने पर, यह इवेंट ट्रिगर होता है.
एपीआई, इवेंट लिसनर फ़ंक्शन को
eventऑब्जेक्ट पास करेगा. उस ऑब्जेक्ट कीdataप्रॉपर्टी में एक इंटीजर होगा, जिससे पता चलेगा कि किस तरह की गड़बड़ी हुई है. संभावित वैल्यू ये हैं:2– अनुरोध में पैरामीटर की अमान्य वैल्यू शामिल है. उदाहरण के लिए, यह गड़बड़ी तब होती है, जब आपने वीडियो का ऐसा आईडी डाला हो जिसमें 11 वर्ण न हों या वीडियो आईडी में अमान्य वर्ण शामिल हों. जैसे, विस्मयादिबोधक चिह्न या तारे के निशान.5– अनुरोध किया गया कॉन्टेंट, HTML5 प्लेयर में नहीं चल सकता या HTML5 प्लेयर से जुड़ी कोई दूसरी गड़बड़ी हुई है.100– जिस वीडियो के लिए अनुरोध किया गया था वह नहीं मिला. यह गड़बड़ी तब दिखती है, जब किसी वीडियो को किसी भी वजह से हटा दिया गया हो या उसे निजी के तौर पर मार्क किया गया हो.101– जिस वीडियो के लिए अनुरोध किया गया है उसके मालिक ने उसे एम्बेड किए गए प्लेयर में चलाने की अनुमति नहीं दी है.150– यह गड़बड़ी,101जैसी ही है. यह सिर्फ़101गड़बड़ी है!
onApiChange- यह इवेंट यह बताने के लिए ट्रिगर होता है कि प्लेयर ने एक्सपोज़ किए गए एपीआई तरीकों के साथ कोई मॉड्यूल लोड किया है या अनलोड किया है. आपका ऐप्लिकेशन इस इवेंट को सुन सकता है. इसके बाद, हाल ही में लोड किए गए मॉड्यूल के लिए कौनसे विकल्प दिखाए गए हैं, यह पता लगाने के लिए प्लेयर को पोल कर सकता है. इसके बाद, आपका ऐप्लिकेशन उन विकल्पों के लिए मौजूदा सेटिंग को वापस ला सकता है या अपडेट कर सकता है.
यह कमांड, मॉड्यूल के उन नामों की सूची दिखाता है जिनके लिए प्लेयर के विकल्प सेट किए जा सकते हैं:
फ़िलहाल, सिर्फ़player.getOptions();
captionsमॉड्यूल के लिए विकल्प सेट किए जा सकते हैं. यह मॉड्यूल, प्लेयर में सबटाइटल दिखाने की सुविधा को मैनेज करता है.onApiChangeइवेंट मिलने पर, आपका ऐप्लिकेशन इस कमांड का इस्तेमाल करके यह तय कर सकता है किcaptionsमॉड्यूल के लिए कौनसे विकल्प सेट किए जा सकते हैं:
इस निर्देश की मदद से प्लेयर को पोल करके, यह पुष्टि की जा सकती है कि आपको जिन विकल्पों को ऐक्सेस करना है वे ऐक्सेस किए जा सकते हैं या नहीं. ये निर्देश, मॉड्यूल के विकल्पों को वापस लाते हैं और उन्हें अपडेट करते हैं:player.getOptions('captions');
नीचे दी गई टेबल में, उन विकल्पों की सूची दी गई है जिनका इस्तेमाल एपीआई के साथ किया जा सकता है:Retrieving an option: player.getOption(module, option); Setting an option player.setOption(module, option, value);
मॉड्यूल विकल्प ब्यौरा कैप्शन fontSize इस विकल्प की मदद से, प्लेयर में दिखने वाले कैप्शन के फ़ॉन्ट साइज़ में बदलाव किया जा सकता है.
इसकी मान्य वैल्यू-1,0,1,2, और3हैं. डिफ़ॉल्ट साइज़0है और सबसे छोटा साइज़-1है. इस विकल्प को-1से कम के पूर्णांक पर सेट करने पर, कैप्शन का सबसे छोटा साइज़ दिखेगा. वहीं, इस विकल्प को3से ज़्यादा के पूर्णांक पर सेट करने पर, कैप्शन का सबसे बड़ा साइज़ दिखेगा.कैप्शन फिर से लोड करें यह विकल्प, चल रहे वीडियो के सबटाइटल का डेटा फिर से लोड करता है. अगर विकल्प की वैल्यू को वापस पाया जाता है, तो वैल्यू nullहोगी. सबटाइटल का डेटा रीफ़्रेश करने के लिए, वैल्यू कोtrueपर सेट करें.
onAutoplayBlocked- जब भी ब्राउज़र, वीडियो अपने-आप चलने या स्क्रिप्ट वाले वीडियो चलने की सुविधाओं को ब्लॉक करता है, तब यह इवेंट ट्रिगर होता है. इन्हें "वीडियो अपने-आप चलना" कहा जाता है. इसमें इनमें से किसी भी प्लेयर एपीआई के साथ वीडियो चलाने की कोशिश शामिल है:
autoplayपैरामीटरloadPlaylistफ़ंक्शनloadVideoByIdफ़ंक्शनloadVideoByUrlफ़ंक्शनplayVideoफ़ंक्शन
पूरी जानकारी के लिए, ब्राउज़र से जुड़ी नीतियों (Apple Safari / Webkit, Google Chrome, Mozilla Firefox) और Mozilla की वीडियो अपने-आप चलने की सुविधा से जुड़ी गाइड देखें.
उदाहरण
YT.Player ऑब्जेक्ट बनाना
-
पहला उदाहरण: मौजूदा <iframe> के साथ एपीआई का इस्तेमाल करना
इस उदाहरण में, पेज पर मौजूद
<iframe>एलिमेंट पहले से ही उस प्लेयर के बारे में बताता है जिसके साथ एपीआई का इस्तेमाल किया जाएगा. ध्यान दें कि प्लेयर केsrcयूआरएल मेंenablejsapiपैरामीटर को1पर सेट करना ज़रूरी है या<iframe>एलिमेंट केenablejsapiएट्रिब्यूट कोtrueपर सेट करना ज़रूरी है.onPlayerReadyफ़ंक्शन, खिलाड़ी के तैयार होने पर उसके बॉर्डर का रंग नारंगी में बदल देता है. इसके बाद,onPlayerStateChangeफ़ंक्शन खिलाड़ी की मौजूदा स्थिति के आधार पर, खिलाड़ी के बॉर्डर का रंग बदल देता है. उदाहरण के लिए, प्लेयर के चलने पर रंग हरा होता है, रोके जाने पर लाल होता है, बफ़र होने पर नीला होता है वगैरह.इस उदाहरण में, इस कोड का इस्तेमाल किया गया है:
<iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" style="border: solid 4px #37474F" ></iframe> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('existing-iframe-example', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00'; } function changeBorderColor(playerStatus) { var color; if (playerStatus == -1) { color = "#37474F"; // unstarted = gray } else if (playerStatus == 0) { color = "#FFFF00"; // ended = yellow } else if (playerStatus == 1) { color = "#33691E"; // playing = green } else if (playerStatus == 2) { color = "#DD2C00"; // paused = red } else if (playerStatus == 3) { color = "#AA00FF"; // buffering = purple } else if (playerStatus == 5) { color = "#FF6DOO"; // video cued = orange } if (color) { document.getElementById('existing-iframe-example').style.borderColor = color; } } function onPlayerStateChange(event) { changeBorderColor(event.data); } </script>
-
उदाहरण 2: तेज़ आवाज़ में वीडियो चलाना
इस उदाहरण में, 1280 पिक्सल x 720 पिक्सल का वीडियो प्लेयर बनाया गया है. इसके बाद,
onReadyइवेंट के लिए इवेंट लिसनर, वॉल्यूम को सबसे ज़्यादा सेटिंग पर अडजस्ट करने के लिएsetVolumeफ़ंक्शन को कॉल करता है.function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { width: 1280, height: 720, videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerReady(event) { event.target.setVolume(100); event.target.playVideo(); }
-
तीसरा उदाहरण: इस उदाहरण में, वीडियो लोड होने पर उसे अपने-आप चलाने और वीडियो प्लेयर के कंट्रोल छिपाने के लिए, प्लेयर पैरामीटर सेट किए गए हैं. यह एपीआई के ब्रॉडकास्ट किए जाने वाले कई इवेंट के लिए, इवेंट लिसनर भी जोड़ता है.
function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { videoId: 'M7lc1UVf-VE', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); }
360° वीडियो को कंट्रोल करना
इस उदाहरण में, इस कोड का इस्तेमाल किया गया है:
<style> .current-values { color: #666; font-size: 12px; } </style> <!-- The player is inserted in the following div element --> <div id="spherical-video-player"></div> <!-- Display spherical property values and enable user to update them. --> <table style="border: 0; width: 640px;"> <tr style="background: #fff;"> <td> <label for="yaw-property">yaw: </label> <input type="text" id="yaw-property" style="width: 80px"><br> <div id="yaw-current-value" class="current-values"> </div> </td> <td> <label for="pitch-property">pitch: </label> <input type="text" id="pitch-property" style="width: 80px"><br> <div id="pitch-current-value" class="current-values"> </div> </td> <td> <label for="roll-property">roll: </label> <input type="text" id="roll-property" style="width: 80px"><br> <div id="roll-current-value" class="current-values"> </div> </td> <td> <label for="fov-property">fov: </label> <input type="text" id="fov-property" style="width: 80px"><br> <div id="fov-current-value" class="current-values"> </div> </td> <td style="vertical-align: bottom;"> <button id="spherical-properties-button">Update properties</button> </td> </tr> </table> <script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var PROPERTIES = ['yaw', 'pitch', 'roll', 'fov']; var updateButton = document.getElementById('spherical-properties-button'); // Create the YouTube Player. var ytplayer; function onYouTubeIframeAPIReady() { ytplayer = new YT.Player('spherical-video-player', { height: '360', width: '640', videoId: 'FAtdv94yzp4', }); } // Don't display current spherical settings because there aren't any. function hideCurrentSettings() { for (var p = 0; p < PROPERTIES.length; p++) { document.getElementById(PROPERTIES[p] + '-current-value').innerHTML = ''; } } // Retrieve current spherical property values from the API and display them. function updateSetting() { if (!ytplayer || !ytplayer.getSphericalProperties) { hideCurrentSettings(); } else { let newSettings = ytplayer.getSphericalProperties(); if (Object.keys(newSettings).length === 0) { hideCurrentSettings(); } else { for (var p = 0; p < PROPERTIES.length; p++) { if (newSettings.hasOwnProperty(PROPERTIES[p])) { currentValueNode = document.getElementById(PROPERTIES[p] + '-current-value'); currentValueNode.innerHTML = ('current: ' + newSettings[PROPERTIES[p]].toFixed(4)); } } } } requestAnimationFrame(updateSetting); } updateSetting(); // Call the API to update spherical property values. updateButton.onclick = function() { var sphericalProperties = {}; for (var p = 0; p < PROPERTIES.length; p++) { var propertyInput = document.getElementById(PROPERTIES[p] + '-property'); sphericalProperties[PROPERTIES[p]] = parseFloat(propertyInput.value); } ytplayer.setSphericalProperties(sphericalProperties); } </script>
Android WebView Media Integrity API का इंटिग्रेशन
YouTube ने Android वेबव्यू मीडिया इंटिग्रिटी एपीआई को अपडेट किया है. इससे, एम्बेड किए गए मीडिया प्लेयर को चालू किया जा सकेगा. इनमें, Android ऐप्लिकेशन में एम्बेड किए गए YouTube प्लेयर भी शामिल हैं. इससे, एम्बेड करने वाले ऐप्लिकेशन की पुष्टि की जा सकेगी. इस बदलाव के बाद, एम्बेड किए गए ऐप्लिकेशन, YouTube को अपने-आप एक पुष्टि किया गया ऐप्लिकेशन आईडी भेजते हैं. इस एपीआई के इस्तेमाल से इकट्ठा किया गया डेटा, ऐप्लिकेशन का मेटाडेटा (पैकेज का नाम, वर्शन नंबर, और साइनिंग सर्टिफ़िकेट) और Google Play services से जनरेट किया गया डिवाइस की पुष्टि करने वाला टोकन होता है.
इस डेटा का इस्तेमाल, ऐप्लिकेशन और डिवाइस की इंटिग्रिटी की पुष्टि करने के लिए किया जाता है. इसे एन्क्रिप्ट (सुरक्षित) किया जाता है और तीसरे पक्षों के साथ शेयर नहीं किया जाता. साथ ही, इसे तय समय के बाद मिटा दिया जाता है. ऐप्लिकेशन डेवलपर, WebView Media Integrity API में अपने ऐप्लिकेशन की पहचान कॉन्फ़िगर कर सकते हैं. कॉन्फ़िगरेशन में ऑप्ट-आउट करने का विकल्प होता है.
संशोधन इतिहास
June 24, 2024
The documentation has been updated to note that YouTube has extended the Android WebView Media Integrity API to enable embedded media players, including YouTube player embeds in Android applications, to verify the embedding app's authenticity. With this change, embedding apps automatically send an attested app ID to YouTube.
November 20, 2023
The new onAutoplayBlocked event API is now available.
This event notifies your application if the browser blocks autoplay or scripted playback.
Verification of autoplay success or failure is an
established paradigm
for HTMLMediaElements, and the onAutoplayBlocked event now provides similar
functionality for the IFrame Player API.
April 27, 2021
The Getting Started and Loading a Video Player sections have been updated to include examples of using a playerVars object to customize the player.
October 13, 2020
Note: This is a deprecation announcement for the embedded player
functionality that lets you configure the player to load search results. This announcement affects
the IFrame Player API's queueing functions for lists,
cuePlaylist and
loadPlaylist.
This change will become effective on or after cuePlaylist or loadPlaylist functions that set the listType
property to search will generate a 4xx response code, such as
404 (Not Found) or 410 (Gone). This change
also affects the list property for those functions as that property no longer
supports the ability to specify a search query.
As an alternative, you can use the YouTube Data API's
search.list method to retrieve search
results and then load selected videos in the player.
October 24, 2019
The documentation has been updated to reflect the fact that the API no longer supports functions for setting or retrieving playback quality. As explained in this YouTube Help Center article, to give you the best viewing experience, YouTube adjusts the quality of your video stream based on your viewing conditions.
The changes explained below have been in effect for more than one year. This update merely aligns the documentation with current functionality:
- The
getPlaybackQuality,setPlaybackQuality, andgetAvailableQualityLevelsfunctions are no longer supported. In particular, calls tosetPlaybackQualitywill be no-op functions, meaning they will not actually have any impact on the viewer's playback experience. - The queueing functions for videos and playlists --
cueVideoById,loadVideoById, etc. -- no longer support thesuggestedQualityargument. Similarly, if you call those functions using object syntax, thesuggestedQualityfield is no longer supported. IfsuggestedQualityis specified, it will be ignored when the request is handled. It will not generate any warnings or errors. - The
onPlaybackQualityChangeevent is still supported and might signal a change in the viewer's playback environment. See the Help Center article referenced above for more information about factors that affect playback conditions or that might cause the event to fire.
May 16, 2018
The API now supports features that allow users (or embedders) to control the viewing perspective for 360° videos:
- The
getSphericalPropertiesfunction retrieves the current orientation for the video playback. The orientation includes the following data:- yaw - represents the horizontal angle of the view in degrees, which reflects the extent to which the user turns the view to face further left or right
- pitch - represents the vertical angle of the view in degrees, which reflects the extent to which the user adjusts the view to look up or down
- roll - represents the rotational angle (clockwise or counterclockwise) of the view in degrees.
- fov - represents the field-of-view of the view in degrees, which reflects the extent to which the user zooms in or out on the video.
- The
setSphericalPropertiesfunction modifies the view to match the submitted property values. In addition to the orientation values described above, this function supports a Boolean field that indicates whether the IFrame embed should respond toDeviceOrientationEventson supported mobile devices.
This example demonstrates and lets you test these new features.
June 19, 2017
This update contains the following changes:
-
Documentation for the YouTube Flash Player API and YouTube JavaScript Player API has been removed and redirected to this document. The deprecation announcement for the Flash and JavaScript players was made on January 27, 2015. If you haven't done so already, please migrate your applications to use IFrame embeds and the IFrame Player API.
August 11, 2016
This update contains the following changes:
-
The newly published YouTube API Services Terms of Service ("the Updated Terms"), discussed in detail on the YouTube Engineering and Developers Blog, provides a rich set of updates to the current Terms of Service. In addition to the Updated Terms, which will go into effect as of February 10, 2017, this update includes several supporting documents to help explain the policies that developers must follow.
The full set of new documents is described in the revision history for the Updated Terms. In addition, future changes to the Updated Terms or to those supporting documents will also be explained in that revision history. You can subscribe to an RSS feed listing changes in that revision history from a link in that document.
June 29, 2016
This update contains the following changes:
-
The documentation has been corrected to note that the
onApiChangemethod provides access to thecaptionsmodule and not theccmodule.
June 24, 2016
The Examples section has been updated to include an example that demonstrates how to use the API with an existing <iframe> element.
January 6, 2016
The clearVideo function has been deprecated and removed from the documentation. The function no longer has any effect in the YouTube player.
December 18, 2015
European Union (EU) laws require that certain disclosures must be given to and consents obtained from end users in the EU. Therefore, for end users in the European Union, you must comply with the EU User Consent Policy. We have added a notice of this requirement in our YouTube API Terms of Service.
April 28, 2014
This update contains the following changes:
-
The new removeEventListener function lets you remove a listener for a specified event.
March 25, 2014
This update contains the following changes:
-
The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
July 23, 2013
This update contains the following changes:
-
The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.
October 31, 2012
This update contains the following changes:
-
The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.
In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API's playlist queueing functions already supported object syntax.)
-
When called using object syntax, each of the video queueing functions supports an
endSecondsproperty, which accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()is called. -
The
getVideoStartBytesmethod has been deprecated. The method now always returns a value of0.
August 22, 2012
This update contains the following changes:
-
The example in the Loading a video player section that demonstrates how to manually create the
<iframe>tag has been updated to include a closing</iframe>tag since theonYouTubeIframeAPIReadyfunction is only called if the closing</iframe>element is present.
August 6, 2012
This update contains the following changes:
-
The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.
-
The API supports several new functions and one new event that can be used to control the video playback speed:
-
Functions
getAvailablePlaybackRates– Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.getPlaybackRate– Retrieve the playback rate for the cued or playing video.setPlaybackRate– Set the playback rate for the cued or playing video.
-
Events
onPlaybackRateChange– This event fires when the video's playback rate changes.
-
July 19, 2012
This update contains the following changes:
-
The new
getVideoLoadedFractionmethod replaces the now-deprecatedgetVideoBytesLoadedandgetVideoBytesTotalmethods. The new method returns the percentage of the video that the player shows as buffered. -
The
onErrorevent may now return an error code of5, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the
onYouTubeIframeAPIReadyfunction. Previously, the section indicated that the required function was namedonYouTubePlayerAPIReady. Code samples throughout the document have also been updated to use the new name.Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an onYouTubeIframeAPIReadyfunction and anonYouTubePlayerAPIReadyfunction, both functions will be called, and theonYouTubeIframeAPIReadyfunction will be called first. -
The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to
http://www.youtube.com/iframe_api. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api) will continue to work.
July 16, 2012
This update contains the following changes:
-
The Operations section now explains that the API supports the
setSize()anddestroy()methods. ThesetSize()method sets the size in pixels of the<iframe>that contains the player and thedestroy()method removes the<iframe>.
June 6, 2012
This update contains the following changes:
-
We have removed the
experimentalstatus from the IFrame Player API. -
The Loading a video player section has been updated to point out that when inserting the
<iframe>element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.In addition, that section now notes that the insertion of the
<iframe>element could affect the layout of your page if the element being replaced has a different display style than the inserted<iframe>element. By default, an<iframe>displays as aninline-blockelement.
March 30, 2012
This update contains the following changes:
-
The Operations section has been updated to explain that the IFrame API supports a new method,
getIframe(), which returns the DOM node for the IFrame embed.
March 26, 2012
This update contains the following changes:
-
The Requirements section has been updated to note the minimum player size.