এই নিবন্ধে, আমি Chrome 73 নতুন মিডিয়া বৈশিষ্ট্যগুলি নিয়ে আলোচনা করব যার মধ্যে রয়েছে:
- হার্ডওয়্যার মিডিয়া কীগুলি এখন ডেস্কটপে মিডিয়া প্লেব্যাক নিয়ন্ত্রণ করতে সমর্থিত।
- ওয়েব ডেভেলপাররা একটি নির্দিষ্ট HDCP নীতি প্রয়োগ করা যেতে পারে কিনা তা জিজ্ঞাসা করতে পারেন।
- ডেস্কটপ পিডব্লিউএ-তে অটো পিকচার-ইন-পিকচার এবং পিকচার-ইন-পিকচারে "স্কিপ অ্যাড" মূল ট্রায়ালে আসছে।
- ডেস্কটপ PWA গুলিকে সাউন্ড সহ অটোপ্লে দেওয়া হয়।
হার্ডওয়্যার মিডিয়া কী সমর্থন
অনেক কীবোর্ডে আজকাল বেসিক মিডিয়া প্লেব্যাক ফাংশন যেমন প্লে/পজ, আগের এবং পরবর্তী ট্র্যাক নিয়ন্ত্রণ করার জন্য কী আছে। হেডসেটগুলিও রয়েছে। এখন অবধি, ডেস্কটপ ব্যবহারকারীরা Chrome-এ অডিও এবং ভিডিও প্লেব্যাক নিয়ন্ত্রণ করতে এই মিডিয়া কীগুলি ব্যবহার করতে পারেনি। আজ এই পরিবর্তন!
ব্যবহারকারী যদি বিরতি কী টিপে, তাহলে Chrome-এ যে সক্রিয় মিডিয়া উপাদানটি চলছে সেটিকে বিরতি দেওয়া হবে এবং একটি "পজ করা" মিডিয়া ইভেন্ট পাবেন৷ প্লে কী টিপলে, পূর্বে পজ করা মিডিয়া উপাদান পুনরায় শুরু হবে এবং একটি "প্লে" মিডিয়া ইভেন্ট পাবে। ক্রোম অগ্রভাগে বা পটভূমিতে থাকুক না কেন এটি কাজ করে।
ChromeOS-এ, অডিও ফোকাস ব্যবহার করা অ্যান্ড্রয়েড অ্যাপ্লিকেশানগুলি এখন ক্রোম, ক্রোম অ্যাপস এবং অ্যান্ড্রয়েড অ্যাপ্লিকেশানগুলিতে ওয়েবসাইটগুলির মধ্যে একটি নির্বিঘ্ন মিডিয়া অভিজ্ঞতা তৈরি করতে অডিওকে বিরতি দিতে এবং পুনরায় শুরু করতে বলবে৷ এটি বর্তমানে শুধুমাত্র Android P চালিত ChromeOS ডিভাইসে সমর্থিত।
সংক্ষেপে, এই মিডিয়া ইভেন্টগুলি সর্বদা শোনা এবং সেই অনুযায়ী কাজ করা একটি ভাল অভ্যাস।
video.addEventListener('pause', function() {
// Video is now paused.
// TODO: Let's update UI accordingly.
});
video.addEventListener('play', function() {
// Video is now playing.
// TODO: Let's update UI accordingly.
});
কিন্তু অপেক্ষা করুন, আরো আছে! মিডিয়া সেশন API এখন ডেস্কটপে উপলব্ধ (এটি আগে শুধুমাত্র মোবাইলে সমর্থিত ছিল), ওয়েব ডেভেলপাররা মিডিয়া সম্পর্কিত ইভেন্টগুলি পরিচালনা করতে পারে যেমন ট্র্যাক পরিবর্তন যা মিডিয়া কী দ্বারা ট্রিগার হয়৷ ইভেন্ট previoustrack এবং nexttrack বর্তমানে সমর্থিত.
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
প্লে এবং পজ কীগুলি Chrome দ্বারা স্বয়ংক্রিয়ভাবে পরিচালনা করা হয়। যাইহোক, যদি ডিফল্ট আচরণ আপনার জন্য কাজ না করে, আপনি এখনও এটি প্রতিরোধ করতে "প্লে" এবং "পজ" এর জন্য কিছু অ্যাকশন হ্যান্ডলার সেট করতে পারেন।
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
হার্ডওয়্যার মিডিয়া কী সমর্থন ChromeOS, macOS এবং Windows এ উপলব্ধ। লিনাক্স পরে আসবে।
আমাদের বিদ্যমান বিকাশকারী ডকুমেন্টেশন দেখুন এবং অফিসিয়াল মিডিয়া সেশনের নমুনাগুলি চেষ্টা করে দেখুন৷
Chromestatus ট্র্যাকার | ক্রোমিয়াম বাগ
এনক্রিপ্ট করা মিডিয়া: HDCP পলিসি চেক
HDCP পলিসি চেক API-এর জন্য ধন্যবাদ, ওয়েব ডেভেলপাররা এখন একটি নির্দিষ্ট নীতি, যেমন HDCP প্রয়োজনীয়তা, Widevine লাইসেন্সের অনুরোধ করার আগে এবং মিডিয়া লোড করার আগে প্রয়োগ করা যেতে পারে কিনা তা জিজ্ঞাসা করতে পারে।
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
API সমস্ত প্ল্যাটফর্মে উপলব্ধ। যাইহোক, প্রকৃত নীতি পরীক্ষা নির্দিষ্ট প্ল্যাটফর্মে উপলব্ধ নাও হতে পারে। উদাহরণস্বরূপ, HDCP নীতি চেক প্রতিশ্রুতি Android এবং Android WebView-এ NotSupportedError এর সাথে প্রত্যাখ্যান করবে।
আমাদের পূর্ববর্তী ডেভেলপার ডকুমেন্টেশন দেখুন এবং সমর্থিত HDCP সংস্করণগুলি দেখতে অফিসিয়াল নমুনা ব্যবহার করে দেখুন।
জাহাজের অভিপ্রায় | Chromestatus ট্র্যাকার | ক্রোমিয়াম বাগ
ইনস্টল করা PWA-এর জন্য অটো পিকচার-ইন-পিকচারের জন্য অরিজিন ট্রায়াল
কিছু পৃষ্ঠা স্বয়ংক্রিয়ভাবে প্রবেশ করতে এবং একটি ভিডিও উপাদানের জন্য পিকচার-ইন-পিকচার ছেড়ে যেতে চাইতে পারে; উদাহরণস্বরূপ, ভিডিও কনফারেন্সিং ওয়েব অ্যাপগুলি কিছু স্বয়ংক্রিয় পিকচার-ইন-পিকচার আচরণ থেকে উপকৃত হবে যখন ব্যবহারকারী ওয়েব অ্যাপ এবং অন্যান্য অ্যাপ্লিকেশন বা ট্যাবগুলির মধ্যে পিছনে পিছনে সুইচ করে। এটি দুঃখজনকভাবে ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজনীয়তার সাথে সম্ভব নয়। তাই এখানে আসে অটো পিকচার-ইন-পিকচার!
এই ট্যাব এবং অ্যাপ স্যুইচিংকে সমর্থন করার জন্য, <video> উপাদানটিতে একটি নতুন autopictureinpicture অ্যাট্রিবিউট যোগ করা হয়েছে।
<video autopictureinpicture></video>
এটি মোটামুটিভাবে কীভাবে কাজ করে তা এখানে:
- ডকুমেন্ট লুকানো হয়ে গেলে, ভিডিও উপাদান যার
autopictureinpictureঅ্যাট্রিবিউটটি সম্প্রতি সেট করা হয়েছে সেটি স্বয়ংক্রিয়ভাবে পিকচার-ইন-পিকচারে প্রবেশ করে, যদি অনুমতি দেওয়া হয়। - ডকুমেন্ট দৃশ্যমান হয়ে গেলে, পিকচার-ইন-পিকচারের ভিডিও উপাদানটি স্বয়ংক্রিয়ভাবে এটি ছেড়ে যায়।
আর এটাই! মনে রাখবেন যে অটো পিকচার-ইন-পিকচার বৈশিষ্ট্যটি শুধুমাত্র প্রগতিশীল ওয়েব অ্যাপের ক্ষেত্রে প্রযোজ্য যা ব্যবহারকারীরা ডেস্কটপে ইনস্টল করেছেন।
আরও বিশদ বিবরণের জন্য স্পেকটি দেখুন এবং অফিসিয়াল PWA নমুনা ব্যবহার করে চেষ্টা করুন।
পরীক্ষা করার অভিপ্রায় | Chromestatus ট্র্যাকার | ক্রোমিয়াম বাগ
পিকচার-ইন-পিকচার উইন্ডোতে বিজ্ঞাপন এড়িয়ে যাওয়ার জন্য অরিজিন ট্রায়াল
ভিডিও বিজ্ঞাপনের মডেলে সাধারণত প্রি-রোল বিজ্ঞাপন থাকে। বিষয়বস্তু প্রদানকারীরা প্রায়ই কয়েক সেকেন্ড পরে বিজ্ঞাপনটি এড়িয়ে যাওয়ার ক্ষমতা প্রদান করে। দুঃখের বিষয়, পিকচার-ইন-পিকচার উইন্ডোটি ইন্টারেক্টিভ না হওয়ায়, পিকচার-ইন-পিকচারে ভিডিও দেখার ব্যবহারকারীরা আজ এটি করতে পারবেন না।
মিডিয়া সেশন API এখন ডেস্কটপে উপলব্ধ (এটি আগে শুধুমাত্র মোবাইলে সমর্থিত ছিল), একটি নতুন skipad মিডিয়া সেশন অ্যাকশন পিকচার-ইন-পিকচারে এই বিকল্পটি অফার করতে ব্যবহার করা যেতে পারে।
এই বৈশিষ্ট্যটি প্রদান করতে setActionHandler() কল করার সময় skipad সহ একটি ফাংশন পাস করুন। এটা লুকাতে পাস null . আপনি নীচে পড়তে পারেন, এটি বেশ সহজবোধ্য.
try {
navigator.mediaSession.setActionHandler('skipad', null);
showSkipAdButton();
} catch(error) {
// The "Skip Ad" media session action is not supported.
}
function showSkipAdButton() {
// The Picture-in-Picture window will show a "Skip Ad" button.
navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}
function onSkipAdButtonClick() {
// User clicked "Skip Ad" button, let's hide it now.
navigator.mediaSession.setActionHandler('skipad', null);
// TODO: Stop ad and play video.
}
অফিসিয়াল "বিজ্ঞাপন এড়িয়ে যান" নমুনা ব্যবহার করে দেখুন এবং এই বৈশিষ্ট্যটি কীভাবে উন্নত করা যেতে পারে তা আমাদের জানান ।
পরীক্ষা করার অভিপ্রায় | Chromestatus ট্র্যাকার | ক্রোমিয়াম বাগ
ডেস্কটপ PWA-এর জন্য অটোপ্লে দেওয়া হয়েছে
এখন যেহেতু প্রগতিশীল ওয়েব অ্যাপগুলি সমস্ত ডেস্কটপ প্ল্যাটফর্মে উপলব্ধ, আমরা মোবাইলে যে নিয়মটি ছিল তা আমরা ডেস্কটপে প্রসারিত করছি: সাউন্ড সহ অটোপ্লে এখন ইনস্টল করা PWA-এর জন্য অনুমোদিত৷ মনে রাখবেন এটি শুধুমাত্র ওয়েব অ্যাপ ম্যানিফেস্টের সুযোগের পৃষ্ঠাগুলিতে প্রযোজ্য।