- डेवलपर अब मीडिया कंट्रोल को पसंद के मुताबिक बना सकते हैं. जैसे, डाउनलोड, फ़ुलस्क्रीन, और रिमोटप्लेबैक बटन.
- "होमस्क्रीन पर जोड़ें" फ़्लो का इस्तेमाल करके इंस्टॉल की गई साइटें, मेनिफ़ेस्ट के दायरे में ऑडियो और वीडियो अपने-आप चला सकती हैं.
- Android पर Chrome अब म्यूट किए गए वीडियो के न दिखने पर अपने-आप उसे रोक देता है.
- डेवलपर अब
color-gamut
मीडिया क्वेरी का इस्तेमाल करके, Chrome और आउटपुट डिवाइसों के साथ काम करने वाले रंगों की करीब-करीब उस रेंज को ऐक्सेस कर सकते हैं. - मीडिया सोर्स एक्सटेंशन का इस्तेमाल करते समय, अब एन्क्रिप्ट की गई और साफ़ स्ट्रीम के बीच स्विच किया जा सकता है.
मीडिया कंट्रोल कस्टमाइज़ेशन
डेवलपर अब नए ControlsList API का इस्तेमाल करके, Chrome के मूल मीडिया कंट्रोल को पसंद के मुताबिक बना सकते हैं. जैसे- डाउनलोड, फ़ुलस्क्रीन, और remoteplayback बटन.
यह एपीआई, ऐसे नेटिव मीडिया कंट्रोल को दिखाने या छिपाने का तरीका उपलब्ध कराता है जिनका कोई मतलब नहीं है या जो उपयोगकर्ता अनुभव का हिस्सा नहीं हैं या सीमित सुविधाओं को ही अनुमति देते हैं.
फ़िलहाल, नेटिव कंट्रोल पर ब्लॉकलिस्ट का तरीका लागू किया गया है. इसमें नए एट्रिब्यूट 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")';
}