- डेवलपर अब मीडिया कंट्रोल को अपनी पसंद के मुताबिक बना सकते हैं. जैसे, डाउनलोड, फ़ुलस्क्रीन, और रिमोटप्लेबैक बटन.
- "होम स्क्रीन में जोड़ें" फ़्लो का इस्तेमाल करके इंस्टॉल की गई साइटें, मेनिफ़ेस्ट के स्कोप में ऑडियो और वीडियो अपने-आप चला सकती हैं.
- Android पर Chrome अब म्यूट किए गए वीडियो के अपने-आप चलने की सुविधा को तब रोकता है, जब वह दिखता नहीं है.
- डेवलपर अब
color-gamutमीडिया क्वेरी का इस्तेमाल करके, Chrome और आउटपुट डिवाइसों के साथ काम करने वाले रंगों की अनुमानित रेंज को ऐक्सेस कर सकते हैं. - Media Source Extensions का इस्तेमाल करते समय, अब एन्क्रिप्ट की गई और साफ़ स्ट्रीम के बीच स्विच किया जा सकता है.
मीडिया कंट्रोलर को पसंद के मुताबिक बनाना
डेवलपर अब Chrome के नेटिव मीडिया कंट्रोल को अपनी पसंद के मुताबिक बना सकते हैं. जैसे, डाउनलोड, फ़ुलस्क्रीन, और remoteplayback बटन. इसके लिए, उन्हें नए ControlsList API का इस्तेमाल करना होगा.
इस एपीआई की मदद से, ऐसे नेटिव मीडिया कंट्रोल दिखाए या छिपाए जा सकते हैं जो काम के नहीं हैं या उपयोगकर्ता के अनुभव का हिस्सा नहीं हैं. इसके अलावा, इस एपीआई की मदद से सिर्फ़ कुछ सुविधाओं को अनुमति दी जा सकती है.
फ़िलहाल, लागू करने का तरीका यह है कि नेटिव कंट्रोल पर ब्लॉकलिस्ट का इस्तेमाल किया जाए. साथ ही, नए एट्रिब्यूट 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
Intent to Ship | Chromestatus Tracker | Chromium Bug
होम स्क्रीन पर जोड़े गए प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, अपने-आप चलने की सुविधा जोड़ी गई
इससे पहले, 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 के स्कोप में न होने की वजह से, ऑडियो अपने-आप नहीं चलता.
Intent to Ship | Chromestatus Tracker | Chromium Bug
जब वीडियो नहीं दिखता है, तब अपने-आप चलने वाले म्यूट किए गए वीडियो को रोकें
आपको शायद पता होगा कि Android पर Chrome, muted वीडियो को उपयोगकर्ता के इंटरैक्शन के बिना चलाने की अनुमति देता है. अगर किसी वीडियो को muted के तौर पर मार्क किया गया है और उसमें autoplay एट्रिब्यूट मौजूद है, तो Chrome उस वीडियो को तब चलाना शुरू कर देता है, जब वह उपयोगकर्ता को दिखने लगता है.
Chrome 58 से, बैटरी की खपत को कम करने के लिए, स्क्रीन बंद होने पर autoplay एट्रिब्यूट वाले वीडियो का चलना बंद हो जाएगा. स्क्रीन चालू होने पर, वीडियो फिर से चलने लगेगा. ऐसा Safari iOS के व्यवहार के मुताबिक होगा.'
Intent to Ship | Chromestatus Tracker | Chromium Bug
color-gamut मीडिया क्वेरी
वाइड कलर गैमट वाली स्क्रीन ज़्यादा से ज़्यादा लोकप्रिय हो रही हैं. इसलिए, साइटें अब color-gamut मीडिया क्वेरी का इस्तेमाल करके, Chrome और आउटपुट डिवाइसों के साथ काम करने वाले रंगों की अनुमानित रेंज को ऐक्सेस कर सकती हैं.
अगर आपको अब तक कलर स्पेस, कलर प्रोफ़ाइल, गैमट, वाइड-गैमट, और कलर डेप्थ की परिभाषाओं के बारे में नहीं पता है, तो हम आपको Improving Color on the Web WebKit ब्लॉग पोस्ट पढ़ने का सुझाव देते हैं. इसमें इस बारे में ज़्यादा जानकारी दी गई है कि color-gamut मीडिया क्वेरी का इस्तेमाल करके, वाइड-गैमट इमेज कैसे दिखाई जाती हैं. ऐसा तब होता है, जब उपयोगकर्ता वाइड-गैमट डिसप्ले पर होता है. इसके अलावा, यह sRGB इमेज पर वापस आ जाता है.
Chrome में मौजूदा तौर पर, srgb, p3 (DCI P3 Color Space के हिसाब से तय किया गया गैमट) और rec2020 (ITU-R Recommendation BT.2020 Color Space के हिसाब से तय किया गया गैमट) कीवर्ड इस्तेमाल किए जा सकते हैं. आधिकारिक सैंपल देखें.
एचटीएमएल में इस्तेमाल करने का तरीका:
<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")';
}