Chrome 58 में ऑडियो/वीडियो अपडेट

फ्रांकोइस ब्यूफ़ोर्ट
फ्रांकोइस ब्यूफ़ोर्ट
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 सभी autoplay को बिना किसी अपवाद के Android पर आवाज़ के साथ ब्लॉक करता था. अब यह सच नहीं है. अब से, होम स्क्रीन पर जोड़ें सुविधा का इस्तेमाल करके इंस्टॉल की गई साइटों को, बिना किसी पाबंदी के वेब ऐप्लिकेशन मेनिफ़ेस्ट में शामिल ऑरिजिन से, ऑडियो और वीडियो अपने-आप चलने की सुविधा मिलेगी.

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

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

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

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

शिप करने की इच्छा | Chromestatus Tracker | Chromium बग

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

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

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

फ़िलहाल, Chrome में लागू किए गए srgb, p3 (डीसीआई 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 बग