ইউটিউব আইফ্রেমে এপিআই: ইতিমধ্যে এইচটিএমএলে থাকা কোনও আইফ্রেমে প্লেয়ারকে কীভাবে নিয়ন্ত্রণ করব?


149

আমি ইফ্রেমে ভিত্তিক ইউটিউব প্লেয়ারগুলিকে নিয়ন্ত্রণ করতে সক্ষম হতে চাই। এই প্লেয়ারগুলি ইতিমধ্যে এইচটিএমএলে থাকবে তবে আমি জাভাস্ক্রিপ্ট এপিআইয়ের মাধ্যমে সেগুলি নিয়ন্ত্রণ করতে চাই।

আমি আইফ্রেমে এপিআইয়ের জন্য ডকুমেন্টেশন পড়ছি যা ব্যাখ্যা করে যে কীভাবে এপিআই দিয়ে পৃষ্ঠায় একটি নতুন ভিডিও যুক্ত করা যায়, এবং তারপরে এটি ইউটিউব প্লেয়ার ফাংশনগুলির সাথে নিয়ন্ত্রণ করে:

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('container', {
        height: '390',
        width: '640',
        videoId: 'u1zgFlCw8Aw',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

এই কোডটি একটি নতুন প্লেয়ার অবজেক্ট তৈরি করে এবং এটি 'প্লেয়ার' হিসাবে নির্ধারিত করে, তারপরে এটিকে # কন্টেইনার ডিভের ভিতরে .োকায়। তারপর আমি 'খেলোয়াড়' এবং কল অপারেট করতে পারে playVideo(), pauseVideo()এটা ইত্যাদি।

তবে আমি ইফ্রামে প্লেয়ারদের পরিচালনা করতে সক্ষম হতে চাই যা ইতিমধ্যে পৃষ্ঠায় রয়েছে।

আমি পুরানো এম্বেড পদ্ধতিতে এমন কিছু দিয়ে খুব সহজেই এটি করতে পারি:

player = getElementById('whateverID');
player.playVideo();

তবে এটি নতুন আইফ্রেমে কাজ করে না। কীভাবে আমি ইতিমধ্যে পৃষ্ঠায় একটি iframe অবজেক্ট বরাদ্দ করতে পারি এবং তারপরে এটিতে API ফাংশন ব্যবহার করব?


আমি ইউটিউব আইফ্রেমে
গাজাস

উত্তর:


316

ফিডাল লিংক: উত্স কোড - পূর্বরূপ - ছোট সংস্করণ
আপডেট: এই ছোট ফাংশনটি কেবলমাত্র একক দিকে কোড চালায়। আপনি পূর্ণ সমর্থন চান (যেমন ঘটনা শ্রোতাকে / 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, পৃষ্ঠাটি প্রস্তুত হওয়ার আগে ইউটিউব লোড হওয়ার পরে অসম্পূর্ণ পুনরাবৃত্তির ফলস্বরূপ বাগটি ঠিক করুন। অটোপ্লে সম্পর্কে নোট যুক্ত করুন।

@ রবডাব্লু আমি বাস্তবে এটি চেষ্টা করেছি। মনে হচ্ছে ত্রুটিযুক্ত জেএসওএন আপনার স্ক্রিপ্টের মধ্যে একটি নয়, তবে ইউটিউবের API এর অংশ হিসাবে iframe এর ভিতরে রয়েছে।
ফ্রেশিয়েবল

@ রব ডাব্লু এই সুন্দর স্নিপেট জন্য ধন্যবাদ। ইভেন্ট শ্রোতা যুক্ত করতে ইউটিউব জেএস এপিআই ব্যবহার না করে বার্তা ইভেন্টটি ব্যবহার করার কোনও উপায় খুঁজে পেয়েছেন?
চমত্কার

@ brillout.com PostMessageপদ্ধতিটি ওয়াইটি জেএস এপিআই ( ?enablejsapi=1) এর উপর ভিত্তি করে । জেএস এপিআই সক্ষম না করে postMessageপদ্ধতিটি কিছুই করবে না , ইভেন্ট শ্রোতার একটি সহজ বাস্তবায়নের জন্য লিঙ্কিত উত্তরটি দেখুন । আমি ফ্রেমের সাথে যোগাযোগের জন্য পাঠযোগ্য কোডও তৈরি করেছি, তবে প্রকাশিত হয়নি। আমি এটি প্রকাশ না করার সিদ্ধান্ত নিয়েছি, কারণ এর প্রভাবটি ডিফল্ট ইউটিউব ফ্রেম এপিআইয়ের মতো।
রব ডব্লু

1
@ ম্যাথিউবেকার এর জন্য বার্তা ইভেন্টটি শোনার এবং ফলাফলের স্থিতি বিশ্লেষণের প্রয়োজন। এটি সাধারণ কলগুলির মতো সহজ নয় playVideo, তাই আমি এজন্য অফিসিয়াল এপিআই ব্যবহার করার পরামর্শ দিই। ডেভেলপারস google.com/youtube/iframe_api_references#Events দেখুন ।
রব ডব্লিউ

1
@ ফিফায়হহ আমি কোনও স্পষ্ট ত্রুটি দেখতে পাচ্ছি না। দয়া করে এই উত্তরে মন্তব্যে প্রশ্ন যুক্ত করার পরিবর্তে একটি স্ব-অন্তর্ভুক্ত পদক্ষেপ-থেকে-পুনরুত্পাদন সহ একটি নতুন প্রশ্ন জিজ্ঞাসা করুন।
রব ডাব্লু

33

দেখে মনে হচ্ছে ইউটিউব তাদের জেএস এপিআই আপডেট করেছে তাই এটি ডিফল্টরূপে উপলব্ধ! আপনি বিদ্যমান ইউটিউব আইফ্রেমের আইডি ব্যবহার করতে পারেন ...

<iframe id="player" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>

... আপনার জেএসে ...

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange() {
  //...
}

... এবং কনস্ট্রাক্টর এটির পরিবর্তে আপনার বিদ্যমান আইফ্রেমে নতুন ব্যবহার করবে। এর অর্থ হ'ল আপনাকে নির্মাণকারীর কাছে ভিডিওআইডি নির্দিষ্ট করতে হবে না।

একটি ভিডিও প্লেয়ার লোড হচ্ছে দেখুন


1
আপনি যদি ইউআরএলটিতে অটোপ্লে = 1 প্যারামিটারটি হারিয়ে ফেলেন তবে। আপনার উদাহরণ ইউআরএল, এটি হবে youtube.com/e
એમ્બેડ

@ আলেঞ্জেল তিনি অটোপ্লে-ইউআরএল প্যারামিটারটি ব্যবহার করতে চান না। পরিবর্তে তিনি js-APIs অটোপ্লে ফাংশনটি ব্যবহার করে ভিডিওটি শুরু করার চেষ্টা করেন। তবে কিছু কারণে ইউটিউবআইফ্রেমেএপিআইআরডি () ফাংশনটি চালু করা হয়নি।
হাম্পাকারিজিট

@ তবে আমি এটি বুঝতে পেরেছি। 1) iframe ইউআরএল থেকে & উত্স = example.com সরান। ২) আপনার জেএসফিডেলের "ফ্রেমওয়ার্কস এবং এক্সটেনশানস" বিভাগে "ড্রপ ডাউন না - <হেড>" 3) দ্বিতীয় ড্রপ ডাউন মেনুতে বাহ্যিক সংস্থান হিসাবে ইউটিউব ইফ্রেমে এপি যুক্ত করুন ( youtube.com/iframe_api ); আমি আপনার ফিডলকে
হাম্পাকেরজিট

কোনও ধারণা কি eventবা commandওয়াইটি ইফ্রেমে listeningস্ট্যাটাসে থামার জন্য পাঠাতে হবে ?
এমখতিব

@ ক্ল্যাটাস ডাব্লু: আমি এই ত্রুটিটি পেয়েছি: অপ্রকাশিত (প্রতিশ্রুতিতে) ডোমেক্সেক্সেপশন: নাটক () অনুরোধটি বিরতি দেওয়ার জন্য একটি কল দিয়ে বাধা দেওয়া হয়েছিল ()। প্রতিশ্রুতি (async) (বেনামে) @ স্ক্রিপ্টস.জেএস: 20 প্রেরণ @ jquery-1.12.4.js: 5226 elemData.handle @ jquery-1.12.4.js: 4878 কাস্ট_সেন্ডার.জেএস: 67 অপরিবর্তিত ডোমেক্সেপশন: 'উপস্থাপনা-রচনা নির্মাণ করতে ব্যর্থ ': একটি অনিরাপদ দলিলের উপস্থাপনা [castালাই: 233637DE? ক্ষমতা = ভিডিও_আউট% 2Caudio_out & ক্লায়েন্টআইডি = 153262711713390989 & অটোজয়াইনপালিসি = ট্যাব_অ্যান্ড_রিজিন_স্কোপড & ডিফল্টঅ্যাকশনপোলসি = castালাই_পরিচয়_পরিবর্তনকালীন সময় = 30000] সুরক্ষা থেকে নিষিদ্ধ।
লৌরাএনএমএস

20

আপনি অনেক কম কোড দিয়ে এটি করতে পারেন:

function callPlayer(func, args) {
    var i = 0,
        iframes = document.getElementsByTagName('iframe'),
        src = '';
    for (i = 0; i < iframes.length; i += 1) {
        src = iframes[i].getAttribute('src');
        if (src && src.indexOf('youtube.com/embed') !== -1) {
            iframes[i].contentWindow.postMessage(JSON.stringify({
                'event': 'command',
                'func': func,
                'args': args || []
            }), '*');
        }
    }
}

কার্যকারী উদাহরণ: http://jsfiddle.net/kmturley/g6P5H/296/


আমি সত্যিই এটি পছন্দ করেছি, কেবল এটি একটি কৌণিক নির্দেশের সাথে কাজ করার জন্য খাপ খাইয়েছি তাই স্কুপের সাথে টগল ফাংশনের উপর নির্ভর করে সমস্ত লুপের প্রয়োজন হবে না এবং ফানকটি পাস করুন (ভিডিওটি প্রদর্শিত হয় -> অটোপ্লে; অন্যথায় - বিরতি দিন) ভিডিও). ধন্যবাদ!
ডিডি।

আপনি নির্দেশিকা ভাগ করা উচিত, দরকারী হতে পারে!
কিম টি

1
এখানে একটি পেনের কোডটির একটি রূপান্তর রয়েছে: codepen.io/anon/pen/qERdza আমি আশা করি এটি সাহায্য করে! এছাড়া Esc কী চেপে আপনার উপর ভিডিও আছে টগল
ডিডি।

এটি সত্য বলে মনে হচ্ছে খুব ভাল! এই পদ্ধতিটি ব্যবহার করার জন্য কি কোনও ব্রাউজার / সুরক্ষা সীমাবদ্ধতা রয়েছে?
ড্যান

হ্যাঁ আইইয়ের কয়েকটি সীমাবদ্ধতা রয়েছে, বিশেষত আইই 10 যা পোস্টমেসেজের পরিবর্তে মেসেজচ্যানেল সমর্থন করে: caniuse.com/#search=postMessage সচেতন থাকুন যে কোনও সামগ্রী সুরক্ষা নীতিগুলিও এই বৈশিষ্ট্যটির ব্যবহারকে সীমাবদ্ধ করবে
কিম টি

5

উপরে আমার কিম টি এর কোডটির নিজস্ব সংস্করণ যা কিছু জিকুয়েরির সাথে একত্রিত হয় এবং নির্দিষ্ট আইফ্রেমে লক্ষ্য নির্ধারণের অনুমতি দেয়।

$(function() {
    callPlayer($('#iframe')[0], 'unMute');
});

function callPlayer(iframe, func, args) {
    if ( iframe.src.indexOf('youtube.com/embed') !== -1) {
        iframe.contentWindow.postMessage( JSON.stringify({
            'event': 'command',
            'func': func,
            'args': args || []
        } ), '*');
    }
}

ইউটিউব খেলছে কিভাবে জানবেন? ইউটিউব থেকে কোনও কলব্যাক iframe, তাই বাইরে সাবস্ক্রাইব করতে পারেন?
হাতুড়ি

@ হ্যামার ইউটিউব এপিআই ইভেন্ট ইভেন্ট বিভাগটি দেখুন: বিশেষত OnStateChange: বিকাশকারীরা.
com

@ এডিএমজে, এটি পরীক্ষা করে দেখতে পারেন? কিছু জঘন্য আচরণ ... স্ট্যাকওভারফ্লো
হামার

0

আপনার উত্তরের জন্য রব ডাব্লু ধন্যবাদ।

আমি এপিআই লোড করা এড়াতে কর্ডোভা অ্যাপ্লিকেশনটির মধ্যে এটি ব্যবহার করছি এবং যাতে আমি গতিশীলভাবে লোড হওয়া আইফ্রেমে সহজেই নিয়ন্ত্রণ করতে পারি।

আমি সর্বদা ইফ্রেমে যেমন স্টেট (গেটপ্লেয়ারস্টেট) এবং সময় (গেটকন্ট্রেন্টটাইম) থেকে তথ্য বের করতে সক্ষম হওয়ার সক্ষমতা চেয়েছিলাম।

রব ডাব্লু পোস্টমেসেজ ব্যবহার করে কীভাবে এপিআই কাজ করে তা হাইলাইট করতে সহায়তা করেছিল, তবে অবশ্যই এটি কেবল আমাদের ওয়েব পৃষ্ঠা থেকে আইফ্রেমে একটি দিক থেকে তথ্য প্রেরণ করে। প্রবেশকারীদের অ্যাক্সেসের জন্য আমাদের যদি ইফ্রেমে থেকে আমাদের কাছে ফিরে বার্তাগুলি শোনার প্রয়োজন হয়।

ইফ্রেমে ফিরে আসা বার্তাগুলি সক্রিয় করতে এবং শুনতে রব ডাব্লু এর উত্তর কীভাবে টুইঙ্ক করবেন তা বুঝতে আমার কিছুটা সময় লেগেছে। আমি মেসেজগুলি প্রেরণ এবং গ্রহণের জন্য দায়বদ্ধ কোডটি না পাওয়া পর্যন্ত আমি মূলত ইউটিউব ইফ্রেমের মধ্যে উত্স কোডটি দিয়ে অনুসন্ধান করেছি।

কীটি 'ইভেন্ট'টিকে' শ্রবণ 'করতে পরিবর্তিত করেছিল, এটি মূলত মানগুলি ফেরত দেওয়ার জন্য ডিজাইন করা সমস্ত পদ্ধতিতে অ্যাক্সেস দিয়েছিল।

নীচে আমার সমাধানটি দেওয়া আছে, দয়া করে নোট করুন যে আমি 'শ্রোতা' এ চলেছি কেবল যখন গ্রাহকদের অনুরোধ করা হবে, আপনি অতিরিক্ত পদ্ধতিগুলি অন্তর্ভুক্ত করার জন্য শর্তটি সামঞ্জস্য করতে পারেন।

আরও নোট করুন যে আপনি উইন্ডো.মনেজটিতে একটি কনসোল.লগ (ই) যুক্ত করে iframe থেকে প্রেরিত সমস্ত বার্তা দেখতে পারবেন। আপনি লক্ষ্য করবেন যে একবার শ্রবণ সক্রিয় হওয়ার পরে আপনি ধ্রুবক আপডেট পাবেন যা ভিডিওর বর্তমান সময় অন্তর্ভুক্ত করে। গেটপ্লেয়ারস্টেটের মতো গেটারদের কল করা এই ধ্রুবক আপডেটগুলি সক্রিয় করবে তবে যখন রাষ্ট্রটি পরিবর্তন হবে তখন কেবলমাত্র ভিডিওর সাথে জড়িত একটি বার্তা প্রেরণ করবে।

function callPlayer(iframe, func, args) {
    iframe=document.getElementById(iframe);
    var event = "command";
    if(func.indexOf('get')>-1){
        event = "listening";
    }

    if ( iframe&&iframe.src.indexOf('youtube.com/embed') !== -1) {
      iframe.contentWindow.postMessage( JSON.stringify({
          'event': event,
          'func': func,
          'args': args || []
      }), '*');
    }
}
window.onmessage = function(e){
    var data = JSON.parse(e.data);
    data = data.info;
    if(data.currentTime){
        console.log("The current time is "+data.currentTime);
    }
    if(data.playerState){
        console.log("The player state is "+data.playerState);
    }
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.