Chrome 58 में मीडिया अपडेट

François Beaufort
François Beaufort
GitHub

मीडिया कंट्रोल कस्टमाइज़ेशन

डेवलपर अब नए ControlsList API का इस्तेमाल करके, Chrome के मूल मीडिया कंट्रोल को पसंद के मुताबिक बना सकते हैं. जैसे- डाउनलोड, फ़ुलस्क्रीन, और remoteplayback बटन.

Chrome 58 में नेटिव मीडिया कंट्रोल
Chrome 58 में नेटिव मीडिया कंट्रोल

यह एपीआई, ऐसे नेटिव मीडिया कंट्रोल को दिखाने या छिपाने का तरीका उपलब्ध कराता है जिनका कोई मतलब नहीं है या जो उपयोगकर्ता अनुभव का हिस्सा नहीं हैं या सीमित सुविधाओं को ही अनुमति देते हैं.

फ़िलहाल, नेटिव कंट्रोल पर ब्लॉकलिस्ट का तरीका लागू किया गया है. इसमें नए एट्रिब्यूट controlsList का इस्तेमाल करके, एचटीएमएल कॉन्टेंट को सीधे तौर पर सेट किया जा सकता है. आधिकारिक सैंपल देखें.

एचटीएमएल में इस्तेमाल:

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

JavaScript में इस्तेमाल:

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 बग

प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, ऑटोप्ले की सुविधा को होम स्क्रीन पर जोड़ा गया

इससे पहले, Chrome बिना किसी अपवाद के Android पर आवाज़ वाले सभी 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>

जैसे ही /foo स्कोप में होगा, ऑडियो अपने-आप चलने लगेगा.

यह न करें
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

ऑडियो अपने-आप नहीं चला, क्योंकि /bar स्कोप में नहीं है.

शिप करने का इरादा | Chromestatus Tracker | Chromium बग

म्यूट किया गया वीडियो न दिखने पर अपने-आप चलने से रोकें

जैसा कि आपको पहले से पता होगा, Android पर Chrome muted वीडियो को उपयोगकर्ता के इंटरैक्शन के बिना चलाना शुरू करने देता है. अगर किसी वीडियो को muted के तौर पर मार्क किया गया है और उसमें autoplay एट्रिब्यूट मौजूद है, तो Chrome, वीडियो को उपयोगकर्ता को दिखने के बाद चलाना शुरू कर देता है.

Chrome 58 से, बैटरी का इस्तेमाल कम करने के लिए, autoplay एट्रिब्यूट की मदद से वीडियो चलाना रोक दिया जाएगा. ऐसा तब होगा, जब स्क्रीन बंद हो. साथ ही, iOS की सेटिंग में वापस आने पर, वीडियो को फिर से देखना शुरू किया जाएगा.

शिप करने का इरादा | Chromestatus Tracker | Chromium बग

color-gamat मीडिया क्वेरी

चौड़ी कलर गैमट स्क्रीन लोकप्रिय होने के साथ-साथ, साइटें अब color-gamut मीडिया क्वेरी का इस्तेमाल करके, Chrome और आउटपुट डिवाइसों पर काम करने वाले अनुमानित रंगों को ऐक्सेस कर सकती हैं.

अगर आपको कलर स्पेस, कलर प्रोफ़ाइल, गैमट, वाइड-गैमट, और कलर डेप्थ की परिभाषा नहीं पता है, तो हमारा सुझाव है कि आप WebKit ब्लॉग पोस्ट वेब पर कलर स्पेस को बेहतर बनाना पढ़ें. इसमें इस बारे में भी ज़्यादा जानकारी दी गई है कि जब उपयोगकर्ता वाइड-गैमट डिसप्ले पर होता है और एसआरजीबी इमेज पर वापस चला जाता है, तब वाइड-गैमट इमेज दिखाने के लिए color-gamut मीडिया क्वेरी का इस्तेमाल कैसे किया जाता है.

Chrome में लागू किए गए मौजूदा टूल में srgb, p3 (DCI P3 कलर स्पेस से तय किया गया गैमट), और rec2020 (ITU-R सुझाव BT.2020 कलर स्पेस से मिला गैमट) कीवर्ड स्वीकार किए जाते हैं. आधिकारिक सैंपल देखें.

एचटीएमएल में इस्तेमाल:

<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>

सीएसएस में इस्तेमाल:

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");
  }
}

JavaScript में इस्तेमाल:

// 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 बग