ক্রোমের মিডিয়া ক্ষমতাগুলি 75 সংস্করণে আপডেট করা হয়েছিল৷ এই নিবন্ধে, আমি সেই নতুন বৈশিষ্ট্যগুলি নিয়ে আলোচনা করব যার মধ্যে রয়েছে:
- এনক্রিপ্ট করা মিডিয়ার জন্য প্লেব্যাক মসৃণ এবং শক্তি দক্ষ হবে কিনা তা অনুমান করা।
- ভিডিও এলিমেন্টের
playsInlineঅ্যাট্রিবিউট ইঙ্গিত সমর্থন করে।
এনক্রিপ্ট করা মিডিয়া: ডিকোডিং তথ্য
Chrome 66 থেকে, ওয়েব ডেভেলপাররা কোডেক, প্রোফাইল, রেজোলিউশন, বিটরেট ইত্যাদির মতো তথ্যের উপর ভিত্তি করে ডিভাইসের স্পষ্ট বিষয়বস্তু ডিকোডিং ক্ষমতা সম্পর্কে ব্রাউজারকে জিজ্ঞাসা করতে ডিকোডিং তথ্য ব্যবহার করতে সক্ষম হয়েছে৷ এটি প্লেব্যাকটি মসৃণ হবে কিনা তা নির্দেশ করে৷ ব্রাউজার দ্বারা রেকর্ড করা পূর্ববর্তী প্লেব্যাক পরিসংখ্যানের উপর ভিত্তি করে (সময়মত) এবং শক্তি দক্ষ।
মিডিয়া ক্যাপাবিলিটিস এপিআই স্পেসিফিকেশন, ডিকোডিং ইনফোকে সংজ্ঞায়িত করে, তারপর থেকে এনক্রিপ্ট করা মিডিয়া কনফিগারেশনগুলি পরিচালনা করার জন্য আপডেট করা হয়েছে যাতে এনক্রিপ্টেড মিডিয়া (ইএমই) ব্যবহার করে ওয়েবসাইটগুলি সর্বোত্তম মিডিয়া স্ট্রিমগুলি নির্বাচন করতে পারে।
সংক্ষেপে, ইএমই-এর জন্য ডিকোডিং তথ্য কীভাবে কাজ করে তা এখানে। অফিসিয়াল নমুনা চেষ্টা করুন.
const encryptedMediaConfig = {
type: 'media-source', // or 'file'
video: {
contentType: 'video/webm; codecs="vp09.00.10.08"',
width: 1920,
height: 1080,
bitrate: 2646242, // number of bits used to encode a second of video
framerate: '25' // number of frames used in one second
},
keySystemConfiguration: {
keySystem: 'com.widevine.alpha',
videoRobustness: 'SW_SECURE_DECODE' // Widevine L3
}
};
navigator.mediaCapabilities.decodingInfo(encryptedMediaConfig).then(result => {
if (!result.supported) {
console.log('Argh! This encrypted media configuration is not supported.');
return;
}
if (!result.keySystemAccess) {
console.log('Argh! Encrypted media support is not available.')
return;
}
console.log('This encrypted media configuration is supported.');
console.log('Playback should be' +
(result.smooth ? '' : ' NOT') + ' smooth and' +
(result.powerEfficient ? '' : ' NOT') + ' power efficient.');
// TODO: Use `result.keySystemAccess.createMediaKeys()` to setup EME playback.
});
EME প্লেব্যাকগুলিতে বিশেষায়িত ডিকোডিং এবং রেন্ডারিং কোড পাথ রয়েছে, যার অর্থ স্পষ্ট প্লেব্যাকের তুলনায় ভিন্ন কোডেক সমর্থন এবং কর্মক্ষমতা। তাই navigator.mediaCapabilities.decodingInfo() এ পাস করা মিডিয়া কনফিগারেশন অবজেক্টে একটি নতুন keySystemConfiguration কী সেট করতে হবে। এই কীটির মান হল একটি অভিধান যা বেশ কয়েকটি সুপরিচিত EME প্রকার ধারণ করে। এটি একটি প্রধান পার্থক্যের সাথে EME-এর requestMediaKeySystemAccess() এ প্রদত্ত ইনপুটগুলির প্রতিলিপি করে: requestMediaKeySystemAccess() এ প্রদত্ত ইনপুটগুলির ক্রমগুলিকে একটি একক মানের সাথে সমতল করা হয় যেখানেই অনুক্রমের উদ্দেশ্য ছিল requestMediaKeySystemAccess() একটি সমর্থন নির্বাচন করে৷
ডিকোডিং ইনফো কলারের জন্য সিদ্ধান্ত না নিয়ে এক জোড়া অডিও এবং ভিডিও স্ট্রিমগুলির জন্য সমর্থনের গুণমান (মসৃণতা এবং শক্তি দক্ষতা) বর্ণনা করে। কলারদের এখনও মিডিয়া কনফিগারেশন অর্ডার করা উচিত যেমন তারা requestMediaKeySystemAccess() এর সাথে করে। শুধু এখন তারা নিজেরাই তালিকায় হাঁটছে।
navigator.mediaCapabilities.decodingInfo() একটি প্রতিশ্রুতি প্রদান করে যা তিনটি বুলিয়ান সমন্বিত একটি বস্তুর সাথে অ্যাসিঙ্ক্রোনাসভাবে সমাধান করে: supported , smooth এবং powerEfficient । যাইহোক, যখন একটি keySystemConfiguration কী সেট করা হয় এবং supported হয় true , তথাপি keySystemAccess নামে আরেকটি MediaKeySystemAccess অবজেক্টও ফিরে আসে। এটি কিছু মিডিয়া কী অনুরোধ করতে এবং এনক্রিপ্ট করা মিডিয়া প্লেব্যাক সেটআপ করতে ব্যবহার করা যেতে পারে। এখানে একটি উদাহরণ:
// Like rMSKA(), orderedMediaConfigs is ordered from most to least wanted.
const capabilitiesPromises = orderedMediaConfigs.map(mediaConfig =>
navigator.mediaCapabilities.decodingInfo(mediaConfig)
);
// Assume this app wants a supported and smooth media playback.
let bestConfig = null;
for await (const result of capabilitiesPromises) {
if (result.supported && result.smooth) {
bestConfig = result;
break;
}
}
if (bestConfig) {
const mediaKeys = await bestConfig.keySystemAccess.createMediaKeys();
// TODO: rest of EME path as-is
} else {
// Argh! No smooth configs found.
// TODO: Maybe choose the lowest resolution and framerate available.
}
মনে রাখবেন যে এনক্রিপ্ট করা মিডিয়ার জন্য তথ্য ডিকোড করার জন্য HTTPS প্রয়োজন।
তদুপরি, সচেতন থাকুন যে এটি Android এবং ChromeOS-এ requestMediaKeySystemAccess() এর মতো একইভাবে একটি ব্যবহারকারীর প্রম্পট ট্রিগার করতে পারে। এনক্রিপ্ট করা মিডিয়া প্লেব্যাক সেটআপ করতে আরও কলের প্রয়োজন হওয়া সত্ত্বেও, এটি requestMediaKeySystemAccess() এর চেয়ে বেশি প্রম্পট দেখাবে না।
পরীক্ষা করার অভিপ্রায় | Chromestatus ট্র্যাকার | ক্রোমিয়াম বাগ
HTMLVideoElement.playsInline
Chrome এখন playsInline বুলিয়ান অ্যাট্রিবিউট সমর্থন করে। উপস্থিত থাকলে, এটি ব্রাউজারকে ইঙ্গিত দেয় যে ভিডিওটি ডিফল্টরূপে নথিতে "ইনলাইন" প্রদর্শন করা উচিত, উপাদানটির প্লেব্যাক এলাকায় সীমাবদ্ধ।
একইভাবে সাফারির মতো, যেখানে প্লেব্যাক শুরু হলে আইফোনের ভিডিও উপাদানগুলি স্বয়ংক্রিয়ভাবে ফুলস্ক্রিন মোডে প্রবেশ করে না, এই ইঙ্গিতটি কিছু এমবেডারকে একটি স্বয়ংক্রিয়-পূর্ণস্ক্রীন ভিডিও প্লেব্যাক অভিজ্ঞতার অনুমতি দেয়। ওয়েব ডেভেলপাররা প্রয়োজন হলে এই অভিজ্ঞতা থেকে অপ্ট-আউট করতে এটি ব্যবহার করতে পারেন।
<video playsinline></video>
যেহেতু অ্যান্ড্রয়েড এবং ডেস্কটপে ক্রোম স্বয়ংক্রিয়-ফুলস্ক্রিন প্রয়োগ করে না, তাই playsInline ভিডিও উপাদান বৈশিষ্ট্য ইঙ্গিত ব্যবহার করা হয় না।