التشغيل التلقائي

تتوفر ميزة التشغيل التلقائي على أجهزة الكمبيوتر المكتبي وأجهزة الويب على الأجهزة الجوّالة.

بدءًا من الإصدارين 53 من Chrome و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

تحتوي حزمة تطوير البرامج (SDK) لإعلانات الوسائط التفاعلية (IMA) 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>

يضمن هذا التغيير في تنسيق HTML تشغيل المحتوى في مشغّل فيديو مضمّن على iPhone، بدلاً من المشغّل التلقائي بملء الشاشة في أجهزة iPhone.

التشغيل التلقائي والإعلانات الصوتية

من المهم النظر في ما إذا كان طلب الإعلان سيعرض إعلانات صوتية فقط إذا كان هناك احتمال أن يتم كتم صوت إعلاناتك تلقائيًا. إذا كانت هناك فرصة لذلك، ننصحك باتّباع إحدى الخطوتَين التاليتَين:

• حدِّث معلمة عنوان URL التالية لنموذج عرض إعلانات الفيديو (VAST) ad_type=video لطلب إعلانات الفيديو فقط (إذا كان المشغّل يتيح عرض الفيديو). لمزيد من المعلومات عن معلمات عناوين URL، اطّلِع على دليل "مدير الإعلانات" هذا.
• أزِل خيار بدء الإعلانات مع كتم الصوت.

راجع دليل الإعلانات الصوتية لإعلانات الوسائط التفاعلية للحصول على مزيد من المعلومات عن عمليات دمج صوت إعلانات الوسائط التفاعلية.