ফিডাল লিংক: উত্স কোড - পূর্বরূপ - ছোট সংস্করণ
আপডেট: এই ছোট ফাংশনটি কেবলমাত্র একক দিকে কোড চালায়। আপনি পূর্ণ সমর্থন চান (যেমন ঘটনা শ্রোতাকে / getters), একটি চেহারা আছে এ jQuery মধ্যে ইউটিউব ইভেন্ট শোনার জন্য অপেক্ষা
একটি গভীর কোড বিশ্লেষণের ফলস্বরূপ, আমি একটি ফাংশন তৈরি করেছি: যে function callPlayerকোনও ফ্রেমযুক্ত ইউটিউব ভিডিওতে একটি ফাংশন কলের জন্য অনুরোধ করেছি । সম্ভাব্য ফাংশন কলগুলির সম্পূর্ণ তালিকা পেতে YouTube এপিআই রেফারেন্সটি দেখুন । একটি ব্যাখ্যার জন্য উত্স কোডে মন্তব্যগুলি পড়ুন।
১ 17 মে ২০১২-তে, প্লেয়ারের প্রস্তুত অবস্থার যত্ন নিতে কোডের আকার দ্বিগুণ করা হয়েছিল। আপনার যদি এমন কোনও কমপ্যাক্ট ফাংশন প্রয়োজন যা প্লেয়ারের প্রস্তুত অবস্থার সাথে চুক্তি করে না, দেখুন 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ভিডিওটি প্লে করে না।
উত্তর : প্লেব্যাকের জন্য ব্যবহারকারীর ইন্টারঅ্যাকশন এবং allow="autoplay"আইফ্রেমে উপস্থিতি প্রয়োজন । দেখুন https://developers.google.com/web/updates/2017/09/autoplay-policy-changes এবং https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
প্রশ্ন : আমি ইউটিউব ভিডিও ব্যবহার করে এম্বেড করেছি <iframe src="http://www.youtube.com/embed/As2rZGPGKDY" />তবে ফাংশনটি কোনও ফাংশন কার্যকর করে না!
একটি : আপনি যোগ আছে ?enablejsapi=1আপনার URL শেষে: /embed/vid_id?enablejsapi=1।
প্রশ্ন : আমি ত্রুটির বার্তা পেয়েছি "একটি অবৈধ বা অবৈধ স্ট্রিং নির্দিষ্ট করা হয়েছিল"। কেন?
উত্তর : স্থানীয় হোস্টে এপিআই সঠিকভাবে কাজ করে না ( file://)। আপনার (পরীক্ষা) পৃষ্ঠাটি অনলাইনে হোস্ট করুন, বা জেএসফিডেল ব্যবহার করুন । উদাহরণ: এই উত্তরের শীর্ষে লিঙ্কগুলি দেখুন।
প্রশ্ন : আপনি এটি কীভাবে জানলেন?
উত্তর : আমি এপিআইয়ের উত্স ম্যানুয়ালি ব্যাখ্যা করতে কিছু সময় ব্যয় করেছি। আমি সিদ্ধান্ত নিয়েছি যে আমাকে postMessageপদ্ধতিটি ব্যবহার করতে হবে । কোন যুক্তি পাস করতে হবে তা জানতে, আমি একটি ক্রোম এক্সটেনশন তৈরি করেছি যা বার্তাগুলিকে বাধা দেয়। এক্সটেনশানের উত্স কোডটি এখানে ডাউনলোড করা যায় ।
প্রশ্ন : কোন ব্রাউজারগুলি সমর্থিত?
উত্তর : প্রতিটি ব্রাউজার যা JSON এবং সমর্থন করে postMessage।
- IE 8+
- ফায়ারফক্স ৩.6++ (আসলে ৩.৫, তবে
document.readyStateএটি 3.6 সালে প্রয়োগ করা হয়েছিল)
- অপেরা 10.50+
- সাফারি 4+
- ক্রোম 3+
সম্পর্কিত উত্তর / বাস্তবায়ন: jQuery
পূর্ণ এপিআই সমর্থন ব্যবহার করে একটি ফ্রেমযুক্ত ভিডিও : jQuery
অফিসিয়াল এপিআইতে ইউটিউব ইভেন্টের জন্য শুনছি : https://developers.google.com/youtube/iframe_api_references
পরিবর্ধন ও পরিবর্তন তালিকা
- 17 2012 পারে
বাস্তবায়িত onYouTubePlayerReady: callPlayer('frame_id', function() { ... })।
প্লেয়ার এখনও প্রস্তুত না হলে ফাংশনগুলি স্বয়ংক্রিয়ভাবে সারিবদ্ধ হয়।
- 24 জুলাই 2012
আপডেট হয়েছে এবং সমর্থিত ব্রাউজারগুলিতে সফলতার সাথে পরীক্ষিত হয়েছে (সামনে দেখুন)।
- 10 অক্টোবর 2013 কোনও ফাংশনটি যখন আর্গুমেন্ট হিসাবে পাস করা হয়, তখন তাত্ক্ষণিকতার জন্য একটি চাপ দেয়
callPlayer। এটি প্রয়োজন, কারণ callPlayerডকুমেন্টটি প্রস্তুত হওয়ার সময় যখন আইফ্রেমের সন্নিবেশের পরে ডাকা হয় তখন এটি নিশ্চিতভাবে জানতে পারে না যে আইফ্রেম পুরোপুরি প্রস্তুত কিনা। ইন্টারনেট এক্সপ্লোরার এবং ফায়ারফক্সে, এই দৃশ্যের ফলস্বরূপ খুব শীঘ্রই অনুরোধ postMessageহয়েছিল, যা উপেক্ষা করা হয়েছিল।
- 12 ডিসেম্বর 2013,
&origin=*ইউআরএল যুক্ত করার প্রস্তাব দেওয়া হয়েছে ।
- ২ মার্চ ২০১৪,
&origin=*ইউআরএল-এ সরিয়ে নেওয়ার প্রস্তাব প্রত্যাহার করে।
- 9 এপ্রিল 2019, পৃষ্ঠাটি প্রস্তুত হওয়ার আগে ইউটিউব লোড হওয়ার পরে অসম্পূর্ণ পুনরাবৃত্তির ফলস্বরূপ বাগটি ঠিক করুন। অটোপ্লে সম্পর্কে নোট যুক্ত করুন।