הפעלה אוטומטית

הפעלה אוטומטית נתמכת במחשב ובנייד.

החל מ-Chrome 53 ומ-iOS 10, מכשירי Android ו-iPhone תומכים בהפעלה אוטומטית מוטבעת במצב מושתק.

ב-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.
  });
}

הקוד קודם קורא ל-play() ברכיב וידאו של HTML5 שמחזיר Promise. בדוגמה שלנו, האפליקציה Promise משמשת לזיהוי יכולת של הפעלה אוטומטית ולהגדרת AdsRequest המתאים.

הפעלה אוטומטית ו-IMA

IMA SDK AdsRequest כולל שני שדות שרלוונטיים להפעלה אוטומטית, שנדרשים לך לספק: setAdWillAutoPlay ו-setAdWillPlayMuted. השיטה הראשונה מוודאת ששרת המודעות יחזיר רק מודעות שמורשות אוטומטית (אם מוגדרת כ-True), והמדיניות השנייה מוודאת ששרת המודעות מחזירה רק מודעות שאפשר להפעיל במצב מושתק או לא מושתק. הדוגמה שלנו משתמשת בסרטון התוכן כדי לציין אם הדפדפן תומכת בהפעלה אוטומטית. בצעו שתי בדיקות שמובילות לשלוש תוצאות אפשריות:

כדי לבצע את הבדיקות האלה, נסו להפעיל את סרטון התוכן ולבדוק את התוכן שהוחזר 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>

השינוי הזה ב-HTML מבטיח שהתוכן שלכם יופעל בסרטון מוטבע ב-iPhone, במקום בנגן ברירת המחדל של ה-iPhone במסך מלא.

הפעלה אוטומטית ומודעות אודיו

חשוב לבדוק אם בקשה להצגת מודעה תחזיר מודעות אודיו בלבד אם יש אפשרות שהמודעות שלך יושתקו באופן אוטומטי. אם יש הזדמנות כזו, מומלץ לבצע את אחת מהפעולות הבאות:

• עדכון הפרמטר הבא של כתובת URL מסוג VAST ad_type=video כדי לבקש סרטון בלבד מודעות (אם הנגן שלך תומך בווידאו). מידע נוסף על פרמטרים של כתובות URL כדאי לעיין במדריך של Ad Manager.
• צריך להסיר את האפשרות להפעלת מודעות במצב מושתק.

לעיון במדריך למודעות אודיו של IMA לקבלת מידע נוסף על שילובי אודיו של IMA.