আপনি কীভাবে ওয়েবে সেরা মোবাইল মিডিয়া অভিজ্ঞতা তৈরি করবেন? সহজ! এটি সম্পূর্ণভাবে ব্যবহারকারীর এনগেজমেন্ট এবং ওয়েব পৃষ্ঠায় মিডিয়াকে আপনি কতটা গুরুত্ব দিচ্ছেন তার উপর নির্ভর করে। আমি মনে করি আমরা সবাই একমত যে ভিডিও যদি ব্যবহারকারীর ভিজিটের একমাত্র কারণ হয়, তাহলে ব্যবহারকারীর অভিজ্ঞতাকে ইমারসিভ এবং রি-এনগেজিং হতে হবে।
এই নিবন্ধে আমি আপনাকে দেখাব যে কীভাবে আপনার মিডিয়া অভিজ্ঞতাকে প্রগতিশীল উপায়ে উন্নত করা যায় এবং প্রচুর ওয়েব API-এর জন্য এটিকে আরও নিমজ্জিত করা যায়। সেই জন্যই আমরা কাস্টম কন্ট্রোল, ফুল-স্ক্রিন ও ব্যাকগ্রাউন্ড প্লেব্যাক সহ একটি সহজ মোবাইল প্লেয়ার অভিজ্ঞতা তৈরি করতে চলেছি। আপনি এখন স্যাম্পেল ব্যবহার করে দেখতে পারেন এবং আমাদের GitHub রিপোজিটরিতে কোড খুঁজে পেতে পারেন।
কাস্টম কন্ট্রোল
আপনি দেখতেই পাচ্ছেন, আমাদের মিডিয়া প্লেয়ারের জন্য যে HTML লেআউট ব্যবহার করতে চলেছি, তা
খুবই সহজ: একটি <div> রুট এলিমেন্টে একটি <video> মিডিয়া এলিমেন্ট এবং ভিডিও কন্ট্রোলের জন্য
একটি <div> চাইল্ড এলিমেন্ট থাকে।
ভিডিও কন্ট্রোল সম্পর্কে আমরা পরে আলোচনা করব, যার মধ্যে রয়েছে: প্লে/পজ বোতাম, ফুল-স্ক্রিন বোতাম, ব্যাকওয়ার্ড ও ফরওয়ার্ডে যাওয়ার বোতাম এবং বর্তমান সময়, সময়সীমা ও সময় ট্র্যাক করার জন্য কিছু এলিমেন্ট।
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls"></div>
</div>
ভিডিও মেটাডেটা পড়া
প্রথমে, ভিডিওর সময়সীমা, বর্তমান সময় সেট করতে এবং প্রগ্রেস বার শুরু করতে ভিডিও মেটাডেটা লোড হওয়ার জন্য অপেক্ষা করা যাক। মনে রাখবেন যে
secondsToTimeCode() ফাংশন হল একটি কাস্টম ইউটিলিটি ফাংশন যা আমি লিখেছি এবং যা
সেকেন্ডের সংখ্যাকে "hh:mm:ss" ফর্ম্যাটে একটি স্ট্রিংয়ে রূপান্তর করে যা আমাদের ক্ষেত্রে
আরও উপযুক্ত।
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</strong>
</div>
</div>
video.addEventListener('loadedmetadata', function () {
videoDuration.textContent = secondsToTimeCode(video.duration);
videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
videoProgressBar.style.transform = `scaleX(${
video.currentTime / video.duration
})`;
});
ভিডিও চালান/পজ করুন
ভিডিও মেটাডেটা লোড হয়ে গেছে, এবার প্রথম বোতাম যোগ করা যাক, যার সাহায্যে ব্যবহারকারী
video.play() ও video.pause() ব্যবহার করে ভিডিও প্লে ও পজ করতে পারবেন, এটি নির্ভর করবে
প্লেব্যাক অবস্থার উপর।
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<strong><button id="playPauseButton"></button></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
playPauseButton.addEventListener('click', function (event) {
event.stopPropagation();
if (video.paused) {
video.play();
} else {
video.pause();
}
});
click ইভেন্ট লিসনারে আমাদের ভিডিও কন্ট্রোল অ্যাডজাস্ট করার পরিবর্তে, আমরা
play এবং pause ভিডিও ইভেন্ট ব্যবহার করি। আমাদের কন্ট্রোল ইভেন্ট-ভিত্তিক করার ফলে
ফ্লেক্সিবিলিটি (যেমন আমরা পরে Media Session API-এর ক্ষেত্রে দেখব) এবং ব্রাউজার প্লেব্যাকে হস্তক্ষেপ করলে
আমাদের কন্ট্রোল সিঙ্ক করে রাখতে সাহায্য করে।
ভিডিও চলা শুরু হলে, আমরা বোতামের স্ট্যাটাস পরিবর্তন করে "পজ" করে দিই এবং ভিডিও কন্ট্রোল লুকিয়ে দিই। ভিডিও পজ করা হলে, আমরা
বোতামের স্ট্যাটাস পরিবর্তন করে "চালান" হিসেবে সেট করি এবং ভিডিও কন্ট্রোল দেখাই।
video.addEventListener('play', function () {
playPauseButton.classList.add('playing');
});
video.addEventListener('pause', function () {
playPauseButton.classList.remove('playing');
});
timeupdate ভিডিও ইভেন্টের মাধ্যমে ভিডিও currentTime অ্যাট্রিবিউট দ্বারা নির্দেশিত সময় পরিবর্তন করা হলে, আমাদের কাস্টম কন্ট্রোল দৃশ্যমান থাকলে আমরা সেটিও আপডেট করি।
video.addEventListener('timeupdate', function () {
if (videoControls.classList.contains('visible')) {
videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
videoProgressBar.style.transform = `scaleX(${
video.currentTime / video.duration
})`;
}
});
ভিডিও শেষ হয়ে গেলে, আমরা বোতামের স্ট্যাটাস পরিবর্তন করে "চালান" করে দিই, ভিডিও
currentTime আবার 0-তে সেট করি এবং এখনকার জন্য ভিডিও কন্ট্রোল দেখাই। মনে রাখবেন, ব্যবহারকারী কোনও ধরনের "অটোপ্লে" ফিচার চালু করে থাকলে, আমরাও অটোমেটিক অন্য ভিডিও লোড করার বিকল্প বেছে নিতে পারি।
video.addEventListener('ended', function () {
playPauseButton.classList.remove('playing');
video.currentTime = 0;
});
পিছনে ও সামনে যান
আসুন, "পিছনে যান" এবং "সামনে যান" বোতাম যোগ করি যাতে ব্যবহারকারী সহজেই কিছু কন্টেন্ট এড়িয়ে যেতে পারেন।
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<button id="playPauseButton"></button>
<strong
><button id="seekForwardButton"></button>
<button id="seekBackwardButton"></button
></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
var skipTime = 10; // Time to skip in seconds
seekForwardButton.addEventListener('click', function (event) {
event.stopPropagation();
video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
});
seekBackwardButton.addEventListener('click', function (event) {
event.stopPropagation();
video.currentTime = Math.max(video.currentTime - skipTime, 0);
});
আগের মতোই, এইসব বোতামের click ইভেন্ট লিসেনারে ভিডিও স্টাইলিং অ্যাডজাস্ট করার পরিবর্তে, ভিডিওর উজ্জ্বলতা অ্যাডজাস্ট করতে আমরা ফায়ার করা seeking এবং seeked ভিডিও ইভেন্ট
ব্যবহার করব। আমার কাস্টম seeking CSS ক্লাস filter: brightness(0);-এর মতোই সহজ।
video.addEventListener('seeking', function () {
video.classList.add('seeking');
});
video.addEventListener('seeked', function () {
video.classList.remove('seeking');
});
আমরা এখনও পর্যন্ত যা তৈরি করেছি তা নিচে দেওয়া হল। পরবর্তী বিভাগে, আমরা ফুল-স্ক্রিন বোতাম প্রয়োগ করব।
ফুল-স্ক্রিন
এখানে আমরা নিখুঁত এবং নির্বিঘ্ন ফুল-স্ক্রিন অভিজ্ঞতা তৈরি করতে বেশ কয়েকটি ওয়েব API-এর সুবিধা নিতে যাচ্ছি। এটি কীভাবে কাজ করে তা দেখতে, স্যাম্পেল চেক করে দেখুন।
অবশ্যই, আপনাকে এগুলির সবকটি ব্যবহার করতে হবে না। আপনার কাছে অর্থপূর্ণ মনে হয় এমন বিকল্প বেছে নিন এবং আপনার কাস্টম ফ্লো তৈরি করতে সেগুলি একত্রিত করুন।
অটোমেটিক ফুল-স্ক্রিন বন্ধ করুন
iOS-এ, মিডিয়া প্লেব্যাক শুরু হলে video এলিমেন্ট অটোমেটিক ফুল-স্ক্রিন মোডে
প্রবেশ করে। যেহেতু আমরা মোবাইল ব্রাউজার জুড়ে আমাদের মিডিয়া অভিজ্ঞতা যতটা সম্ভব কাস্টমাইজ এবং নিয়ন্ত্রণ করার চেষ্টা করছি, তাই আমি আপনাকে video এলিমেন্টের playsinline অ্যাট্রিবিউট সেট করার সাজেশন দিচ্ছি যাতে এটি iPhone-এ ইনলাইন চালাতে বাধ্য হয় এবং প্লেব্যাক শুরু হলে ফুলস্ক্রিন মোডে প্রবেশ না করে। মনে রাখবেন যে, অন্যান্য ব্রাউজারে
এর কোনও সাইড এফেক্ট নেই।
<div id="videoContainer"></div>
<video id="video" src="file.mp4"></video><strong>playsinline</strong></video>
<div id="videoControls">...</div>
</div>
বোতামে ক্লিক করে ফুলস্ক্রিন টগল করুন
এখন আমরা অটোমেটিক ফুল-স্ক্রিন মোড বন্ধ করে দিয়েছি, তাই ফুল-স্ক্রিন API-এর সাহায্যে
ভিডিওর জন্য ফুল-স্ক্রিন মোড আমাদের নিজেদেরই ম্যানেজ করতে হবে। ব্যবহারকারী
"ফুল-স্ক্রিন বোতামে" ক্লিক করলে, document.exitFullscreen()-এর মাধ্যমে ফুল-স্ক্রিন মোড থেকে বেরিয়ে আসুন, যদি বর্তমানে
ডকুমেন্ট ফুল-স্ক্রিন মোডে থাকে। অন্যথায়, ভিডিও কন্টেনারে ফুলস্ক্রিনের অনুরোধ করুন
requestFullscreen() পদ্ধতি ব্যবহার করে, যদি উপলভ্য থাকে অথবা iOS-এ শুধুমাত্র ভিডিও এলিমেন্টে webkitEnterFullscreen()-এ ফলব্যাক করুন।
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<button id="playPauseButton"></button>
<button id="seekForwardButton"></button>
<button id="seekBackwardButton"></button>
<strong><button id="fullscreenButton"></button></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
fullscreenButton.addEventListener('click', function (event) {
event.stopPropagation();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
requestFullscreenVideo();
}
});
function requestFullscreenVideo() {
if (videoContainer.requestFullscreen) {
videoContainer.requestFullscreen();
} else {
video.webkitEnterFullscreen();
}
}
document.addEventListener('fullscreenchange', function () {
fullscreenButton.classList.toggle('active', document.fullscreenElement);
});
স্ক্রিন ওরিয়েন্টেশন পরিবর্তন করার সময় ফুলস্ক্রিন টগল করুন
ব্যবহারকারী ডিভাইস ল্যান্ডস্কেপ মোডে ঘোরালে, আসুন এই বিষয়ে স্মার্ট হই এবং ইমারসিভ অভিজ্ঞতা তৈরি করতে অটোমেটিক ফুলস্ক্রিনের অনুরোধ করি। এর জন্য, আমাদের স্ক্রিন ওরিয়েন্টেশন API প্রয়োজন হবে যা এখনও সব জায়গায় কাজ করে না এবং সেই সময় কিছু ব্রাউজারে এখনও প্রিফিক্স করা আছে। সুতরাং, এটি হবে আমাদের প্রথম প্রোগ্রেসিভ এনহ্যান্সমেন্ট।
এটি কীভাবে কাজ করে? স্ক্রিন ওরিয়েন্টেশন পরিবর্তন শনাক্ত করার সাথে সাথেই, ব্রাউজার উইন্ডো ল্যান্ডস্কেপ মোডে থাকলে (অর্থাৎ, এর প্রস্থ উচ্চতার চেয়ে বেশি হলে) ফুলস্ক্রিনের জন্য অনুরোধ করা যাক। যদি না থাকেন, তাহলে ফুল-স্ক্রিন থেকে বেরিয়ে আসুন। আর কিছু নেই।
if ('orientation' in screen) {
screen.orientation.addEventListener('change', function () {
// Let's request fullscreen if user switches device in landscape mode.
if (screen.orientation.type.startsWith('landscape')) {
requestFullscreenVideo();
} else if (document.fullscreenElement) {
document.exitFullscreen();
}
});
}
বোতামে ক্লিক করে ল্যান্ডস্কেপ মোডে স্ক্রিন লক করুন
যেহেতু ভিডিও ল্যান্ডস্কেপ মোডে আরও ভালোভাবে দেখা যেতে পারে, তাই ব্যবহারকারী "ফুলস্ক্রিন বোতামে" ক্লিক করলে আমরা স্ক্রিন ল্যান্ডস্কেপ মোডে লক করতে চাইতে পারি। এই অভিজ্ঞতা যাতে সবচেয়ে ভালো হয় তা নিশ্চিত করতে, আমরা আগে ব্যবহার করা স্ক্রিন ওরিয়েন্টেশন API এবং কিছু মিডিয়া কোয়েরি একত্রিত করতে চলেছি।
ল্যান্ডস্কেপ মোডে স্ক্রিন লক করা,
screen.orientation.lock('landscape')-কে কল করার মতোই সহজ। তবে, ডিভাইসটি matchMedia('(orientation: portrait)')-এর সাথে পোর্ট্রেট মোডে থাকলে এবং
matchMedia('(max-device-width: 768px)')-এর সাথে এক হাতে ধরে রাখা গেলে
তবেই আমাদের এটি করা উচিত, কারণ
এটি ট্যাবলেটে ব্যবহারকারীদের জন্য একটি দুর্দান্ত অভিজ্ঞতা হবে না।
fullscreenButton.addEventListener('click', function (event) {
event.stopPropagation();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
requestFullscreenVideo();
<strong>lockScreenInLandscape();</strong>;
}
});
function lockScreenInLandscape() {
if (!('orientation' in screen)) {
return;
}
// Let's force landscape mode only if device is in portrait mode and can be held in one hand.
if (
matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches
) {
screen.orientation.lock('landscape');
}
}
ডিভাইসের ওরিয়েন্টেশন পরিবর্তন হলে স্ক্রিন আনলক করুন
আপনি হয়ত লক্ষ্য করেছেন যে আমরা এইমাত্র যে লক স্ক্রিন অভিজ্ঞতা তৈরি করেছি তা নিখুঁত নয়, কারণ স্ক্রিন লক থাকা অবস্থায় আমরা স্ক্রিন ওরিয়েন্টেশন পরিবর্তন সংক্রান্ত তথ্য পাই না।
এটি ঠিক করতে, উপলভ্য থাকলে ডিভাইস ওরিয়েন্টেশন API ব্যবহার করা যাক। এই API, হার্ডওয়্যার থেকে তথ্য প্রদান করে যা কোনও ডিভাইসের অবস্থান ও স্পেসে
গতি পরিমাপ করে: এর ওরিয়েন্টেশনের জন্য জাইরোস্কোপ ও ডিজিটাল কম্পাস এবং
এর গতির জন্য অ্যাকসিলরোমিটার। আমরা যখন ডিভাইসের ওরিয়েন্টেশনে পরিবর্তন শনাক্ত করি,
তখন ব্যবহারকারী ডিভাইসটি পোর্ট্রেট মোডে ধরে রাখলে এবং স্ক্রিন ল্যান্ডস্কেপ মোডে লক করা থাকলে,
screen.orientation.unlock()-এর মাধ্যমে স্ক্রিন আনলক করা যাক।
function lockScreenInLandscape() {
if (!('orientation' in screen)) {
return;
}
// Let's force landscape mode only if device is in portrait mode and can be held in one hand.
if (matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches) {
screen.orientation.lock('landscape')
<strong>.then(function() {
listenToDeviceOrientationChanges();
})</strong>;
}
}
function listenToDeviceOrientationChanges() {
if (!('DeviceOrientationEvent' in window)) {
return;
}
var previousDeviceOrientation, currentDeviceOrientation;
window.addEventListener(
'deviceorientation',
function onDeviceOrientationChange(event) {
// event.beta represents a front to back motion of the device and
// event.gamma a left to right motion.
if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
previousDeviceOrientation = currentDeviceOrientation;
currentDeviceOrientation = 'landscape';
return;
}
if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
previousDeviceOrientation = currentDeviceOrientation;
// When device is rotated back to portrait, let's unlock screen orientation.
if (previousDeviceOrientation == 'landscape') {
screen.orientation.unlock();
window.removeEventListener(
'deviceorientation',
onDeviceOrientationChange,
);
}
}
},
);
}
আপনি দেখতেই পাচ্ছেন, আমরা এই ধরনের নির্বিঘ্ন ফুল-স্ক্রিন অভিজ্ঞতাই চাইছিলাম। এটি কীভাবে কাজ করে তা দেখতে, স্যাম্পেল চেক করুন।
ব্যাকগ্রাউন্ড প্লেব্যাক
আপনি যখন কোনও ওয়েব পেজ বা ওয়েব পেজে কোনও ভিডিও আর দেখতে পাচ্ছেন না বলে শনাক্ত করেন, তখন আপনি এটি দেখানোর জন্য আপনার অ্যানালিটিক্স আপডেট করতে চাইতে পারেন। এটি বর্তমান প্লেব্যাককেও প্রভাবিত করতে পারে, যেমন অন্য ট্র্যাক বেছে নেওয়া, এটি পজ করা বা এমনকি ব্যবহারকারীকে কাস্টম বোতাম দেখানো।
পৃষ্ঠার দৃশ্যমানতা পরিবর্তন হলে ভিডিও পজ করুন
Page Visibility API-এর মাধ্যমে আমরা কোনও পৃষ্ঠার বর্তমান দৃশ্যমানতা নির্ধারণ করতে পারি এবং দৃশ্যমানতা পরিবর্তন হলে বিজ্ঞপ্তি পেতে পারি। পৃষ্ঠা লুকানো থাকলে নিচের কোড ভিডিও পজ করে। স্ক্রিন লক অ্যাক্টিভ থাকলে অথবা আপনি ট্যাব পরিবর্তন করলে এটি হয়।
যেহেতু বেশিরভাগ মোবাইল ব্রাউজার এখন ব্রাউজারের বাইরে কন্ট্রোল অফার করে যা পজ করা ভিডিও আবার চালু করার অনুমতি দেয়, তাই আমি আপনাকে এই আচরণটি সেট করার পরামর্শ দিই শুধুমাত্র যদি ব্যবহারকারীকে ব্যাকগ্রাউন্ডে চালানোর অনুমতি দেওয়া হয়।
document.addEventListener('visibilitychange', function () {
// Pause video when page is hidden.
if (document.hidden) {
video.pause();
}
});
ভিডিওর দৃশ্যমানতা পরিবর্তন করার সময় মিউট বোতাম দেখান/লুকান
আপনি নতুন Intersection Observer API ব্যবহার করলে, কোনও খরচ ছাড়াই আরও গ্র্যানুলার হতে পারবেন। এই API আপনাকে জানায় যে কখন কোনও পর্যবেক্ষণ করা এলিমেন্ট ব্রাউজারের ভিউপোর্টে প্রবেশ করে বা সেখান থেকে বেরিয়ে যায়।
পৃষ্ঠায় ভিডিওর দৃশ্যমানতার উপর ভিত্তি করে মিউট বোতাম দেখানো/লুকানো যাক। ভিডিও
চলছে কিন্তু বর্তমানে দেখা যাচ্ছে না, এমন হলে পৃষ্ঠার নিচে ডানদিকের কোণে একটি ছোট মিউট বোতাম
দেখানো হবে যাতে ব্যবহারকারী ভিডিওর সাউন্ড কন্ট্রোল করতে পারেন। মিউট বোতামের স্টাইলিং আপডেট করতে
volumechange ভিডিও ইভেন্ট ব্যবহার করা হয়।
<button id="muteButton"></button>
if ('IntersectionObserver' in window) {
// Show/hide mute button based on video visibility in the page.
function onIntersection(entries) {
entries.forEach(function (entry) {
muteButton.hidden = video.paused || entry.isIntersecting;
});
}
var observer = new IntersectionObserver(onIntersection);
observer.observe(video);
}
muteButton.addEventListener('click', function () {
// Mute/unmute video on button click.
video.muted = !video.muted;
});
video.addEventListener('volumechange', function () {
muteButton.classList.toggle('active', video.muted);
});
একবারে শুধু একটি ভিডিও চালান
কোনও পৃষ্ঠায় একাধিক ভিডিও থাকলে, আমি আপনাকে একটি ভিডিও চালাতে এবং অন্যগুলি অটোমেটিক পজ করতে সাজেস্ট করব, যাতে ব্যবহারকারীকে একসাথে একাধিক অডিও ট্র্যাক শুনতে না হয়।
// This array should be initialized once all videos have been added.
var videos = Array.from(document.querySelectorAll('video'));
videos.forEach(function (video) {
video.addEventListener('play', pauseOtherVideosPlaying);
});
function pauseOtherVideosPlaying(event) {
var videosToPause = videos.filter(function (video) {
return !video.paused && video != event.target;
});
// Pause all other videos currently playing.
videosToPause.forEach(function (video) {
video.pause();
});
}
মিডিয়া বিজ্ঞপ্তি কাস্টমাইজ করুন
Media Session API-এর মাধ্যমে, বর্তমানে চলছে এমন ভিডিওর মেটাডেটা প্রদান করে আপনি মিডিয়া বিজ্ঞপ্তি কাস্টমাইজ করতে পারবেন। এছাড়াও, এটি আপনাকে বিজ্ঞপ্তি বা মিডিয়া কী থেকে আসা মিডিয়া সম্পর্কিত ইভেন্ট যেমন, সিকিং বা ট্র্যাক পরিবর্তন ম্যানেজ করার অনুমতি দেয়। এটি কীভাবে কাজ করে তা দেখতে, স্যাম্পেল চেক করে দেখুন।
আপনার ওয়েব অ্যাপ অডিও বা ভিডিও চালানোর সময়, আপনি বিজ্ঞপ্তি ট্রেতে মিডিয়া বিজ্ঞপ্তি দেখতে পাবেন। Android-এ, Chrome ডকুমেন্টের শীর্ষক এবং সবচেয়ে বড় আইকন ইমেজ ব্যবহার করে উপযুক্ত তথ্য দেখানোর সর্বোচ্চ চেষ্টা করে।
আসুন দেখে নেওয়া যাক, Media Session API-এর মাধ্যমে টাইটেল, আর্টিস্ট, অ্যালবামের নাম ও আর্টওয়ার্কের মতো কিছু মিডিয়া সেশন মেটাডেটা সেট করে কীভাবে এই মিডিয়া বিজ্ঞপ্তি কাস্টমাইজ করা যায়।
playPauseButton.addEventListener('click', function(event) {
event.stopPropagation();
if (video.paused) {
video.play()
<strong>.then(function() {
setMediaSession();
});</strong>
} else {
video.pause();
}
});
function setMediaSession() {
if (!('mediaSession' in navigator)) {
return;
}
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png'},
{
src: 'https://dummyimage.com/128x128',
sizes: '128x128',
type: 'image/png',
},
{
src: 'https://dummyimage.com/192x192',
sizes: '192x192',
type: 'image/png',
},
{
src: 'https://dummyimage.com/256x256',
sizes: '256x256',
type: 'image/png',
},
{
src: 'https://dummyimage.com/384x384',
sizes: '384x384',
type: 'image/png',
},
{
src: 'https://dummyimage.com/512x512',
sizes: '512x512',
type: 'image/png',
},
],
});
}
প্লেব্যাক হয়ে গেলে, আপনাকে মিডিয়া সেশন "রিলিজ" করতে হবে না, কারণ বিজ্ঞপ্তি অটোমেটিক
উধাও হয়ে যাবে। মনে রাখবেন যে কোনও প্লেব্যাক শুরু হলে বর্তমান
navigator.mediaSession.metadata ব্যবহার করা হবে। এই
কারণে আপনাকে এটি আপডেট করতে হবে যাতে আপনি সবসময় মিডিয়া বিজ্ঞপ্তিতে প্রাসঙ্গিক
তথ্য দেখাতে পারেন।
আপনার ওয়েব অ্যাপে প্লেলিস্ট থাকলে, আপনি হয়ত ব্যবহারকারীকে "আগের ট্র্যাক" এবং "পরের ট্র্যাক" আইকন ব্যবহার করে মিডিয়া বিজ্ঞপ্তি থেকে সরাসরি প্লেলিস্ট নেভিগেট করার অনুমতি দিতে চাইবেন।
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('previoustrack', function () {
// User clicked "Previous Track" media notification icon.
playPreviousVideo(); // load and play previous video
});
navigator.mediaSession.setActionHandler('nexttrack', function () {
// User clicked "Next Track" media notification icon.
playNextVideo(); // load and play next video
});
}
মনে রাখবেন, মিডিয়া অ্যাকশন হ্যান্ডলার থেকে যাবে। এটি ইভেন্ট লিসেনার প্যাটার্নের মতোই, তবে ইভেন্ট হ্যান্ডেল করার অর্থ হল ব্রাউজার কোনও ডিফল্ট অ্যাকশন বন্ধ করে দেয় এবং এটিকে সিগন্যাল হিসেবে ব্যবহার করে যে আপনার ওয়েব অ্যাপ মিডিয়া অ্যাকশন সাপোর্ট করে। তাই, আপনি সঠিক অ্যাকশন হ্যান্ডলার সেট না করা পর্যন্ত মিডিয়া অ্যাকশন কন্ট্রোল দেখানো হবে না।
যাইহোক, মিডিয়া অ্যাকশন হ্যান্ডলার আনসেট করা null-এ অ্যাসাইন করার মতোই সহজ।
আপনি যদি স্কিপ করা সময়ের পরিমাণ নিয়ন্ত্রণ করতে চান, তাহলে Media Session API আপনাকে "পিছনে যান" এবং "সামনে যান" মিডিয়া বিজ্ঞপ্তি আইকন দেখানোর অনুমতি দেয়।
if ('mediaSession' in navigator) {
let skipTime = 10; // Time to skip in seconds
navigator.mediaSession.setActionHandler('seekbackward', function () {
// User clicked "Seek Backward" media notification icon.
video.currentTime = Math.max(video.currentTime - skipTime, 0);
});
navigator.mediaSession.setActionHandler('seekforward', function () {
// User clicked "Seek Forward" media notification icon.
video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
});
}
"চালান/পজ করুন" আইকন সবসময় মিডিয়া বিজ্ঞপ্তিতে দেখানো হয় এবং সম্পর্কিত ইভেন্ট ব্রাউজার অটোমেটিক ম্যানেজ করে। কোনও কারণে ডিফল্ট অ্যাকশন কাজ না করলে, আপনি এখনও "চালান" এবং "পজ করুন" মিডিয়া ইভেন্ট ম্যানেজ করতে পারবেন।
মিডিয়া সেশন API-এর সবচেয়ে ভালো দিক হল, মিডিয়া মেটাডেটা ও কন্ট্রোল শুধু বিজ্ঞপ্তি ট্রেতেই দেখা যায় না। মিডিয়া বিজ্ঞপ্তি পেয়ার করা যেকোনও পরিধানযোগ্য ডিভাইসে অটোমেটিক সিঙ্ক হয়ে যায়। এছাড়াও এটি লক স্ক্রিনে দেখা যায়।