1. Web
  2. Web API
  3. Navigator
  4. getAutoplayPolicy()

Navigator: getAutoplayPolicy() 方法

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

自動播放策略檢測 API 的 getAutoplayPolicy() 方法提供了有關媒體元素和音訊上下文的自動播放是否被允許、不允許或僅在音訊靜音時才允許的資訊。

應用程式可以使用此資訊提供適當的使用者體驗。例如，如果使用者代理策略只允許自動播放無聲內容，應用程式可能會將影片靜音，以便它們仍然可以自動播放。

該方法可用於獲取文件中特定型別的所有項的寬泛自動播放策略，或特定媒體元素或音訊上下文的自動播放策略。

語法

js
// Test autoplay policy for a particular media playing feature
getAutoplayPolicy(type)

// Test autoplay support for a specific element or context
getAutoplayPolicy(element)
getAutoplayPolicy(context)

引數

呼叫該方法時必須且只能傳入以下三個引數中的一個：

type 可選

一個字串，指示需要寬泛自動播放策略的媒體播放功能。

支援的值為

mediaelement

獲取文件中媒體元素的寬泛自動播放策略。媒體元素是 HTMLMediaElement 派生物件，例如 HTMLAudioElement 和 HTMLVideoElement，以及它們對應的標籤 <audio> 和 <video>。

audiocontext

獲取文件中 Web Audio API 播放器的寬泛自動播放策略。

element 可選

一個特定的媒體元素。這必須是 HTMLMediaElement，包括派生元素，例如 HTMLVideoElement 和 HTMLAudioElement。

context 可選

一個特定的 AudioContext。

返回值

一個字串，指示指定媒體功能型別、元素或上下文的自動播放策略。這將是一個包含以下值之一的字串

allowed

允許自動播放。

allowed-muted

僅允許自動播放無聲媒體。這包括沒有音軌的媒體，或音訊已靜音的媒體。

disallowed

不允許自動播放。

請注意，為 type 引數返回的自動播放策略是所指示型別專案的寬泛策略。在頁面載入時，所有相同型別的專案都將具有相同的策略。一旦使用者與頁面/站點互動，在某些瀏覽器上，單個專案可能會具有與相應型別不同的策略。

異常

TypeError

傳遞給方法的物件不是允許的型別。允許的型別包括 HTMLMediaElement（或派生元素，例如 HTMLVideoElement 和 HTMLAudioElement），或 AudioContext。

描述

"自動播放"是指任何導致內容在使用者沒有明確請求播放開始的情況下開始播放的功能。這包括 HTML <video> 和 <audio> 元素中的 autoplay 屬性，以及在沒有任何使用者互動的情況下使用 JavaScript 程式碼啟動播放。

使用者代理通常會阻止自動播放，或只允許無聲內容自動播放，因為頁面首次載入時意想不到的聲音可能會導致刺耳和不愉快的使用者體驗。用於確定內容是否可以自動播放，或只播放無聲內容的機制，在不同的使用者代理之間有所不同。

getAutoplayPolicy() 方法提供了一種標準機制來確定特定使用者代理自動播放特定型別或內容的策略。這使得應用程式可以進行定製，例如在不允許自動播放有聲內容的網站上自動靜音影片，或修改應用程式以在沒有自動播放的情況下執行。

建議的使用方法是在頁面載入時（或在建立內容播放元素之前）呼叫它，指定要檢查的功能型別，然後根據結果配置媒體元素的自動播放。例如，如果應用程式希望自動播放帶有音軌的影片元素，您可以使用以下程式碼在只允許播放無聲內容時將影片靜音。

js
if (navigator.getAutoplayPolicy("mediaelement") === "allowed") {
  // Do nothing. The content can autoplay.
} else if (navigator.getAutoplayPolicy("mediaelement") === "allowed-muted") {
  // Mute the video so it can autoplay.
} else {
  // Autoplay disallowed.
  // Add a play button to the video element.
}

該方法也可以用於檢查特定媒體元素或音訊上下文的自動播放策略。如下所示，程式碼看起來完全相同，只是您傳入的是特定項而不是 type 字串。

js
const video = document.getElementById("video_element_id");
if (navigator.getAutoplayPolicy(video) === "allowed") {
  // Do nothing. The content can autoplay.
} else if (navigator.getAutoplayPolicy(video) === "allowed-muted") {
  // Mute the video so it can autoplay.
} else {
  // Autoplay disallowed.
  // Add a play button to the video element.
}

在頁面載入時，在使用者與頁面或站點互動之前，型別和單個專案的自動播放策略將是相同的。使用者與站點、頁面或特定元素互動後，整個 type 的自動播放策略可能會改變。也可能某個特定專案的策略會改變，即使 type 的總體策略沒有改變。

無法收到自動播放策略已更改的通知。因此，雖然您可以在任何時候檢查型別或專案的策略，但通常您只會在頁面載入時或嘗試播放內容之前這樣做。

示例

檢查功能是否受支援

下面的程式碼展示瞭如何檢查 navigator.getAutoplayPolicy() 是否受支援

js
if (!navigator.getAutoplayPolicy) {
  log.textContent = "navigator.getAutoplayPolicy() not supported.";
} else {
  log.textContent = "navigator.getAutoplayPolicy() is supported.";
}

在此頁面上執行程式碼的結果是

測試媒體元素型別的自動播放策略

此示例演示瞭如何檢查媒體元素型別的自動播放策略。

此程式碼建立了一個帶有 autoplay 屬性且預設未靜音的影片元素。如果自動播放策略為 "allowed-muted"，則影片將被靜音以允許其播放。

HTML

下面的 HTML 有一個用作報告日誌的 div 元素，並顯示一個帶有 autoplay 屬性的 <video>。它預設不應該靜音，如果自動播放未被阻止，則應該自動播放。

html
<div id="reportResult"></div>
<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  id="bunny_vid"
  autoplay
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a> and
  watch it with your favorite video player!
</video>

JavaScript

此程式碼報告 getAutoplayPolicy() 方法是否受支援，如果受支援，則報告媒體元素的策略。

如果策略是 allowed-muted，則只能播放靜音影片。在這種情況下，我們新增一些文字解釋正在發生的事情並使影片靜音。

js
const log = document.getElementById("reportResult");
const video = document.getElementById("bunny_vid");

if (!navigator.getAutoplayPolicy) {
  log.textContent =
    "navigator.getAutoplayPolicy() not supported. It may or may not autoplay, depending on the browser!";
} else {
  log.textContent = `Autoplay policy for media elements is: ${navigator.getAutoplayPolicy(
    "mediaelement",
  )}. `;

  if (navigator.getAutoplayPolicy("mediaelement") === "allowed-muted") {
    // Mute the video so it can autoplay
    video.muted = true;
    log.textContent += "Video has been muted to allow it to autoplay.";
  }
}

請注意，您也可以類似地檢查 allowed 和 disallowed。

結果

影片顯示在下方，以及有關 getAutoplayPolicy() 方法是否受支援的資訊，如果受支援，則顯示策略。

如果支援 getAutoplayPolicy() 並且策略是 allowed，影片將自動播放並有聲音。如果策略是 allowed-muted，影片將無聲播放。

請注意，如果不支援 getAutoplayPolicy()，影片將自動播放音訊或不播放。程式碼無法控制此行為：您只能聽任瀏覽器實現！

測試特定媒體元素的自動播放策略

此示例展示瞭如何檢查特定媒體元素是否會自動播放。它與上一個示例幾乎完全相同（檢查 AudioContext 也會類似）。請注意，即使對 mediaelement 型別的檢查表明自動播放是 disallowed，特定元素也可能自動播放；換句話說，檢查特定元素更可靠（儘管在頁面載入時無關緊要）。

此程式碼建立了一個帶有 autoplay 屬性的影片元素。如果自動播放策略為 "allowed-muted"，則影片將被靜音以允許其播放。

HTML

下面的 HTML 有一個用作報告日誌的 div 元素，並顯示一個帶有 autoplay 屬性的 <video>。它預設不應該靜音，如果自動播放未被阻止，則應該自動播放。

html
<div id="reportResult"></div>
<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  id="bunny_vid"
  autoplay
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a> and
  watch it with your favorite video player!
</video>

JavaScript

此程式碼報告 getAutoplayPolicy() 方法是否受支援，如果受支援，則報告媒體元素的策略。

如果策略是 allowed-muted，則只能播放靜音影片，因此程式碼會將影片靜音。

js
const log = document.getElementById("reportResult");
const video = document.getElementById("bunny_vid");

if (!navigator.getAutoplayPolicy) {
  log.textContent =
    "navigator.getAutoplayPolicy() not supported. It may or may not autoplay, depending on the browser!";
} else {
  // Here we pass in the HTMLVideoElement to check
  log.textContent = `navigator.getAutoplayPolicy(video) === ${navigator.getAutoplayPolicy(
    "mediaelement",
  )}`;

  if (navigator.getAutoplayPolicy(video) === "allowed-muted") {
    // Mute the video so it can autoplay
    video.muted = true;
    log.textContent += "Video has been muted to allow it to autoplay.";
  }
}

結果

結果與上一個示例相同

  • 如果返回 allowed，影片應該帶聲音自動播放；如果返回 allowed-muted，則無聲播放。
  • 如果不支援 getAutoplayPolicy()，影片的自動播放行為僅取決於瀏覽器。

規範

規範
自動播放策略檢測
# dom-navigator-getautoplaypolicy

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者上次修改於 。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.