মিডিয়া সেশন API এর সাথে মিডিয়া বিজ্ঞপ্তি এবং প্লেব্যাক নিয়ন্ত্রণগুলি কাস্টমাইজ করুন৷

হার্ডওয়্যার মিডিয়া কীগুলির সাথে কীভাবে সংহত করবেন, মিডিয়া বিজ্ঞপ্তিগুলি কাস্টমাইজ করবেন এবং আরও অনেক কিছু।

François Beaufort

ব্যবহারকারীদের তাদের ব্রাউজারে বর্তমানে কী চলছে তা জানাতে এবং এটি চালু করা পৃষ্ঠায় ফিরে না গিয়ে এটি নিয়ন্ত্রণ করতে, মিডিয়া সেশন API চালু করা হয়েছে। এটি ওয়েব ডেভেলপারদের কাস্টম মিডিয়া বিজ্ঞপ্তি, মিডিয়া ইভেন্ট যেমন প্লে করা, পজ করা, খোঁজা, ট্র্যাক পরিবর্তন, এবং ভিডিও কনফারেন্সিং ইভেন্টগুলি যেমন মিউট/আনমিউট মাইক্রোফোন, টার্নঅন/টার্নঅফ ক্যামেরা, এবং হ্যাং আপের মেটাডেটার মাধ্যমে এই অভিজ্ঞতাটি কাস্টমাইজ করার অনুমতি দেয়৷ এই কাস্টমাইজেশনগুলি ডেস্কটপ মিডিয়া হাব, মোবাইলে মিডিয়া বিজ্ঞপ্তি এবং এমনকি পরিধানযোগ্য ডিভাইসে সহ বিভিন্ন প্রসঙ্গে উপলব্ধ। আমি এই নিবন্ধে এই কাস্টমাইজেশন বর্ণনা করব.

মিডিয়া সেশন API সম্পর্কে

মিডিয়া সেশন API বিভিন্ন সুবিধা এবং ক্ষমতা প্রদান করে:

• হার্ডওয়্যার মিডিয়া কী সমর্থিত।
• মিডিয়া বিজ্ঞপ্তিগুলি মোবাইল, ডেস্কটপ এবং জোড়া পরিধানযোগ্য ডিভাইসে কাস্টমাইজ করা হয়।
• মিডিয়া হাব ডেস্কটপে উপলব্ধ।
• লক স্ক্রিন মিডিয়া নিয়ন্ত্রণগুলি ChromeOS এবং মোবাইলে উপলব্ধ৷
• পিকচার-ইন-পিকচার উইন্ডো কন্ট্রোল অডিও প্লেব্যাক , ভিডিও কনফারেন্সিং এবং স্লাইড উপস্থাপনের জন্য উপলব্ধ।
• মোবাইলে অ্যাসিস্ট্যান্ট ইন্টিগ্রেশন উপলব্ধ।

কয়েকটি উদাহরণ এই পয়েন্টগুলির কিছু চিত্রিত করবে।

উদাহরণ 1: ব্যবহারকারীরা যদি তাদের কীবোর্ডের "পরবর্তী ট্র্যাক" মিডিয়া কী টিপে, তাহলে ওয়েব বিকাশকারীরা এই ব্যবহারকারীর ক্রিয়াটি পরিচালনা করতে পারে ব্রাউজারটি অগ্রভাগে বা পটভূমিতে থাকুক না কেন।

উদাহরণ 2: ব্যবহারকারীরা যদি তাদের ডিভাইসের স্ক্রীন লক থাকা অবস্থায় ওয়েবে একটি পডকাস্ট শোনেন, তাহলেও তারা লক স্ক্রীন মিডিয়া কন্ট্রোল থেকে "ব্যাকওয়ার্ড সন্ধান করুন" আইকনে আঘাত করতে পারেন যাতে ওয়েব ডেভেলপাররা প্লেব্যাকের সময়কে কয়েক সেকেন্ড পিছিয়ে নিয়ে যায়।

উদাহরণ 3: যদি ব্যবহারকারীদের কাছে অডিও চালানোর ট্যাব থাকে, তাহলে তারা সহজেই ডেস্কটপে মিডিয়া হাব থেকে প্লেব্যাক বন্ধ করতে পারে যাতে ওয়েব ডেভেলপাররা তাদের অবস্থা পরিষ্কার করার সুযোগ পায়।

উদাহরণ 4: ব্যবহারকারীরা যদি একটি ভিডিও কলে থাকে, তাহলে তারা ওয়েবসাইটটিকে মাইক্রোফোন ডেটা প্রাপ্ত করা বন্ধ করতে পিকচার-ইন-পিকচার উইন্ডোতে "মাইক্রোফোন টগল করুন" কন্ট্রোল টিপতে পারে৷

এটি সব দুটি ভিন্ন ইন্টারফেসের মাধ্যমে করা হয়: MediaSession ইন্টারফেস এবং MediaMetadata ইন্টারফেস। প্রথমটি ব্যবহারকারীদের যা কিছু চলছে তা নিয়ন্ত্রণ করতে দেয়। দ্বিতীয়টি হল আপনি MediaSession কীভাবে বলবেন কী নিয়ন্ত্রণ করা দরকার।

ব্যাখ্যা করার জন্য, নীচের চিত্রটি দেখায় কিভাবে এই ইন্টারফেসগুলি নির্দিষ্ট মিডিয়া নিয়ন্ত্রণের সাথে সম্পর্কিত, এই ক্ষেত্রে মোবাইলে একটি মিডিয়া বিজ্ঞপ্তি৷

ব্যবহারকারীদের জানাতে দিন কি চলছে

যখন একটি ওয়েবসাইট অডিও বা ভিডিও চালায়, ব্যবহারকারীরা স্বয়ংক্রিয়ভাবে মোবাইলের নোটিফিকেশন ট্রেতে বা ডেস্কটপে মিডিয়া হাবে মিডিয়া বিজ্ঞপ্তিগুলি পান৷ ব্রাউজারটি নথির শিরোনাম এবং এটি খুঁজে পেতে পারে এমন বৃহত্তম আইকন চিত্র ব্যবহার করে উপযুক্ত তথ্য দেখানোর জন্য যথাসাধ্য চেষ্টা করে৷ মিডিয়া সেশন এপিআই-এর সাহায্যে, নীচে দেখানো হিসাবে শিরোনাম, শিল্পীর নাম, অ্যালবামের নাম এবং শিল্পকর্মের মতো কিছু সমৃদ্ধ মিডিয়া মেটাডেটা সহ মিডিয়া বিজ্ঞপ্তি কাস্টমাইজ করা সম্ভব।

মিডিয়ার সময়কাল কমপক্ষে 5 সেকেন্ড হলেই মিডিয়া বিজ্ঞপ্তিগুলি দেখানোর জন্য Chrome "পূর্ণ" অডিও ফোকাসের অনুরোধ করে৷ এটি নিশ্চিত করে যে ডিংসের মতো আনুষঙ্গিক শব্দগুলি বিজ্ঞপ্তিগুলি দেখায় না৷

// After media (video or audio) starts playing
await document.querySelector("video").play();

if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://via.placeholder.com/96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/192', sizes: '192x192', type: 'image/png' },
      { src: 'https://via.placeholder.com/256', sizes: '256x256', type: 'image/png' },
      { src: 'https://via.placeholder.com/384', sizes: '384x384', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  });

  // TODO: Update playback state.
}

প্লেব্যাক শেষ হলে, মিডিয়া সেশনটি "রিলিজ" করার কোন প্রয়োজন নেই কারণ বিজ্ঞপ্তিটি স্বয়ংক্রিয়ভাবে অদৃশ্য হয়ে যাবে৷ মনে রাখবেন যে পরবর্তী প্লেব্যাক শুরু হলে navigator.mediaSession.metadata ব্যবহার করা হবে। এই কারণেই মিডিয়া বিজ্ঞপ্তিতে প্রাসঙ্গিক তথ্য দেখানো হয়েছে তা নিশ্চিত করতে মিডিয়া প্লেব্যাক উত্স পরিবর্তন হলে এটি আপডেট করা গুরুত্বপূর্ণ৷

মিডিয়া মেটাডেটা সম্পর্কে নোট করার জন্য কয়েকটি জিনিস রয়েছে।

• বিজ্ঞপ্তি আর্টওয়ার্ক অ্যারে ব্লব URL এবং ডেটা URL সমর্থন করে৷
• যদি কোন আর্টওয়ার্ক সংজ্ঞায়িত করা না থাকে এবং একটি পছন্দসই আকারে একটি আইকন চিত্র ( <link rel=icon> ব্যবহার করে নির্দিষ্ট করা হয়) থাকে, মিডিয়া বিজ্ঞপ্তিগুলি এটি ব্যবহার করবে।
• Android এর জন্য Chrome-এ বিজ্ঞপ্তি আর্টওয়ার্কের টার্গেট সাইজ হল 512x512 । লো-এন্ড ডিভাইসের জন্য, এটি 256x256 ।
• মিডিয়া এইচটিএমএল উপাদানের title বৈশিষ্ট্যটি "এখন চলছে" macOS উইজেটে ব্যবহৃত হয়।
• যদি মিডিয়া রিসোর্স এমবেড করা থাকে (উদাহরণস্বরূপ একটি iframe এ), মিডিয়া সেশন API তথ্য অবশ্যই এমবেডেড প্রসঙ্গ থেকে সেট করতে হবে। নীচের স্নিপেট দেখুন.

<iframe id="iframe">
  <video>...</video>
</iframe>
<script>
  iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    ...
  });
</script>

আপনি পৃথক অধ্যায়ের তথ্যও যোগ করতে পারেন, যেমন বিভাগের শিরোনাম, এর টাইমস্ট্যাম্প এবং মিডিয়া মেটাডেটাতে একটি স্ক্রিনশট চিত্র। এটি ব্যবহারকারীদের মিডিয়ার বিষয়বস্তুর মাধ্যমে নেভিগেট করতে দেয়।

navigator.mediaSession.metadata = new MediaMetadata({
  // title, artist, album, artwork, ...
  chapterInfo: [{
    title: 'Chapter 1',
    startTime: 0,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }, {
    title: 'Chapter 2',
    startTime: 42,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }]
});

ব্যবহারকারীরা কী বাজছে তা নিয়ন্ত্রণ করতে দিন

একটি মিডিয়া সেশন অ্যাকশন হল একটি ক্রিয়া (উদাহরণস্বরূপ "প্লে" বা "পজ") যা একটি ওয়েবসাইট ব্যবহারকারীদের জন্য পরিচালনা করতে পারে যখন তারা বর্তমান মিডিয়া প্লেব্যাকের সাথে ইন্টারঅ্যাক্ট করে। ক্রিয়াগুলি ইভেন্টগুলির মতোই এবং একই রকম কাজ করে৷ ইভেন্টের মতো, একটি উপযুক্ত বস্তুতে হ্যান্ডলার সেট করার মাধ্যমে ক্রিয়াগুলি প্রয়োগ করা হয়, এই ক্ষেত্রে MediaSession এর একটি উদাহরণ। ব্যবহারকারীরা যখন একটি হেডসেট, অন্য দূরবর্তী ডিভাইস, একটি কীবোর্ড বা একটি মিডিয়া বিজ্ঞপ্তির সাথে ইন্টারঅ্যাক্ট করে তখন কিছু ক্রিয়া ট্রিগার হয়৷

কারণ কিছু মিডিয়া সেশন অ্যাকশন সমর্থিত নাও হতে পারে, সেগুলি সেট করার সময় একটি try…catch ব্লক ব্যবহার করার পরামর্শ দেওয়া হয়।

const actionHandlers = [
  ['play',          () => { /* ... */ }],
  ['pause',         () => { /* ... */ }],
  ['previoustrack', () => { /* ... */ }],
  ['nexttrack',     () => { /* ... */ }],
  ['stop',          () => { /* ... */ }],
  ['seekbackward',  (details) => { /* ... */ }],
  ['seekforward',   (details) => { /* ... */ }],
  ['seekto',        (details) => { /* ... */ }],
  /* Video conferencing actions */
  ['togglemicrophone', () => { /* ... */ }],
  ['togglecamera',     () => { /* ... */ }],
  ['hangup',           () => { /* ... */ }],
  /* Presenting slides actions */
  ['previousslide', () => { /* ... */ }],
  ['nextslide',     () => { /* ... */ }],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}

একটি মিডিয়া সেশন অ্যাকশন হ্যান্ডলার আনসেট করা এটিকে null সেট করার মতোই সহজ।

try {
  // Unset the "nexttrack" action handler at the end of a playlist.
  navigator.mediaSession.setActionHandler('nexttrack', null);
} catch (error) {
  console.log(`The media session action "nexttrack" is not supported yet.`);
}

একবার সেট হয়ে গেলে, মিডিয়া সেশন অ্যাকশন হ্যান্ডলাররা মিডিয়া প্লেব্যাকের মাধ্যমে টিকে থাকবে। এটি ইভেন্ট লিসেনার প্যাটার্নের মতই, একটি ইভেন্ট পরিচালনা করার মানে হল যে ব্রাউজার কোনও ডিফল্ট আচরণ করা বন্ধ করে দেয় এবং এটিকে একটি সংকেত হিসাবে ব্যবহার করে যে ওয়েবসাইট মিডিয়া অ্যাকশন সমর্থন করে। তাই, সঠিক অ্যাকশন হ্যান্ডলার সেট না করা পর্যন্ত মিডিয়া অ্যাকশন কন্ট্রোল দেখানো হবে না।

খেলা / বিরতি

"play" অ্যাকশনটি নির্দেশ করে যে ব্যবহারকারী মিডিয়া প্লেব্যাক পুনরায় শুরু করতে চায় যখন "pause" অস্থায়ীভাবে এটি বন্ধ করার ইচ্ছা নির্দেশ করে।

"প্লে/পজ" আইকনটি সবসময় একটি মিডিয়া বিজ্ঞপ্তিতে দেখানো হয় এবং সম্পর্কিত মিডিয়া ইভেন্টগুলি ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে পরিচালনা করা হয়। তাদের ডিফল্ট আচরণ ওভাররাইড করতে, নীচে দেখানো হিসাবে "প্লে" এবং "পজ" মিডিয়া অ্যাকশনগুলি পরিচালনা করুন।

ব্রাউজারটি একটি ওয়েবসাইটকে মিডিয়া না চালানোর জন্য বিবেচনা করতে পারে যখন উদাহরণের জন্য অনুসন্ধান করা বা লোড করা হয়। এই ক্ষেত্রে, ওয়েবসাইট UI মিডিয়া বিজ্ঞপ্তি নিয়ন্ত্রণের সাথে সিঙ্কে থাকে তা নিশ্চিত করতে navigator.mediaSession.playbackState কে "playing" বা "paused" সেট করে এই আচরণটিকে ওভাররাইড করুন৷

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('play', async () => {
  // Resume playback
  await video.play();
});

navigator.mediaSession.setActionHandler('pause', () => {
  // Pause active playback
  video.pause();
});

video.addEventListener('play', () => {
  navigator.mediaSession.playbackState = 'playing';
});

video.addEventListener('pause', () => {
  navigator.mediaSession.playbackState = 'paused';
});

পূর্ববর্তী ট্র্যাক

"previoustrack" অ্যাকশনটি নির্দেশ করে যে ব্যবহারকারী হয় বর্তমান মিডিয়া প্লেব্যাক শুরু থেকে শুরু করতে চায় যদি মিডিয়া প্লেব্যাকের শুরুর ধারণা থাকে, অথবা প্লেলিস্টের পূর্ববর্তী আইটেমে যেতে চায় যদি মিডিয়া প্লেব্যাকের একটি প্লেলিস্টের ধারণা থাকে।

navigator.mediaSession.setActionHandler('previoustrack', () => {
  // Play previous track.
});

পরবর্তী ট্র্যাক

"nexttrack" অ্যাকশনটি নির্দেশ করে যে ব্যবহারকারী মিডিয়া প্লেব্যাককে প্লেলিস্টের পরবর্তী আইটেমে স্থানান্তর করতে চায় যদি মিডিয়া প্লেব্যাকের একটি প্লেলিস্টের ধারণা থাকে।

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // Play next track.
});

থামো

"stop" অ্যাকশনটি নির্দেশ করে যে ব্যবহারকারী মিডিয়া প্লেব্যাক বন্ধ করতে চায় এবং উপযুক্ত হলে স্টেট সাফ করতে চায়।

navigator.mediaSession.setActionHandler('stop', () => {
  // Stop playback and clear state if appropriate.
});

পিছনের দিকে / সামনের দিকে তাকান

"seekbackward" ক্রিয়াটি নির্দেশ করে যে ব্যবহারকারী মিডিয়া প্লেব্যাক সময়কে একটি স্বল্প সময়ের মধ্যে পিছনে সরাতে চায় যখন "seekforward" একটি স্বল্প সময়ের মধ্যে মিডিয়া প্লেব্যাক সময়কে এগিয়ে নিয়ে যাওয়ার ইচ্ছা নির্দেশ করে৷ উভয় ক্ষেত্রেই, অল্প সময়ের মানে কয়েক সেকেন্ড।

অ্যাকশন হ্যান্ডলারে প্রদত্ত seekOffset মান হল মিডিয়া প্লেব্যাক সময় সরানোর জন্য সেকেন্ডে সময়। যদি এটি প্রদান করা না হয় (উদাহরণস্বরূপ undefined ), তাহলে আপনার একটি বুদ্ধিমান সময় ব্যবহার করা উচিত (উদাহরণস্বরূপ 10-30 সেকেন্ড)।

const video = document.querySelector('video');
const defaultSkipTime = 10; /* Time to skip in seconds by default */

navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.max(video.currentTime - skipTime, 0);
  // TODO: Update playback state.
});

navigator.mediaSession.setActionHandler('seekforward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
  // TODO: Update playback state.
});

একটি নির্দিষ্ট সময় সন্ধান করুন

"seekto" অ্যাকশনটি নির্দেশ করে যে ব্যবহারকারী মিডিয়া প্লেব্যাক সময়কে একটি নির্দিষ্ট সময়ে সরাতে চায়।

অ্যাকশন হ্যান্ডলারে প্রদত্ত seekTime মান হল মিডিয়া প্লেব্যাক সময় সরানোর জন্য সেকেন্ডে সময়।

অ্যাকশন হ্যান্ডলারে প্রদত্ত fastSeek বুলিয়ানটি সত্য যদি একটি সিকোয়েন্সের অংশ হিসাবে অ্যাকশনটি একাধিকবার কল করা হয় এবং এটি সেই ক্রমটির শেষ কল নয়।

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('seekto', (details) => {
  if (details.fastSeek && 'fastSeek' in video) {
    // Only use fast seek if supported.
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
  // TODO: Update playback state.
});

প্লেব্যাক অবস্থান সেট করুন

একটি বিজ্ঞপ্তিতে মিডিয়া প্লেব্যাকের অবস্থান সঠিকভাবে প্রদর্শন করা নিচের মতো একটি উপযুক্ত সময়ে অবস্থানের অবস্থা সেট করার মতোই সহজ। অবস্থানের অবস্থা হল মিডিয়া প্লেব্যাক রেট, সময়কাল এবং বর্তমান সময়ের সংমিশ্রণ।

সময়কাল প্রদান করা আবশ্যক এবং ইতিবাচক. অবস্থান অবশ্যই ইতিবাচক এবং সময়কালের চেয়ে কম হতে হবে। প্লেব্যাকের হার অবশ্যই 0-এর বেশি হতে হবে।

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// When video starts playing, update duration.
await video.play();
updatePositionState();

// When user wants to seek backward, update position.
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek forward, update position.
navigator.mediaSession.setActionHandler('seekforward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek to a specific time, update position.
navigator.mediaSession.setActionHandler('seekto', (details) => {
  /* ... */
  updatePositionState();
});

// When video playback rate changes, update position state.
video.addEventListener('ratechange', (event) => {
  updatePositionState();
});

পজিশন স্টেট রিসেট করা null এ সেট করার মতোই সহজ।

// Reset position state when media is reset.
navigator.mediaSession.setPositionState(null);

ভিডিও কনফারেন্সিং অ্যাকশন

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

মাইক্রোফোন টগল করুন

"togglemicrophone" অ্যাকশনটি নির্দেশ করে যে ব্যবহারকারী মাইক্রোফোনটি নিঃশব্দ বা আনমিউট করতে চান৷ setMicrophoneActive(isActive) পদ্ধতি ব্রাউজারকে বলে যে ওয়েবসাইটটি বর্তমানে মাইক্রোফোনটিকে সক্রিয় বলে মনে করে কিনা।

let isMicrophoneActive = false;

navigator.mediaSession.setActionHandler('togglemicrophone', () => {
  if (isMicrophoneActive) {
    // Mute the microphone.
  } else {
    // Unmute the microphone.
  }
  isMicrophoneActive = !isMicrophoneActive;
  navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
});

ক্যামেরা টগল করুন

"togglecamera" অ্যাকশনটি নির্দেশ করে যে ব্যবহারকারী সক্রিয় ক্যামেরা চালু বা বন্ধ করতে চান। setCameraActive(isActive) পদ্ধতি নির্দেশ করে যে ব্রাউজার ওয়েবসাইটটিকে সক্রিয় বলে মনে করে কিনা।

let isCameraActive = false;

navigator.mediaSession.setActionHandler('togglecamera', () => {
  if (isCameraActive) {
    // Disable the camera.
  } else {
    // Enable the camera.
  }
  isCameraActive = !isCameraActive;
  navigator.mediaSession.setCameraActive(isCameraActive);
});

হ্যাং আপ

"hangup" ক্রিয়াটি নির্দেশ করে যে ব্যবহারকারী একটি কল শেষ করতে চায়৷

navigator.mediaSession.setActionHandler('hangup', () => {
  // End the call.
});

স্লাইড অ্যাকশন উপস্থাপন করা হচ্ছে

যখন ব্যবহারকারী তাদের স্লাইড উপস্থাপনা একটি পিকচার-ইন-পিকচার উইন্ডোতে রাখে, তখন ব্রাউজার স্লাইডের মাধ্যমে নেভিগেট করার জন্য নিয়ন্ত্রণ প্রদর্শন করতে পারে। ব্যবহারকারী যখন সেগুলিতে ক্লিক করেন, ওয়েবসাইটটি মিডিয়া সেশন API এর মাধ্যমে সেগুলি পরিচালনা করে। উদাহরণের জন্য, প্রেজেন্টিং স্লাইডের নমুনা দেখুন।

পূর্ববর্তী স্লাইড

"previousslide" ক্রিয়াটি নির্দেশ করে যে ব্যবহারকারী স্লাইডগুলি উপস্থাপন করার সময় পূর্ববর্তী স্লাইডে ফিরে যেতে চায়৷

navigator.mediaSession.setActionHandler('previousslide', () => {
  // Show previous slide.
});

পরবর্তী স্লাইড

"nextslide" অ্যাকশনটি নির্দেশ করে যে স্লাইডগুলি উপস্থাপন করার সময় ব্যবহারকারী পরবর্তী স্লাইডে যেতে চায়।

navigator.mediaSession.setActionHandler('nextslide', () => {
  // Show next slide.
});

নমুনা

ব্লেন্ডার ফাউন্ডেশন এবং জ্যান মরজেনস্টারের কাজ সমন্বিত কিছু মিডিয়া সেশনের নমুনা দেখুন।

সম্পদ

• মিডিয়া সেশন স্পেসিক: wicg.github.io/mediasession
• বিশেষ সমস্যা: github.com/WICG/mediasession/issues
• ক্রোম বাগ: crbug.com