Chrome में वीडियो अपने-आप चलने की नीति

बेहतर उपयोगकर्ता अनुभव, विज्ञापन रोकने वाले एक्सटेंशन इंस्टॉल करने के लिए कम इंसेंटिव, और डेटा खर्च में कमी

अपने-आप वीडियो चलने की Chrome की नीतियों में, अप्रैल 2018 में बदलाव किया गया है. मैं आपको बताना चाहती हूँ कि इसकी वजह से, आवाज़ के साथ वीडियो चलाने की सुविधा पर क्या असर पड़ता है. स्पॉइलर चेतावनी: लोगों को यह बहुत पसंद आएगा!

नई गतिविधियां

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

Chrome की अपने-आप चलने की सुविधा से जुड़ी नीतियां आसान हैं:

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

मीडिया सहभागिता इंडेक्स

मीडिया एंगेजमेंट इंडेक्स (एमईआई) से यह पता चलता है कि किसी व्यक्ति के किसी साइट पर मीडिया का इस्तेमाल करने की कितनी संभावना है. Chrome का तरीका हर ऑरिजिन के हिसाब से, मीडिया प्लेबैक इवेंट की विज़िट का अनुपात है:

• मीडिया (ऑडियो/वीडियो) का इस्तेमाल सात सेकंड से ज़्यादा होना चाहिए.
• ऑडियो मौजूद होना चाहिए और उसे अनम्यूट किया गया होना चाहिए.
• वीडियो वाला टैब चालू है.
• वीडियो का साइज़ (पिक्सल में) 200x140 से ज़्यादा होना चाहिए.

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

उपयोगकर्ता का एमईआई, about://media-engagement के इंटरनल पेज पर उपलब्ध है.

डेवलपर स्विच

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

• कमांड लाइन फ़्लैग का इस्तेमाल करके, वीडियो अपने-आप चलने की नीति को पूरी तरह से बंद किया जा सकता है: chrome.exe --autoplay-policy=no-user-gesture-required. इससे अपनी वेबसाइट की जांच की जा सकती है, जैसे कि उपयोगकर्ता आपकी साइट पर रहा है और वीडियो अपने-आप चलने की सुविधा को हमेशा चालू रखा जाएगा.

• एमईआई को बंद करके यह भी पक्का किया जा सकता है कि वीडियो अपने-आप चलने की सुविधा कभी भी बंद न हो. साथ ही, यह भी पक्का किया जा सकता है कि जिन साइटों का एमईआई सबसे ज़्यादा है उन पर नए उपयोगकर्ताओं के लिए, डिफ़ॉल्ट रूप से अपने-आप वीडियो चलने की सुविधा चालू हो. फ़्लैग के साथ ऐसा करें: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

आईफ़्रेम डेलिगेशन

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

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

जब अपने-आप चलने के लिए अनुमतियों की नीति बंद होती है, तो play() को उपयोगकर्ता के जेस्चर के बिना किए जाने वाले कॉल, NotAllowedError DOMDOM वाले प्रॉमिस को अस्वीकार कर देंगे. इसके अलावा, अपने-आप चलने वाले एट्रिब्यूट को भी अनदेखा कर दिया जाएगा.

उदाहरण

उदाहरण 1: जब भी कोई उपयोगकर्ता अपने लैपटॉप पर VideoSubscriptionSite.com पर जाता है और कोई टीवी शो या फ़िल्म देखता है. उनका मीडिया जुड़ाव स्कोर ज़्यादा है, इसलिए वीडियो अपने-आप चलने की अनुमति है.

दूसरा उदाहरण: GlobalNewsSite.com में टेक्स्ट और वीडियो, दोनों तरह का कॉन्टेंट है. ज़्यादातर लोग टेक्स्ट कॉन्टेंट के लिए साइट पर जाते हैं और कभी-कभी वीडियो देखते हैं. उपयोगकर्ताओं का मीडिया पर जुड़ाव का स्कोर कम होता है, इसलिए अगर उपयोगकर्ता सीधे किसी सोशल मीडिया पेज या खोज से सीधे नेविगेट करता है, तो उसे अपने-आप चलने की अनुमति नहीं दी जाएगी.

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

उदाहरण 4: MyMovieReviewBlog.com समीक्षा के साथ जाने के लिए, iframe को फ़िल्म के ट्रेलर के साथ एम्बेड करता है. उपयोगकर्ताओं ने ब्लॉग पर जाने के लिए डोमेन से इंटरैक्ट किया है, इसलिए ऑटोप्ले की अनुमति है. हालांकि, कॉन्टेंट को अपने-आप चलने के लिए, ब्लॉग को उस खास अधिकार को साफ़ तौर पर iframe को देना होगा.

Chrome एंटरप्राइज़ की नीतियां

कीऑस्क या अनदेखी सिस्टम जैसे इस्तेमाल के उदाहरणों के लिए, Chrome एंटरप्राइज़ की नीतियों की मदद से, अपने-आप चलने वाले व्यवहार को बदला जा सकता है. अपने-आप चलने वाली एंटरप्राइज़ नीतियों को सेट करने का तरीका जानने के लिए, नीति की सूची सहायता पेज देखें:

• AutoplayAllowed नीति से यह कंट्रोल किया जाता है कि वीडियो अपने-आप चलने की सुविधा चालू है या नहीं.
• AutoplayAllowlist नीति की मदद से, ऐसे यूआरएल पैटर्न की सूची बनाई जा सकती है जिनके लिए, अपने-आप वीडियो चलने की सुविधा हमेशा चालू रहेगी.

वेब डेवलपर के लिए सबसे सही तरीके

ऑडियो/वीडियो एलिमेंट

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

Play फ़ंक्शन से मिले प्रॉमिस को हमेशा देखें, ताकि यह पता लगाया जा सके कि उसे अस्वीकार कर दिया गया है या नहीं:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

लोगों की दिलचस्पी बढ़ाने का एक अच्छा तरीका यह है कि आप अपने-आप वीडियो चलने की सुविधा चालू करें और उन्हें अनम्यूट करने का विकल्प दें. (नीचे दिया गया उदाहरण देखें.) Facebook, Instagram, Twitter, और YouTube जैसी कुछ वेबसाइटें इस काम को बेहतर तरीके से कर रही हैं.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

ऐसे इवेंट जो उपयोगकर्ता को ऐक्टिवेट करते हैं उन्हें अब भी सभी ब्राउज़र पर एक जैसा तय किया जाना चाहिए. हमारा सुझाव है कि आप तब तक "click" पर बने रहें. GitHub की समस्याwhatwg/html#3849 देखें.

वेब ऑडियो

Web Audio API को Chrome 71 और उसके बाद के वर्शन में, अपने-आप चलने की सुविधा मिलती है. इसके बारे में जानने लायक कुछ चीज़ें हैं. सबसे अच्छा यह है कि आप ऑडियो प्लेबैक शुरू करने से पहले उपयोगकर्ता के इंटरैक्शन का इंतज़ार करें, ताकि उपयोगकर्ताओं को कुछ होने के बारे में पता चल सके. उदाहरण के लिए, "चलाएं" बटन या "चालू/बंद" स्विच के बारे में सोचें. ऐप्लिकेशन के फ़्लो के हिसाब से, "अनम्यूट करें" बटन भी जोड़ा जा सकता है.

अगर पेज लोड होने पर अपना AudioContext बनाया जाता है, तो आपको उपयोगकर्ता के पेज से इंटरैक्ट करने के कुछ समय बाद (जैसे, उपयोगकर्ता के किसी बटन पर क्लिक करने पर) resume() को कॉल करना होगा. इसके अलावा, किसी भी अटैच किए गए नोड पर start() को कॉल करने पर, उपयोगकर्ता के जेस्चर के बाद AudioContext फिर से शुरू हो जाएगा.

// Existing code unchanged.
window. {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

जब उपयोगकर्ता पेज से इंटरैक्ट करे, तब भी AudioContext बनाया जा सकता है.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

यह पता लगाने के लिए कि ऑडियो चलाने के लिए ब्राउज़र को उपयोगकर्ता के इंटरैक्शन की ज़रूरत है या नहीं, AudioContext.stateवीडियो बनाने के बाद देखें. अगर खेलने की अनुमति है, तो इसे तुरंत running पर स्विच कर लेना चाहिए. ऐसा न करने पर, यह suspended होगा. statechange इवेंट को सुनने पर, बदलावों का एसिंक्रोनस तरीके से पता लगाया जा सकता है.

इसका एक उदाहरण देखने के लिए, एक छोटा पुल अनुरोध देखें. इससे https://airhorner.com के लिए अपने-आप चलने वाले इन नीति के नियमों के लिए, वेब ऑडियो चलाने की सुविधा ठीक हो जाती है.