HTMLMediaElement：play() 方法

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用 2015 年 7 月.

该 HTMLMediaElement play() 方法尝试开始媒体播放。它返回一个 Promise，当播放成功开始时，该 Promise 将被解析。

由于任何原因（例如权限问题）导致播放失败，都会导致 Promise 被拒绝。

语法

js
play()

参数

无。

返回值

一个 Promise，当播放开始时被解析，或者如果由于任何原因无法开始播放而被拒绝。

注意：2019 年之前发布的浏览器可能不会从 play() 返回值。

异常

Promise 的拒绝处理程序被调用，其中 DOMException 对象作为其唯一的输入参数传递（而不是抛出传统的异常）。可能的错误包括

NotAllowedError DOMException

如果用户代理（浏览器）或操作系统不允许在当前上下文或情况下播放媒体，则提供。例如，浏览器可能要求用户通过点击“播放”按钮来显式启动媒体播放，因为存在 权限策略。

NotSupportedError DOMException

如果媒体源（例如，可以指定为 MediaStream、MediaSource、Blob 或 File）不表示受支持的媒体格式，则提供。

可能会报告其他异常，具体取决于浏览器实现细节、媒体播放器实现等。

使用说明

尽管“自动播放”一词通常被认为是指在页面加载后立即开始播放媒体的页面，但 Web 浏览器的自动播放策略也适用于任何脚本启动的媒体播放，包括对 play() 的调用。

如果 用户代理 配置为不允许自动或脚本启动的媒体播放，则调用 play() 将导致返回的 Promise 立即被拒绝，并显示 NotAllowedError。网站应准备好处理这种情况。例如，网站不应提供假设播放已自动开始的用户界面，而应根据返回的 Promise 是否已完成或拒绝来更新其 UI。有关更多信息，请参阅下面的 示例。

注意：play() 方法可能会导致系统提示用户授予播放媒体的权限，从而导致在解析返回的 Promise 之前可能存在延迟。请确保您的代码不期望立即响应。

有关自动播放和自动播放阻止的更深入信息，请参阅我们的文章 媒体和 Web Audio API 的自动播放指南。

示例

此示例演示如何确认播放已开始以及如何优雅地处理被阻止的自动播放

js
let videoElem = document.getElementById("video");
let playButton = document.getElementById("playbutton");

playButton.addEventListener("click", handlePlayButton, false);
playVideo();

async function playVideo() {
  try {
    await videoElem.play();
    playButton.classList.add("playing");
  } catch (err) {
    playButton.classList.remove("playing");
  }
}

function handlePlayButton() {
  if (videoElem.paused) {
    playVideo();
  } else {
    videoElem.pause();
    playButton.classList.remove("playing");
  }
}

在此示例中，视频的播放由 async playVideo() 函数切换打开和关闭。它尝试播放视频，如果成功，则将 playButton 元素的类名设置为 "playing"。如果播放未能启动，则 playButton 元素的类将被清除，恢复其默认外观。这通过监视 play() 返回的 Promise 的解析或拒绝来确保播放按钮与实际播放状态匹配。

此示例在执行时，首先收集对 <video> 元素以及用于切换播放打开和关闭的 <button> 的引用。然后，它为播放切换按钮上的 click 事件设置事件处理程序，并尝试通过调用 playVideo() 自动开始播放。

您可以在 Glitch 上实时试用或重新混合此示例。

规范

规范
HTML 标准
# dom-media-play-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅