此页面由 Cloud Translation API 翻译。

自动播放

桌面设备和移动网络设备都支持自动播放功能。

从 Chrome 53 和 iOS 10 开始，Android 和 iPhone 支持内嵌静音自动播放。

桌面版 Safari 11 更改了其处理自动播放视频的方式。Google Chrome 在 2018 年 4 月进行了类似的更改。

如果您的网站目前会自动播放视频请更新您的视频，确保符合这些新政策新的尝试自动播放代码示例演示了如何尝试自动播放视频，并在自动播放失败时回退到点击播放。本指南将为您介绍这个新示例。

在浏览器中检测自动播放是成功还是失败

目前，网络浏览器不提供简单的查询来检查是否支持自动播放。检查视频是否可以自动播放的唯一方法是尝试播放视频。

以下代码段演示了此方法：

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。前者可确保广告服务器仅返回允许自动播放的广告（若设为 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 的默认全屏播放器中播放。

自动播放和音频广告

请务必考虑广告请求是否会返回纯音频广告（前提是您的广告有可能静音自动播放）。如果有机会，我们建议您采取以下措施之一：

将以下 VAST 网址参数 ad_type=video 更新为仅请求视频广告（如果您的播放器支持视频广告）。如需详细了解网址参数，请参阅此 Ad Manager 指南。
移除广告以静音启动的选项。

如需详细了解 IMA 音频集成，请参阅 IMA 音频广告指南。