HTMLMediaElement:canplay 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

canplay 事件会在用户代理可以播放媒体,但是估计没有加载足够的数据以流畅地播放媒体至结束(可能需要停顿来缓存更多内容)时触发。

此事件无法被取消也不会冒泡。

语法

在类似 addEventListener() 的方法中使用事件名,或者设置事件处理器属性。

js
addEventListener("canplay", (event) => {});

oncanplay = (event) => {};

事件类型

通用 Event

示例

这些示例为 HTMLMediaElement 的 canplay 事件添加了一个事件监听器。事件处理器会在事件被触发时发送一条信息。

使用 addEventListener()

js
const video = document.querySelector("video");

video.addEventListener("canplay", (event) => {
  console.log("视频可以开始播放,但是不一定能够完整地播放。");
});

使用 oncanplay 事件处理器属性:

js
const video = document.querySelector("video");

video.oncanplay = (event) => {
  console.log("视频可以开始播放,但是不一定能够完整地播放。");
};

规范

Specification
HTML
# event-media-canplay
HTML
# handler-oncanplay

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
canplay event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

相关事件

参见