Chrome 58-এ অডিও/ভিডিও আপডেট

ফ্রাঁসোয়া বিউফোর্ট
François Beaufort
GitHub

মিডিয়া নিয়ন্ত্রণ কাস্টমাইজেশন

ডেভেলপাররা এখন নতুন [ControlsList API] ব্যবহার করে Chrome এর নেটিভ মিডিয়া নিয়ন্ত্রণ যেমন ডাউনলোড, ফুলস্ক্রিন এবং [রিমোটপ্লেব্যাক] বোতামগুলি কাস্টমাইজ করতে পারবেন।

Chrome 58-এ নেটিভ মিডিয়া নিয়ন্ত্রণ
চিত্র ১. Chrome 58-এ নেটিভ মিডিয়া নিয়ন্ত্রণ

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

বর্তমানে বাস্তবায়নটি হল নেটিভ কন্ট্রোলের উপর ব্লকলিস্ট মেকানিজম, যেখানে নতুন অ্যাট্রিবিউট controlsList ব্যবহার করে HTML কন্টেন্ট থেকে সরাসরি সেট করার ক্ষমতা রয়েছে। অফিসিয়াল নমুনাটি দেখুন।

HTML-এ ব্যবহার:

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

জাভাস্ক্রিপ্টে ব্যবহার:

var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"

video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true

পাঠানোর উদ্দেশ্য | Chromestatus Tracker | Chromium বাগ

হোম স্ক্রিনে প্রোগ্রেসিভ ওয়েব অ্যাপের জন্য অটোপ্লে যোগ করা হয়েছে

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

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}

<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

পাঠানোর উদ্দেশ্য | Chromestatus Tracker | Chromium বাগ

অদৃশ্য হলে মিউট করা ভিডিও অটোপ্লে করা থামান

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

Chrome 58 থেকে, পাওয়ার ব্যবহার কমাতে, Safari iOS আচরণ অনুসরণ করে, autoplay অ্যাট্রিবিউট সহ ভিডিওগুলির প্লেব্যাক অফস্ক্রিন থাকাকালীন বিরতি দেওয়া হবে এবং আবার দেখা হলে পুনরায় শুরু করা হবে।

পাঠানোর উদ্দেশ্য | Chromestatus Tracker | Chromium বাগ

কালার-গামুট মিডিয়া কোয়েরি

প্রশস্ত রঙের পর্দা ক্রমশ জনপ্রিয় হয়ে উঠছে, তাই সাইটগুলি এখন color-gamut মিডিয়া কোয়েরি ব্যবহার করে ক্রোম এবং আউটপুট ডিভাইস দ্বারা সমর্থিত রঙের আনুমানিক পরিসর অ্যাক্সেস করতে পারে।

যদি আপনি এখনও রঙের স্থান, রঙের প্রোফাইল, গ্যামাট, ওয়াইড-গ্যামাট এবং রঙের গভীরতার সংজ্ঞাগুলির সাথে পরিচিত না হন, তাহলে আমি আপনাকে "ইমপ্রুভিং কালার অন দ্য ওয়েব ওয়েবকিট" ব্লগ পোস্টটি পড়ার পরামর্শ দিচ্ছি। এটি ব্যবহারকারী যখন ওয়াইড-গ্যামাট ডিসপ্লেতে থাকে তখন ওয়াইড-গ্যামাট ছবি পরিবেশন করার জন্য color-gamut মিডিয়া কোয়েরি কীভাবে ব্যবহার করতে হয় এবং অন্যথায় sRGB ছবিতে ফিরে যেতে হয় সে সম্পর্কে বিস্তারিতভাবে আলোচনা করে।

Chrome-এর বর্তমান বাস্তবায়ন srgb , p3 (DCI P3 Color Space দ্বারা নির্দিষ্ট করা gamut), এবং rec2020 (ITU-R Recommendation BT.2020 Color Space দ্বারা নির্দিষ্ট করা gamut) কীওয়ার্ড গ্রহণ করে। অফিসিয়াল নমুনাটি দেখুন।

HTML-এ ব্যবহার:

<picture>
  <source media="(color-gamut: p3)" srcset="photo-p3.jpg">
  <source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
  <img src="photo-srgb.jpg">
</picture>

CSS-এ ব্যবহার:

main {
  background-image: url("photo-srgb.jpg");
}

@media (color-gamut: p3) {
  main {
    background-image: url("photo-p3.jpg");
  }
}

@media (color-gamut: rec2020) {
  main {
    background-image: url("photo-rec2020.jpg");
  }
}

জাভাস্ক্রিপ্টে ব্যবহার:

// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}

if (window.matchMedia("(color-gamut: p3)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}

if (window.matchMedia("(color-gamut: rec2020)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}

পাঠানোর উদ্দেশ্য | Chromestatus Tracker | Chromium বাগ