আপনি কিভাবে ওয়েবে সেরা মোবাইল মিডিয়া অভিজ্ঞতা তৈরি করবেন? সহজ ! এটি সমস্ত ব্যবহারকারীর ব্যস্ততার উপর নির্ভর করে এবং আপনি একটি ওয়েব পৃষ্ঠায় মিডিয়াকে যে গুরুত্ব দেন তার উপর। আমি মনে করি আমরা সবাই একমত যে ভিডিওটি যদি একজন ব্যবহারকারীর ভিজিটের কারণ হয়, তাহলে ব্যবহারকারীর অভিজ্ঞতা নিমজ্জিত এবং পুনরায় আকর্ষক হতে হবে।
এই নিবন্ধে আমি আপনাকে দেখাব কিভাবে আপনার মিডিয়া অভিজ্ঞতাকে প্রগতিশীল উপায়ে উন্নত করা যায় এবং ওয়েব 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 । আমাদের নিয়ন্ত্রণ ইভেন্ট ভিত্তিক করা নমনীয়তার সাথে সাহায্য করে (যেমন আমরা মিডিয়া সেশন 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 filter: brightness(0); .
video.addEventListener('seeking', function () {
video.classList.add('seeking');
});
video.addEventListener('seeked', function () {
video.classList.remove('seeking');
});
আমরা এখন পর্যন্ত যা তৈরি করেছি তা নিচে দেওয়া হল। পরবর্তী বিভাগে, আমরা পূর্ণস্ক্রীন বোতামটি বাস্তবায়ন করব।
পূর্ণ পর্দা
এখানে আমরা একটি নিখুঁত এবং নির্বিঘ্ন পূর্ণস্ক্রীন অভিজ্ঞতা তৈরি করতে বেশ কয়েকটি ওয়েব API-এর সুবিধা নিতে যাচ্ছি। এটি কর্মে দেখতে, নমুনাটি দেখুন।
স্পষ্টতই, আপনাকে তাদের সবগুলি ব্যবহার করতে হবে না। শুধুমাত্র আপনার কাছে বোধগম্য হয় এমনগুলি বেছে নিন এবং আপনার কাস্টম প্রবাহ তৈরি করতে সেগুলিকে একত্রিত করুন৷
স্বয়ংক্রিয় পূর্ণস্ক্রীন প্রতিরোধ করুন
iOS-এ, মিডিয়া প্লেব্যাক শুরু হলে video উপাদানগুলি স্বয়ংক্রিয়ভাবে ফুলস্ক্রিন মোডে প্রবেশ করে। যেহেতু আমরা মোবাইল ব্রাউজার জুড়ে আমাদের মিডিয়া অভিজ্ঞতা যতটা সম্ভব মানানসই এবং নিয়ন্ত্রণ করার চেষ্টা করছি, তাই আমি আপনাকে video উপাদানটির playsinline বৈশিষ্ট্য সেট করার পরামর্শ দিচ্ছি যাতে এটি আইফোনে ইনলাইনে প্লে করতে বাধ্য হয় এবং প্লেব্যাক শুরু হওয়ার সময় পূর্ণস্ক্রীন মোডে প্রবেশ না করে। উল্লেখ্য, অন্যান্য ব্রাউজারে এর কোনো পার্শ্বপ্রতিক্রিয়া নেই।
<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);
});
স্ক্রীন অভিযোজন পরিবর্তনে ফুলস্ক্রিন টগল করুন
যেহেতু ব্যবহারকারী ল্যান্ডস্কেপ মোডে ডিভাইস ঘোরান, আসুন এটি সম্পর্কে স্মার্ট হন এবং একটি নিমগ্ন অভিজ্ঞতা তৈরি করতে স্বয়ংক্রিয়ভাবে পূর্ণস্ক্রীনের অনুরোধ করি৷ এর জন্য, আমাদের স্ক্রিন ওরিয়েন্টেশন এপিআই দরকার যা এখনও সব জায়গায় সমর্থিত নয় এবং সেই সময়ে কিছু ব্রাউজারে এখনও প্রিফিক্স করা আছে। এইভাবে, এটি হবে আমাদের প্রথম প্রগতিশীল বর্ধন।
কিভাবে কাজ করে? যত তাড়াতাড়ি আমরা স্ক্রিনের অভিযোজন পরিবর্তনগুলি শনাক্ত করি, আসুন ব্রাউজার উইন্ডোটি ল্যান্ডস্কেপ মোডে থাকলে পূর্ণস্ক্রীনের অনুরোধ করুন (অর্থাৎ, এর প্রস্থ তার উচ্চতার চেয়ে বেশি)। যদি না হয়, আসুন পূর্ণস্ক্রীন থেকে প্রস্থান করি। এখানেই শেষ.
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();
}
});
}
বোতাম ক্লিকে ল্যান্ডস্কেপে স্ক্রিন লক করুন
যেহেতু ভিডিও ল্যান্ডস্কেপ মোডে আরও ভালভাবে দেখা যেতে পারে, তাই ব্যবহারকারী যখন "ফুলস্ক্রিন বোতাম" ক্লিক করেন তখন আমরা ল্যান্ডস্কেপে স্ক্রীন লক করতে চাই। এই অভিজ্ঞতাটি সর্বোত্তম তা নিশ্চিত করতে আমরা পূর্বে ব্যবহৃত স্ক্রীন ওরিয়েন্টেশন এপিআই এবং কিছু মিডিয়া ক্যোয়ারী একত্রিত করতে যাচ্ছি।
ল্যান্ডস্কেপে স্ক্রিন লক করা যতটা সহজ, ততই সহজ কলিং 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,
);
}
}
},
);
}
আপনি দেখতে পাচ্ছেন, এটি হল সেই বিরামবিহীন পূর্ণস্ক্রীন অভিজ্ঞতা যা আমরা খুঁজছিলাম। এটি কর্মে দেখতে, নমুনাটি দেখুন।
পটভূমি প্লেব্যাক
যখন আপনি একটি ওয়েব পৃষ্ঠা শনাক্ত করেন বা ওয়েব পৃষ্ঠায় একটি ভিডিও আর দৃশ্যমান হয় না, আপনি এটি প্রতিফলিত করার জন্য আপনার বিশ্লেষণ আপডেট করতে চাইতে পারেন৷ এটি বর্তমান প্লেব্যাককেও প্রভাবিত করতে পারে যেমন একটি ভিন্ন ট্র্যাক বাছাই, এটিকে বিরতি দেওয়া, বা উদাহরণস্বরূপ ব্যবহারকারীকে কাস্টম বোতাম দেখান।
পৃষ্ঠার দৃশ্যমানতা পরিবর্তনে ভিডিও পজ করুন
পৃষ্ঠা দৃশ্যমানতা API এর মাধ্যমে, আমরা একটি পৃষ্ঠার বর্তমান দৃশ্যমানতা নির্ধারণ করতে পারি এবং দৃশ্যমানতার পরিবর্তন সম্পর্কে অবহিত হতে পারি। পৃষ্ঠাটি লুকানো থাকলে নিচের কোডটি ভিডিও পজ করে। এটি ঘটে যখন স্ক্রিন লক সক্রিয় থাকে বা আপনি যখন উদাহরণস্বরূপ ট্যাবগুলি পরিবর্তন করেন৷
যেহেতু বেশিরভাগ মোবাইল ব্রাউজার এখন ব্রাউজারের বাইরে নিয়ন্ত্রণ অফার করে যা একটি বিরতি দেওয়া ভিডিও পুনরায় শুরু করার অনুমতি দেয়, তাই আমি আপনাকে সুপারিশ করছি যদি ব্যবহারকারীকে ব্যাকগ্রাউন্ডে চালানোর অনুমতি দেওয়া হয় তবেই আপনি এই আচরণটি সেট করুন৷
document.addEventListener('visibilitychange', function () {
// Pause video when page is hidden.
if (document.hidden) {
video.pause();
}
});
ভিডিও দৃশ্যমানতা পরিবর্তনে নিঃশব্দ বোতাম দেখান/লুকান
আপনি যদি নতুন ইন্টারসেকশন অবজারভার 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();
});
}
মিডিয়া বিজ্ঞপ্তি কাস্টমাইজ করুন
মিডিয়া সেশন API এর সাথে, আপনি বর্তমানে প্লে করা ভিডিওর জন্য মেটাডেটা প্রদান করে মিডিয়া বিজ্ঞপ্তিগুলিও কাস্টমাইজ করতে পারেন৷ এটি আপনাকে মিডিয়া সম্পর্কিত ইভেন্টগুলি যেমন চাওয়া বা ট্র্যাক পরিবর্তন করার অনুমতি দেয় যা বিজ্ঞপ্তি বা মিডিয়া কী থেকে আসতে পারে। এটি কর্মে দেখতে, নমুনাটি দেখুন।
যখন আপনার ওয়েব অ্যাপ অডিও বা ভিডিও চালাচ্ছে, আপনি ইতিমধ্যেই বিজ্ঞপ্তি ট্রেতে বসে একটি মিডিয়া বিজ্ঞপ্তি দেখতে পাবেন। অ্যান্ড্রয়েডে, দস্তাবেজের শিরোনাম এবং এটি খুঁজে পেতে পারে এমন বৃহত্তম আইকন চিত্র ব্যবহার করে উপযুক্ত তথ্য দেখানোর জন্য Chrome তার যথাসাধ্য চেষ্টা করে৷
মিডিয়া সেশন 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 এ বরাদ্দ করার মতোই সহজ।
আপনি যদি এড়িয়ে যাওয়া সময়ের পরিমাণ নিয়ন্ত্রণ করতে চান তাহলে মিডিয়া সেশন 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 সম্পর্কে দুর্দান্ত জিনিস হল যে বিজ্ঞপ্তি ট্রেই একমাত্র জায়গা নয় যেখানে মিডিয়া মেটাডেটা এবং নিয়ন্ত্রণগুলি দৃশ্যমান। মিডিয়া বিজ্ঞপ্তি স্বয়ংক্রিয়ভাবে যেকোনো জোড়া পরিধানযোগ্য ডিভাইসে সিঙ্ক হয়। এবং এটি লক স্ক্রিনেও দেখায়।