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

François Beaufort
François Beaufort

इस लेख में, हम 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.
});

Play और रोकें कुंजियों को 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 Policy Check API की मदद से, यह पता लगाया जा सकता है कि किसी खास नीति, जैसे कि एचडीसीपी की शर्त को, Widevine लाइसेंस का अनुरोध करने और मीडिया लोड करने से पहले लागू किया जा सकता है या नहीं.

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

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

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

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

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

इंस्टॉल किए गए PWA के लिए, अपने-आप पिक्चर में पिक्चर की सुविधा के लिए ऑरिजिन ट्रायल

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

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

<video autopictureinpicture></video>

मोटे तौर पर यह कैसे काम करता है:

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

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

ज़्यादा जानकारी के लिए spec देखें और PWA का आधिकारिक नमूना आज़माएं.

प्रयोग करने के बारे में जानकारी | Chromestatus Tracker | 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 Tracker | Chromium की गड़बड़ी

डेस्कटॉप PWA के लिए, वीडियो अपने-आप चलने की सुविधा चालू की गई

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

Chromium की गड़बड़ी