फिडल लिंक: सोर्स कोड - प्रीव्यू - लघु संस्करण
अपडेट: यह छोटा फ़ंक्शन केवल एक ही दिशा में कोड को निष्पादित करेगा। यदि आप पूर्ण समर्थन चाहते हैं (उदाहरण के लिए श्रोता / गेटर्स), तो jQuery में Youtube इवेंट के लिए श्रवण पर एक नज़र डालें
एक गहरी कोड विश्लेषण के परिणामस्वरूप, मैंने एक फ़ंक्शन बनाया है: function callPlayerकिसी भी फ़्रेम वाले YouTube वीडियो पर फ़ंक्शन कॉल का अनुरोध करता है। संभावित फ़ंक्शन कॉल की पूरी सूची प्राप्त करने के लिए YouTube Api संदर्भ देखें । स्पष्टीकरण के लिए स्रोत कोड पर टिप्पणियों को पढ़ें।
खिलाड़ी की तैयार स्थिति की देखभाल करने के लिए 17 मई 2012 को कोड आकार दोगुना कर दिया गया था। यदि आपको एक कॉम्पैक्ट फ़ंक्शन की आवश्यकता होती है जो खिलाड़ी की तैयार स्थिति से नहीं निपटती है , तो http://jsfiddle.net/8R5y6/ देखें ।
/**
* @author Rob W <gwnRob@gmail.com>
* @website https://stackoverflow.com/a/7513356/938089
* @version 20190409
* @description Executes function on a framed YouTube video (see website link)
* For a full list of possible functions, see:
* https://developers.google.com/youtube/js_api_reference
* @param String frame_id The id of (the div containing) the frame
* @param String func Desired function to call, eg. "playVideo"
* (Function) Function to call when the player is ready.
* @param Array args (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
// When the player is not ready yet, add the event to a queue
// Each frame_id is associated with an own queue.
// Each queue has three possible states:
// undefined = uninitialised / array = queue / .ready=true = ready
if (!callPlayer.queue) callPlayer.queue = {};
var queue = callPlayer.queue[frame_id],
domReady = document.readyState == 'complete';
if (domReady && !iframe) {
// DOM is ready and iframe does not exist. Log a message
window.console && console.log('callPlayer: Frame not found; id=' + frame_id);
if (queue) clearInterval(queue.poller);
} else if (func === 'listening') {
// Sending the "listener" message to the frame, to request status updates
if (iframe && iframe.contentWindow) {
func = '{"event":"listening","id":' + JSON.stringify(''+frame_id) + '}';
iframe.contentWindow.postMessage(func, '*');
}
} else if ((!queue || !queue.ready) && (
!domReady ||
iframe && !iframe.contentWindow ||
typeof func === 'function')) {
if (!queue) queue = callPlayer.queue[frame_id] = [];
queue.push([func, args]);
if (!('poller' in queue)) {
// keep polling until the document and frame is ready
queue.poller = setInterval(function() {
callPlayer(frame_id, 'listening');
}, 250);
// Add a global "message" event listener, to catch status updates:
messageEvent(1, function runOnceReady(e) {
if (!iframe) {
iframe = document.getElementById(frame_id);
if (!iframe) return;
if (iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
if (!iframe) return;
}
}
if (e.source === iframe.contentWindow) {
// Assume that the player is ready if we receive a
// message from the iframe
clearInterval(queue.poller);
queue.ready = true;
messageEvent(0, runOnceReady);
// .. and release the queue:
while (tmp = queue.shift()) {
callPlayer(frame_id, tmp[0], tmp[1]);
}
}
}, false);
}
} else if (iframe && iframe.contentWindow) {
// When a function is supplied, just call it (like "onYouTubePlayerReady")
if (func.call) return func();
// Frame exists, send message
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
/* IE8 does not support addEventListener... */
function messageEvent(add, listener) {
var w3 = add ? window.addEventListener : window.removeEventListener;
w3 ?
w3('message', listener, !1)
:
(add ? window.attachEvent : window.detachEvent)('onmessage', listener);
}
}
उपयोग:
callPlayer("whateverID", function() {
// This function runs once the player is ready ("onYouTubePlayerReady")
callPlayer("whateverID", "playVideo");
});
// When the player is not ready yet, the function will be queued.
// When the iframe cannot be found, a message is logged in the console.
callPlayer("whateverID", "playVideo");
संभावित प्रश्न (और उत्तर):
क्यू : यह काम नहीं करता है!
एक : "काम नहीं करता है" एक स्पष्ट विवरण नहीं है। क्या आपको कोई त्रुटि संदेश प्राप्त होता है? कृपया संबंधित कोड दिखाएं।
क्यू : playVideoवीडियो नहीं खेलता है।
A : प्लेबैक को उपयोगकर्ता सहभागिता, और allow="autoplay"iframe की उपस्थिति की आवश्यकता होती है । देखें https://developers.google.com/web/updates/2017/09/autoplay-policy-changes और https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
प्रश्न : मैंने एक YouTube वीडियो का उपयोग करके एम्बेड किया है, <iframe src="http://www.youtube.com/embed/As2rZGPGKDY" />लेकिन फ़ंक्शन किसी फ़ंक्शन को निष्पादित नहीं करता है!
एक : आप जोड़ने के लिए ?enablejsapi=1अपने URL के अंत में: /embed/vid_id?enablejsapi=1।
प्रश्न : मुझे त्रुटि संदेश "एक अवैध या अवैध स्ट्रिंग निर्दिष्ट किया गया था"। क्यों?
A : API किसी स्थानीय होस्ट ( file://) में ठीक से काम नहीं करता है । अपने ऑनलाइन (परीक्षण) पृष्ठ को होस्ट करें, या JSFiddle का उपयोग करें । उदाहरण: इस उत्तर के शीर्ष पर स्थित लिंक देखें।
प्रश्न : आपको यह कैसे पता चला?
ए : मैंने एपीआई के स्रोत को मैन्युअल रूप से व्याख्या करने के लिए कुछ समय बिताया है। मैंने निष्कर्ष निकाला कि मुझे postMessageविधि का उपयोग करना था । यह जानने के लिए कि किस तर्क को पारित करना है, मैंने एक क्रोम एक्सटेंशन बनाया जो संदेशों को स्वीकार करता है। एक्सटेंशन के लिए स्रोत कोड यहां डाउनलोड किया जा सकता है ।
प्रश्न : क्या ब्राउज़र समर्थित हैं?
एक : हर ब्राउज़र जो JSON का समर्थन करता है और postMessage।
- IE 8+
- फ़ायरफ़ॉक्स 3.6+ (वास्तव में 3.5, लेकिन
document.readyState3.6 में लागू किया गया था)
- ओपेरा 10.50+
- सफारी 4+
- क्रोम 3+
संबंधित जवाब / कार्यान्वयन: फीका-में फंसाया वीडियो jQuery का उपयोग कर
पूर्ण एपीआई का समर्थन: jQuery में यूट्यूब घटना के लिए सुनकर
सरकारी एपीआई: https://developers.google.com/youtube/iframe_api_reference
संशोधन इतिहास
- 17 मई 2012
लागू onYouTubePlayerReady: callPlayer('frame_id', function() { ... })।
जब खिलाड़ी अभी तक तैयार नहीं होता है तो फ़ंक्शंस स्वचालित रूप से पंक्तिबद्ध हो जाते हैं।
- 24 जुलाई 2012
अपडेट किया गया और सफलतापूर्वक समर्थित ब्राउज़रों में परीक्षण किया गया (आगे देखें)।
- 10 अक्टूबर 2013 जब एक समारोह एक तर्क के रूप में पारित किया जाता है,
callPlayerतो तत्परता की जांच करता है। इसकी आवश्यकता है, क्योंकि जब callPlayerदस्तावेज़ तैयार होता है, तो iframe के सम्मिलन के बाद इसे सही कहा जाता है, यह सुनिश्चित करने के लिए नहीं जान सकता है कि iframe पूरी तरह से तैयार है। इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स में, इस परिदृश्य के परिणामस्वरूप बहुत जल्दी मंगलाचरण हुआ postMessage, जिसे अनदेखा कर दिया गया।
- 12 दिसंबर 2013,
&origin=*URL में जोड़ने की सिफारिश की गई ।
- २ मार्च २०१४,
&origin=*यूआरएल को हटाने की सिफारिश को वापस ले लिया ।
- 9 अप्रैल 2019, बग को ठीक करें, जिसके परिणामस्वरूप पृष्ठ तैयार होने से पहले YouTube लोड होने पर अनंत पुनरावृत्ति हो सकती है। ऑटोप्ले के बारे में ध्यान दें।