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

François Beaufort
François Beaufort
GitHub

इस लेख में, हम Chrome 73 में मीडिया से जुड़ी नई सुविधाओं के बारे में बताएंगे. इनमें ये शामिल हैं:

हार्डवेयर मीडिया बटन की सुविधा

आजकल कई कीबोर्ड में, मीडिया प्लेबैक के बुनियादी फ़ंक्शन कंट्रोल करने के लिए बटन होते हैं. जैसे, चलाना/रोकना, पिछला और अगला ट्रैक. हेडसेट में भी ये बटन होते हैं. अब तक, डेस्कटॉप पर Chrome में ऑडियो और वीडियो चलाने की सुविधा को कंट्रोल करने के लिए, मीडिया बटन का इस्तेमाल नहीं किया जा सकता था. यह बदलाव आज से लागू होगा!

कीबोर्ड के मीडिया बटन
कीबोर्ड की मीडिया बटन

अगर उपयोगकर्ता, रोकें बटन दबाता है, तो Chrome में चल रहा चालू मीडिया एलिमेंट रोक दिया जाएगा और उसे "रोका गया" मीडिया इवेंट मिलेगा. अगर 'चलाएं' बटन दबाया जाता है, तो पहले रोका गया मीडिया एलिमेंट फिर से चलने लगेगा और उसे "चलाएं" मीडिया इवेंट मिलेगा. यह सुविधा, Chrome के फ़ोरग्राउंड या बैकग्राउंड में होने पर भी काम करती है.

ChromeOS पर, ऑडियो फ़ोकस का इस्तेमाल करने वाले Android ऐप्लिकेशन अब Chrome को ऑडियो रोकने और फिर से शुरू करने के लिए कहेंगे. इससे Chrome, Chrome ऐप्लिकेशन, और Android ऐप्लिकेशन पर मौजूद वेबसाइटों के बीच, मीडिया का बेहतर अनुभव मिल पाएगा. फ़िलहाल, यह सुविधा सिर्फ़ Android P पर काम करने वाले ChromeOS डिवाइस पर काम करती है.

कम शब्दों में कहें, तो इन मीडिया इवेंट को हमेशा सुनना और उनका पालन करना अच्छा होता है.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

लेकिन रुकें, यहां और भी हैं! Media Session API अब डेस्कटॉप पर उपलब्ध है. पहले यह सिर्फ़ मोबाइल पर काम करता था. इसकी मदद से, वेब डेवलपर मीडिया से जुड़े इवेंट मैनेज कर सकते हैं. जैसे, मीडिया बटन से ट्रैक बदलना. फ़िलहाल, इवेंट previoustrack और nexttrack काम कर रहे हैं.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Chrome, चलाने और रोकने की कुंजियों को अपने-आप मैनेज करता है. हालांकि, अगर डिफ़ॉल्ट व्यवहार आपके लिए काम नहीं करता है, तो "चलाएं" और "रोकें" के लिए कुछ ऐक्शन हैंडलर सेट किए जा सकते हैं.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

हार्डवेयर मीडिया बटन की सुविधा, ChromeOS, macOS, और Windows पर उपलब्ध है. Linux के लिए, यह सुविधा बाद में उपलब्ध होगी.

हमारा मौजूदा डेवलपर दस्तावेज़ देखें और आधिकारिक मीडिया सेशन के सैंपल आज़माएं.

Chromestatus ट्रैकर | Chromium में मौजूद गड़बड़ी

एन्क्रिप्ट (सुरक्षित) किया गया मीडिया: HDCP नीति की जांच

एचडीसीपी नीति की जांच करने वाले एपीआई की मदद से, वेब डेवलपर अब यह पता लगा सकते हैं कि किसी खास नीति, जैसे कि HDCP की ज़रूरी शर्त को, Widevine लाइसेंस का अनुरोध करने और मीडिया लोड करने से पहले लागू किया जा सकता है या नहीं.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

यह एपीआई सभी प्लैटफ़ॉर्म पर उपलब्ध है. हालांकि, ऐसा हो सकता है कि कुछ प्लैटफ़ॉर्म पर नीति की असल जांच की सुविधा उपलब्ध न हो. उदाहरण के लिए, HDCP नीति की जांच के वादे को Android और Android वेबव्यू पर NotSupportedError के साथ अस्वीकार कर दिया जाएगा.

डेवलपर के लिए उपलब्ध हमारा पिछला दस्तावेज़ देखें. साथ ही, HDCP के उन सभी वर्शन को देखने के लिए आधिकारिक सैंपल आज़माएं जिनका इस्तेमाल किया जा सकता है.

शिप करने का इंटेंट | Chromestatus ट्रैकर | Chromium बग

इंस्टॉल किए गए पीडब्ल्यूए के लिए, अपने-आप 'पिक्चर में पिक्चर' मोड में जाने की सुविधा के लिए Origin का ट्रायल

कुछ पेज, वीडियो एलिमेंट के लिए पिक्चर में पिक्चर मोड में अपने-आप स्विच कर सकते हैं और उससे बाहर निकल सकते हैं. उदाहरण के लिए, जब उपयोगकर्ता वेब ऐप्लिकेशन और दूसरे ऐप्लिकेशन या टैब के बीच स्विच करता है, तो वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन को पिक्चर में पिक्चर मोड के अपने-आप चालू होने की सुविधा से फ़ायदा मिलेगा. माफ़ करें, उपयोगकर्ता के जेस्चर की ज़रूरी शर्त के साथ ऐसा नहीं किया जा सकता. इसलिए, 'पिक्चर में पिक्चर' मोड को ऑटो मोड में सेट करने की सुविधा लॉन्च की जा रही है!

टैब और ऐप्लिकेशन स्विच करने की सुविधा के साथ काम करने के लिए, <video> एलिमेंट में एक नया autopictureinpicture एट्रिब्यूट जोड़ा गया है.

<video autopictureinpicture></video>

यह सुविधा इस तरह से काम करती है:

  • दस्तावेज़ छिप जाने पर, जिस वीडियो एलिमेंट का autopictureinpicture एट्रिब्यूट हाल ही में सेट किया गया था वह अपने-आप पिक्चर में पिक्चर मोड में चला जाता है. हालांकि, इसके लिए ज़रूरी है कि पिक्चर में पिक्चर मोड की अनुमति दी गई हो.
  • दस्तावेज़ दिखने पर, पिक्चर में पिक्चर मोड में मौजूद वीडियो एलिमेंट अपने-आप हट जाता है.

यह बहुत आसान है! ध्यान दें कि ऑटोमैटिक 'पिक्चर में पिक्चर' सुविधा, सिर्फ़ उन प्रोग्रेसिव वेब ऐप्लिकेशन पर लागू होती है जिन्हें उपयोगकर्ताओं ने डेस्कटॉप पर इंस्टॉल किया है.

ज़्यादा जानकारी के लिए, स्पेसिफ़िकेशन देखें और PWA के आधिकारिक सैंपल का इस्तेमाल करके देखें.

प्रयोग करने का इंटेंट | Chromestatus ट्रैकर | Chromium बग

'पिक्चर में पिक्चर' विंडो में विज्ञापन स्किप करने की सुविधा के लिए ऑरिजिन ट्रायल

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

Media Session API अब डेस्कटॉप पर उपलब्ध है. पहले यह सिर्फ़ मोबाइल पर काम करता था. पिक्चर में पिक्चर में यह विकल्प देने के लिए, skipad मीडिया सेशन ऐक्शन का इस्तेमाल किया जा सकता है.

पिक्चर में पिक्चर विंडो में, विज्ञापन को स्किप करने का बटन
पिक्चर में पिक्चर विंडो में "विज्ञापन स्किप करें" बटन

यह सुविधा देने के लिए, setActionHandler() को कॉल करते समय skipad के साथ कोई फ़ंक्शन पास करें. इसे छिपाने के लिए, null पास करें. नीचे दिए गए तरीके से, यह काम करना काफ़ी आसान है.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

"विज्ञापन को स्किप करें" के आधिकारिक सैंपल को आज़माएं और हमें बताएं कि इस सुविधा को कैसे बेहतर बनाया जा सकता है.

प्रयोग करने का इंटेंट | Chromestatus ट्रैकर | Chromium बग

डेस्कटॉप के लिए PWA के लिए, वीडियो अपने-आप चलने की अनुमति दी गई है

अब प्रोग्रेसिव वेब ऐप्लिकेशन सभी डेस्कटॉप प्लैटफ़ॉर्म पर उपलब्ध हैं. इसलिए, हम मोबाइल पर लागू नियम को डेस्कटॉप पर भी लागू कर रहे हैं: इंस्टॉल किए गए प्रोग्रेसिव वेब ऐप्लिकेशन के लिए, अब साउंड के साथ अपने-आप चलने की अनुमति है. ध्यान दें कि यह सिर्फ़ वेब ऐप्लिकेशन मेनिफ़ेस्ट के स्कोप में मौजूद पेजों पर लागू होता है.

Chromium में गड़बड़ी