ऑटोप्ले

वीडियो के अपने-आप चलने की सुविधा, डेस्कटॉप और मोबाइल वेब डिवाइसों पर काम करती है.

Android और iPhone पर, Chrome 53 और iOS 10 पर अपने-आप वीडियो चलने की सुविधा इनलाइन म्यूट की गई है.

डेस्कटॉप के लिए Safari 11 ने अपने-आप चलने वाले वीडियो को मैनेज करने का तरीका बदल दिया है. Google Chrome ने अप्रैल 2018 में एक मिलता-जुलता बदलाव किया.

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

ब्राउज़र में, अपने-आप चलने की सुविधा या गड़बड़ी का पता लगाना

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

यह तरीका इस कोड स्निपेट में दिखाया गया है:

var contentVideo = document.getElementById('myVideo');
var promise = contentVideo.play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay worked!
  }).catch(error => {
    // Autoplay failed.
  });
}

कोड सबसे पहले, HTML5 वीडियो एलिमेंट पर play() को कॉल करता है, जो Promise दिखाता है. हमारे सैंपल में, Promise का इस्तेमाल, वीडियो अपने-आप चलने की सुविधा का पता लगाने और AdsRequest को सही तरीके से सेट करने के लिए किया जाता है.

ऑटोप्ले और IMA

IMA SDK AdsRequest के दो फ़ील्ड हैं, जो अपने-आप चलने की सुविधा के लिए ज़रूरी हैं: setAdWillAutoPlay और setAdWillPlayMuted. पहले विज्ञापन सर्वर यह पक्का करता है कि विज्ञापन सर्वर सिर्फ़ ऐसे विज्ञापन दिखाए जो अपने-आप चलने की अनुमति हों (अगर 'सही' पर सेट हो), और बाद वाला यह पक्का करता है कि विज्ञापन सर्वर सिर्फ़ वही विज्ञापन दिखाएं जिन्हें म्यूट या अनम्यूट किए गए मोड में शुरू किए जाने की अनुमति है. हमारा सैंपल, कॉन्टेंट वीडियो का इस्तेमाल इस बात के संकेत के रूप में करता है कि ब्राउज़र अपने-आप चलने की सुविधा देता है या नहीं. दो जांच करें, जिनसे तीन संभावित नतीजे मिलें:

ये जांच करने के लिए, कॉन्टेंट वाला वीडियो चलाएं और वापस मिले कोड को देखें Promise:

var adsInitialized, autoplayAllowed, autoplayRequiresMuted;

// Called on page load.
function init() {
  videoContent = document.getElementById('contentElement');
  playButton = document.getElementById('playButton');
  // Hide the play button unless we need click-to-play.
  playButton.style.display = 'none';
  // Add an event listener now in case we need to fall back to click-to-play.
  playButton.addEventListener('click', () => {
    adDisplayContainer.initialize();
    adsInitialized = true;
    videoContent.load();
    playAds();
  });
  // Create your AdsLoader and AdDisplayContainer here.
  setUpIMA();
  // Check if autoplay is supported.
  checkAutoplaySupport();
}

function checkAutoplaySupport() {
  var playPromise = videoContent.play();
  if (playPromise !== undefined) {
    playPromise.then(onAutoplayWithSoundSuccess).catch(onAutoplayWithSoundFail);
  }
}

function onAutoplayWithSoundSuccess() {
  // If we make it here, unmuted autoplay works.
  videoContent.pause();
  autoplayAllowed = true;
  autoplayRequiresMuted = false;
  autoplayChecksResolved();
}

function onAutoplayWithSoundFail() {
  // Unmuted autoplay failed. Now try muted autoplay.
  checkMutedAutoplaySupport();
}

function checkMutedAutoplaySupport() {
  videoContent.volume = 0;
  videoContent.muted = true;
  var playPromise = videoContent.play();
  if (playPromise !== undefined) {
    playPromise.then(onMutedAutoplaySuccess).catch(onMutedAutoplayFail);
  }
}

function onMutedAutoplaySuccess() {
  // If we make it here, muted autoplay works but unmuted autoplay does not.
  videoContent.pause();
  autoplayAllowed = true;
  autoplayRequiresMuted = true;
  autoplayChecksResolved();
}

function onMutedAutoplayFail() {
  // Both muted and unmuted autoplay failed. Fall back to click to play.
  videoContent.volume = 1;
  videoContent.muted = false;
  autoplayAllowed = false;
  autoplayRequiresMuted = false;
  autoplayChecksResolved();
}

function autoplayChecksResolved() {
  // Request video ads.
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = <YOUR_AD_TAG_URL>;

  ...

  adsRequest.setAdWillAutoPlay(autoplayAllowed);
  adsRequest.setAdWillPlayMuted(autoplayRequiresMuted);
  adsLoader.requestAds(adsRequest);
}

function onAdsManagerLoaded() {
  ...
  if (autoplayAllowed) {
    playAds();
  } else {
    playButton.style.display = 'block';
  }
}

function playAds() {
  try {
    if (!adsInitialized) {
      adDisplayContainer.initialize();
      adsInitialized = true;
    }
    adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
    adsManager.start();
  } catch (adError) {
    videoContent.play();
  }
}

iPhone पर अपने-आप वीडियो चलने की सुविधा

पिछले कोड के अलावा, iPhone पर अपने-आप चलने की सुविधा के लिए ज़रूरी है कि आप अपने वीडियो टैग में playsinline पैरामीटर जोड़ें.

index.html

<body>
  ...
  <video id="contentElement" playsinline muted>
    <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
  </video>
</body>

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

अपने-आप चलने वाले और ऑडियो विज्ञापन

यह देखना ज़रूरी है कि क्या कोई विज्ञापन अनुरोध सिर्फ़ ऑडियो विज्ञापन दिखाएगा. ऐसा तब ही होगा, जब इस बात की संभावना हो कि आपके विज्ञापन म्यूट होंगे. अगर ऐसी कोई संभावना है, तो हम इनमें से किसी एक का सुझाव देते हैं:

• सिर्फ़ वीडियो विज्ञापनों का अनुरोध करने के लिए, नीचे दिए गए VAST यूआरएल पैरामीटर ad_type=video को अपडेट करें (अगर आपके प्लेयर पर वीडियो चलता है). यूआरएल पैरामीटर के बारे में ज़्यादा जानने के लिए, यह Ad Manager गाइड देखें.
• विज्ञापनों को म्यूट करके दिखाने का विकल्प हटाएं.

IMA ऑडियो इंटिग्रेशन के बारे में ज़्यादा जानकारी के लिए, IMA ऑडियो विज्ञापन गाइड देखें.