自動播放

電腦版和行動版網頁都支援自動播放功能。

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

程式碼會先對傳回 Promise 的 HTML5 影片元素呼叫 play()。在這個範例中，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 上自動播放影片

除了上述程式碼之外，您也必須在影片標記中加入 playsinline 參數，才能在 iPhone 上自動播放影片。

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 音訊廣告指南。