Lecture automatique

La lecture automatique est compatible avec les ordinateurs et les appareils Web mobiles.

Depuis Chrome 53 et iOS 10, Android et iPhone sont compatibles avec la lecture automatique avec le son coupé intégré.

Safari 11 pour ordinateur a modifié la façon dont il gère les vidéos en lecture automatique. Google Chrome a effectué une modification similaire en avril 2018.

Si votre site Web lit automatiquement les vidéos, mettez-le à jour pour qu'il respecte ces nouvelles règles. Le nouvel exemple de code de tentative de lecture automatique montre comment lancer la lecture automatique d'une vidéo et utiliser le format click-to-play en cas d'échec de la lecture automatique. Ce guide vous présente le nouvel exemple.

Détecter les succès ou les échecs de lecture automatique dans un navigateur

Actuellement, les navigateurs Web ne proposent pas de requête simple pour vérifier si la lecture automatique est compatible ou non. Le seul moyen de vérifier si une vidéo peut être lue automatiquement est d'essayer de la lire.

Cette approche est illustrée dans l'extrait de code suivant:

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

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

Le code appelle d'abord play() sur un élément vidéo HTML5 qui renvoie un Promise. Dans notre exemple, Promise permet de détecter la fonctionnalité de lecture automatique et de définir AdsRequest de manière appropriée.

Lecture automatique et IMA

Le SDK IMA AdsRequest comporte deux champs pertinents pour la lecture automatique que vous devez fournir : setAdWillAutoPlay et setAdWillPlayMuted. La première garantit que l'ad server ne renvoie que les annonces pouvant être lues automatiquement (si la valeur est définie sur "true") et la seconde garantit que l'ad server ne renvoie que les annonces dont le son est activé ou désactivé. Notre exemple utilise la vidéo de contenu pour déterminer si le navigateur est compatible ou non avec la lecture automatique. Effectuez deux vérifications qui mènent à trois résultats potentiels:

Pour effectuer ces vérifications, essayez de lire la vidéo du contenu et examinez le Promise renvoyé:

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();
  }
}

Lecture automatique sur iPhone

En plus du code précédent, pour utiliser la lecture automatique sur iPhone, vous devez ajouter le paramètre playsinline à votre balise vidéo.

index.html

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

Cette modification du code HTML garantit que votre contenu est lu dans un lecteur vidéo intégré sur l'iPhone, au lieu du lecteur plein écran par défaut de l'iPhone.

Lecture automatique et annonces audio

Il est important de déterminer si une demande d'annonce ne renverra que des annonces audio s'il est possible que vos annonces soient lues automatiquement sans le son. Si cela se produit, nous vous recommandons d'effectuer l'une des opérations suivantes:

• Mettez à jour le paramètre d'URL VAST suivant ad_type=video pour ne demander que des annonces vidéo (si votre lecteur est compatible avec la vidéo). Pour en savoir plus sur les paramètres d'URL, consultez ce guide Ad Manager.
• Supprimez l'option permettant de couper le son des annonces au départ.

Consultez le guide des annonces audio IMA pour en savoir plus sur les intégrations audio IMA.