इस लेख में, हम Chrome 73 में मीडिया से जुड़ी नई सुविधाओं के बारे में बताएंगे. इनमें ये शामिल हैं:
- अब डेस्कटॉप पर मीडिया प्लेबैक को कंट्रोल करने के लिए, हार्डवेयर मीडिया बटन का इस्तेमाल किया जा सकता है.
- वेब डेवलपर यह क्वेरी कर सकते हैं कि किसी खास एचडीसीपी नीति को लागू किया जा सकता है या नहीं.
- डेस्कटॉप पीडब्लूए में पिक्चर में पिक्चर मोड अपने-आप चालू होना और पिक्चर में पिक्चर मोड में"विज्ञापन स्किप करें" सुविधा, ओरिजिन ट्रायल के तौर पर उपलब्ध है.
- डेस्कटॉप PWA, साउंड के साथ अपने-आप चलने की सुविधा देते हैं.
हार्डवेयर मीडिया बटन की सुविधा
आजकल कई कीबोर्ड में, मीडिया प्लेबैक के बुनियादी फ़ंक्शन कंट्रोल करने के लिए बटन होते हैं. जैसे, चलाना/रोकना, पिछला और अगला ट्रैक. हेडसेट में भी ये बटन होते हैं. अब तक, डेस्कटॉप इस्तेमाल करने वाले लोग 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 गड़बड़ी
एन्क्रिप्ट किया गया मीडिया: एचडीसीपी नीति जांच
एचडीसीपी नीति की जांच करने वाले एपीआई की मदद से, वेब डेवलपर अब यह पता लगा सकते हैं कि किसी खास नीति, जैसे कि एचडीसीपी की ज़रूरी शर्त को, Widevine लाइसेंस का अनुरोध करने और मीडिया लोड करने से पहले लागू किया जा सकता है या नहीं.
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
यह एपीआई सभी प्लैटफ़ॉर्म पर उपलब्ध है. हालांकि, ऐसा हो सकता है कि कुछ प्लैटफ़ॉर्म पर नीति की असल जांच की सुविधा उपलब्ध न हो. उदाहरण के लिए, Android और Android वेबव्यू पर, NotSupportedError के साथ HDCP नीति की जांच का प्रॉमिस अस्वीकार हो जाएगा.
डेवलपर के लिए उपलब्ध हमारा पिछला दस्तावेज़ देखें. साथ ही, HDCP के उन सभी वर्शन को देखने के लिए आधिकारिक सैंपल आज़माएं जिनका इस्तेमाल किया जा सकता है.
शिप करने का इंटेंट | Chromestatus ट्रैकर | Chromium बग
इंस्टॉल किए गए पीडब्ल्यूए के लिए, ऑटो पिक्चर में पिक्चर की सुविधा के लिए ऑरिजिन ट्रायल
कुछ पेज, वीडियो एलिमेंट के लिए पिक्चर में पिक्चर मोड में अपने-आप स्विच कर सकते हैं और उससे बाहर निकल सकते हैं. उदाहरण के लिए, जब उपयोगकर्ता वेब ऐप्लिकेशन और दूसरे ऐप्लिकेशन या टैब के बीच स्विच करता है, तो वीडियो कॉन्फ़्रेंसिंग वेब ऐप्लिकेशन को पिक्चर में पिक्चर मोड के अपने-आप स्विच होने की सुविधा से फ़ायदा मिलेगा. अफ़सोस की बात है कि उपयोगकर्ता के जेस्चर से जुड़ी शर्त की वजह से ऐसा नहीं किया जा सकता. अब आ रहा है ऑटो पिक्चर में पिक्चर की सुविधा!
टैब और ऐप्लिकेशन स्विच करने की सुविधा के साथ काम करने के लिए, <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 के लिए, वीडियो अपने-आप चलने की अनुमति दी गई है
अब प्रोग्रेसिव वेब ऐप्लिकेशन सभी डेस्कटॉप प्लैटफ़ॉर्म पर उपलब्ध हैं. इसलिए, हम मोबाइल से डेस्कटॉप पर अपने नियम का दायरा बढ़ा रहे हैं: इंस्टॉल किए गए पीडब्ल्यूए के लिए, साउंड के साथ अपने-आप चलने की सुविधा उपलब्ध है. ध्यान दें कि यह सिर्फ़ वेब ऐप्लिकेशन मेनिफ़ेस्ट के स्कोप में मौजूद पेजों पर लागू होता है.