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

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

François Beaufort
François Beaufort
GitHub

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

लियाम नीसन: मैं आपको ढूंढ लूंगा और आपको रोक दूंगा.
शॉन बीन: अपने-आप वीडियो चलने की सुविधा को आसानी से चालू नहीं किया जा सकता.
Imgflip और Imgur पर मिले, "अपने-आप चलने की सुविधा" के तौर पर टैग किए गए इंटरनेट मेम.

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

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

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

मीडिया में दिलचस्पी का इंडेक्स

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

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

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

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

about://media-engagement इंटरनल पेज का स्क्रीनशॉट.
Chrome में about://media-engagement के इंटरनल पेज का स्क्रीनशॉट.

डेवलपर स्विच

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

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

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

iframe का ऐक्सेस देना

अनुमतियों की नीति की मदद से, डेवलपर ब्राउज़र की सुविधाओं और एपीआई को चुनिंदा तौर पर चालू और बंद कर सकते हैं. जब किसी ऑरिजिन को वीडियो अपने-आप चलने की अनुमति मिल जाती है, तो वह वीडियो अपने-आप चलने की अनुमतियों की नीति की मदद से, क्रॉस-ऑरिजिन iframes को वह अनुमति दे सकता है. ध्यान दें कि वीडियो अपने-आप चलने की सुविधा, डिफ़ॉल्ट रूप से चालू रहती है एक ही ऑरिजिन वाले 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 DOMException के साथ वादा अस्वीकार कर दिया जाएगा. साथ ही, वीडियो अपने-आप चलने की सुविधा वाले एट्रिब्यूट को भी अनदेखा कर दिया जाएगा.

उदाहरण

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

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

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

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

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

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

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

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

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

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

यह देखने के लिए कि क्या आपको हमेशा Play फ़ंक्शन से मिलने वाले Promise को देखना चाहिए इसे अस्वीकार कर दिया गया था:

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 playsinline autoplay>
<button id="unmuteButton"></button>

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

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

Web Audio

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

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

// Existing code unchanged.
window.onload = function() {
  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 के लिए, ऑटोप्ले की नीति के इन नियमों के लिए, वेब ऑडियो चलाने की सुविधा को ठीक करने वाला छोटा पुल रिक्वेस्ट देखें.