इस लेख में, मैं Chrome 73 की नई मीडिया सुविधाओं के बारे में बताऊंगा. इन सुविधाओं में ये शामिल हैं:
- हार्डवेयर मीडिया बटन, अब मीडिया चलाने की सुविधा को कंट्रोल करने के लिए इस्तेमाल किए जा सकते हैं डेस्कटॉप पर.
- वेब डेवलपर क्वेरी कर सकते हैं कि किसी खास HDCP नीति को लागू किया जा सकता है या नहीं.
- डेस्कटॉप के PWA में ऑटो पिक्चर में पिक्चर और "विज्ञापन छोड़ें" में पिक्चर-इन-पिक्चर सुविधा को लॉन्च करने की शुरुआत होने वाली है.
- डेस्कटॉप के पीडब्ल्यूए में, आवाज़ के साथ अपने-आप वीडियो चलने की सुविधा उपलब्ध होती है.
हार्डवेयर मीडिया कुंजियां सहायता
आज-कल कई कीबोर्ड में बेसिक मीडिया प्लेबैक फ़ंक्शन को कंट्रोल करने के बटन होते हैं, जैसे कि जैसे, चलाएं/रोकें, पिछला और अगला ट्रैक. हेडसेट में भी ये सुविधाएं मौजूद होती हैं. अब तक, डेस्कटॉप उपयोगकर्ता, ऑडियो और वीडियो प्लेबैक को कंट्रोल करने के लिए इन मीडिया बटन का इस्तेमाल नहीं कर सकते Chrome में. यह आज बदलता है!
अगर कोई उपयोगकर्ता 'रोकें' बटन को दबाता है, तो Chrome में चल रहा मीडिया एलिमेंट रोके और "रोका गया" पाएं मीडिया इवेंट. अगर प्ले बटन को दबाया जाता है, तो पहले से रुका हुआ मीडिया एलिमेंट फिर से शुरू हो जाएगा और "चलाएं" मिलेगा मीडिया इवेंट. Chrome के फ़ोरग्राउंड में होने या बैकग्राउंड में, Chrome का इस्तेमाल किया जा सकता है.
ChromeOS में, ऑडियो फ़ोकस का इस्तेमाल करने वाले Android ऐप्लिकेशन अब Chrome को यह निर्देश देंगे कि वह Chrome पर वेबसाइटों के बीच आसान मीडिया अनुभव बनाने के लिए ऑडियो को फिर से चालू करना, Chrome ऐप्लिकेशन और Android ऐप्लिकेशन. फ़िलहाल, यह सुविधा सिर्फ़ ChromeOS पर उपलब्ध है Android P पर चलने वाला डिवाइस है.
कम शब्दों में कहें, तो यह अच्छा तरीका है कि आप मीडिया के इन इवेंट को हमेशा सुनें और कार्रवाई करें उसी के हिसाब से.
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 पर हार्डवेयर मीडिया पासकोड की सुविधा उपलब्ध है. लिनक्स बाद में आएगा.
हमारा मौजूदा डेवलपर दस्तावेज़ देखें और आधिकारिक मीडिया ऐप्लिकेशन आज़माएं सेशन के सैंपल.
Chromestatus ट्रैकर | Chromium बग
एन्क्रिप्ट किया गया मीडिया: एचडीसीपी नीति जांच
HDCP Policy Check API की मदद से, अब वेब डेवलपर यह क्वेरी कर सकते हैं कि खास नीति, जैसे कि 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 से अस्वीकार कर दिया जाएगा.
हमारा पिछला डेवलपर दस्तावेज़ देखें और आधिकारिक सैंपल देखें.
शिप करने की इच्छा | Chromestatus ट्रैकर | Chromium बग
इंस्टॉल किए गए पीडब्ल्यूए के लिए, ऑटो पिक्चर में पिक्चर की सुविधा के लिए ऑरिजिन ट्रायल
ऐसा हो सकता है कि कुछ पेज अपने-आप पिक्चर में पिक्चर मोड में जाएं और उसे बंद करें वीडियो एलिमेंट; उदाहरण के लिए, वीडियो कॉन्फ़्रेंसिंग वाले वेब ऐप्लिकेशन को कुछ पिक्चर में पिक्चर मोड में अपने-आप स्विच होने की सुविधा उपयोगकर्ता के डिवाइस के बीच स्विच करने पर वेब ऐप्लिकेशन और अन्य ऐप्लिकेशन या टैब पर जाकर ऐक्सेस कर सकते हैं. हालांकि, यह संभव नहीं है: उपयोगकर्ता के जेस्चर से जुड़ी ज़रूरी शर्त. अब आ रहा है ऑटो पिक्चर में पिक्चर की सुविधा!
टैब और ऐप्लिकेशन स्विच करने की सुविधा के इस्तेमाल के लिए, एक नया autopictureinpicture एट्रिब्यूट
को <video> एलिमेंट में जोड़ा गया है.
<video autopictureinpicture></video>
मोटे तौर पर यह इस तरह से काम करता है:
- दस्तावेज़ छिपाए जाने पर, वह वीडियो एलिमेंट जिसका
autopictureinpictureएट्रिब्यूट हाल ही में सेट किया गया है और यह 'पिक्चर में पिक्चर' में अपने-आप शामिल होता है, अगर अनुमति है. - दस्तावेज़ दिखने पर, पिक्चर में पिक्चर मोड में वीडियो एलिमेंट दिखने लगता है उसे अपने-आप छोड़ देता है.
यह बहुत आसान है! ध्यान दें कि ऑटो पिक्चर में पिक्चर की सुविधा सिर्फ़ इन पर लागू होती है प्रोग्रेसिव वेब ऐप्लिकेशन जिन्हें लोगों ने डेस्कटॉप पर इंस्टॉल किया है.
ज़्यादा जानकारी के लिए, ज़रूरी जानकारी देखें और आधिकारिक पीडब्ल्यूए का इस्तेमाल करके देखें सैंपल.
प्रयोग करने की इच्छा | Chromestatus ट्रैकर | Chromium बग
पिक्चर में पिक्चर विंडो में विज्ञापन स्किप करने के लिए ऑरिजिन ट्रायल
वीडियो विज्ञापन मॉडल में आम तौर पर, वीडियो शुरू होने से पहले दिखने वाले विज्ञापन होते हैं. कंटेंट विज्ञापन देने वाली कंपनियां, अक्सर कुछ सेकंड के बाद विज्ञापन को स्किप करने की सुविधा भी देती हैं. अफ़सोस की बात है, पिक्चर में पिक्चर विंडो इंटरैक्टिव नहीं होती है. इसलिए, उपयोगकर्ता फ़िलहाल, पिक्चर में पिक्चर की सुविधा का इस्तेमाल नहीं किया जा सकता.
Media Session API के साथ अब डेस्कटॉप पर उपलब्ध है (यह
यह सुविधा उपलब्ध है), तो इसे उपलब्ध कराने के लिए, skipad मीडिया सेशन से जुड़ी नई कार्रवाई का इस्तेमाल किया जा सकता है
पिक्चर में पिक्चर विकल्प का इस्तेमाल करें.
यह सुविधा उपलब्ध कराने के लिए, कॉल करते समय skipad के साथ फ़ंक्शन पास करें
setActionHandler(). इसे छिपाने के लिए, 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 के लिए, वीडियो अपने-आप चलने की सुविधा को अनुमति दी गई
प्रोग्रेसिव वेब ऐप्लिकेशन अब सभी डेस्कटॉप प्लैटफ़ॉर्म पर उपलब्ध हैं, हम मोबाइल से डेस्कटॉप पर लागू होने वाले अपने नियम का दायरा बढ़ा रहे हैं: ऑटोप्ले अब इंस्टॉल किए गए PWA के लिए, साउंड की अनुमति है. ध्यान दें कि यह केवल वेब ऐप्लिकेशन मेनिफ़ेस्ट के दायरे में शामिल है.