HTMLMediaElement.play()

在此页

句法
用法注意事项
范例
规范
浏览器兼容性
另请参阅
相关话题

HTMLMediaElement play() method attempts to begin playback of the media. It returns a Promise which is resolved when playback has been successfully started. Failure to begin playback for any reason, such as permission issues, result in the promise being rejected.

句法

var promise = HTMLMediaElement.play();

参数

None.

返回值

A Promise which is resolved when playback has been started, or is rejected if for any reason playback cannot be started.

注意： Older browsers may not return a value from play() .

异常

The promise's rejection handler is called with an exception name passed in as its sole input parameter (as opposed to a traditional exception being thrown). Possible errors include:

NotAllowedError
NotSupportedError: The media source (which may be specified as a MediaStream , MediaSource , Blob ，或 File , for example) doesn't represent a supported media format.

Other exceptions may be reported, depending on browser implementation details, media player implementation, and so forth.

用法注意事项

Although the term "autoplay" is usually thought of as referring to pages that immediately begin playing media upon being loaded, web browsers' autoplay policies also apply to any script-initiated playback of media, including calls to play() .

若用户代理 is configured not to allow automatic or script-initiated playback of media, calling play() will cause the returned promise to be immediately rejected with a NotAllowedError . Web sites should be prepared to handle this situation. For example, a site should not present a user interface that assumes playback has begun automatically, but should instead update their UI based on whether the returned promise is resolved or rejected. See the 范例 below for more information.

注意： play() method may cause the user to be asked to grant permission to play the media, resulting in a possible delay before the returned promise is resolved. Be sure your code doesn't expect an immediate response.

For even more in-depth information about autoplay and autoplay blocking, see our article Autoplay guide for media and Web Audio APIs .

范例

This example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback:

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

In this example, playback of video is toggled off and on by the async playVideo() function. It tries to play the video, and if successful sets the class name of the playButton element to "playing" . If playback fails to start, the playButton element's class is cleared, restoring its default appearance. This ensures that the play button matches the actual state of playback by watching for the resolution or rejection of the Promise 返回通过 play() .

When this example is executed, it begins by collecting references to the <video> element as well as the <button> used to toggle playback on and off. It then sets up an event handler for the click event on the play toggle button and attempts to automatically begin playback by calling playVideo() .

You can try out or remix this example in real time on Glitch .

规范

规范	状态	注释
HTML 实时标准 The definition of 'play()' in that specification.	实时标准	Initial definition; living specification.
HTML5 The definition of 'play()' in that specification.	推荐	初始定义。

注意： The WHATWG and W3C versions of the specification differ (as of August, 2018) as to whether this method returns a Promise or nothing at all, respectively.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`play`	Chrome 1	Edge 12	Firefox 3.5	IE 9	Opera 10.5	Safari 6	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 6	Samsung Internet Android 1.0
返回 `Promise`	Chrome 50	Edge 17	Firefox 53	IE No	Opera 37	Safari 10	WebView Android 50	Chrome Android 50	Firefox Android 53	Opera Android 37	Safari iOS 10	Samsung Internet Android 5.0

在此页

句法

参数

返回值

异常

用法注意事项

范例

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题