mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-10 21:06:15 -08:00
311 lines
9.2 KiB
Plaintext
311 lines
9.2 KiB
Plaintext
---
|
|
title: 实例事件
|
|
sidebar_position: 6
|
|
slug: /events
|
|
---
|
|
|
|
播放器的事件分为两种，一种视频的原生事件，另外一种是自定义的事件。原生事件来自 `video` 元素，是直接监听`video`元素的原始事件，为了让它和自定义事件区分，原生事件添加了前缀 `video:`
|
|
|
|
## 原生事件
|
|
|
|
更多信息请阅读 [Mozilla Video Events](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events)
|
|
|
|
| 事件名字 | 触发时间 |
|
|
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `video:canplay` | The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. |
|
|
| `video:canplaythrough` | The browser estimates it can play the media up to its end without stopping for content buffering. |
|
|
| `video:complete` | The rendering of an OfflineAudioContext is terminated. |
|
|
| `video:durationchange` | The duration attribute has been updated. |
|
|
| `video:emptied` | The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. |
|
|
| `video:ended` | Playback has stopped because the end of the media was reached. |
|
|
| `video:loadeddata` | The first frame of the media has finished loading. |
|
|
| `video:loadedmetadata` | The metadata has been loaded. |
|
|
| `video:pause` | Playback has been paused. |
|
|
| `video:play` | Playback has begun. |
|
|
| `video:playing` | Playback is ready to start after having been paused or delayed due to lack of data. |
|
|
| `video:progress` | Fired periodically as the browser loads a resource. |
|
|
| `video:ratechange` | The playback rate has changed. |
|
|
| `video:seeked` | A seek operation completed. |
|
|
| `video:seeking` | A seek operation began. |
|
|
| `video:stalled` | The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. |
|
|
| `video:suspend` | Media data loading has been suspended. |
|
|
| `video:timeupdate` | The time indicated by the currentTime attribute has been updated. |
|
|
| `video:volumechange` | The volume has changed. |
|
|
| `video:waiting` | Playback has stopped because of a temporary lack of data |
|
|
|
|
## 自定义事件
|
|
|
|
### ready
|
|
|
|
当实例初始化完成，并视频可以被播放时触发，只会触发一个，哪怕视频地址变化了
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('ready', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### play
|
|
|
|
在视频被播放后触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('play', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### pause
|
|
|
|
在视频被暂停后触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('pause', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### seek
|
|
|
|
在视频进行时间跳转时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('seek', (...args) => {
|
|
console.info(args);
|
|
});
|
|
|
|
art.on('ready', (...args) => {
|
|
art.seek = 5;
|
|
});
|
|
```
|
|
|
|
### volume
|
|
|
|
在视频音量变化时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('volume', (...args) => {
|
|
console.info(args);
|
|
});
|
|
|
|
art.on('ready', (...args) => {
|
|
art.volume = 0.5;
|
|
});
|
|
```
|
|
|
|
### destroy
|
|
|
|
在播放器实例被销毁时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('destroy', (...args) => {
|
|
console.info(args);
|
|
});
|
|
|
|
art.on('ready', (...args) => {
|
|
art.destroy();
|
|
});
|
|
```
|
|
|
|
### focus
|
|
|
|
在播放器获得焦点时触发，如点击了播放器
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('focus', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### blur
|
|
|
|
在播放器失去焦点时触发，如点击播放器以外的区域
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('blur', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### hover
|
|
|
|
在鼠标移动进播放器时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('hover', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### resize
|
|
|
|
在播放器尺寸变化时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
autoSize: true,
|
|
});
|
|
|
|
art.on('resize', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### mousemove
|
|
|
|
在鼠标经过播放器时触发，和`hover`不一样，它会触发多次
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('mousemove', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### url
|
|
|
|
在视频地址变化时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('url', (...args) => {
|
|
console.info(args);
|
|
});
|
|
|
|
art.on('ready', (...args) => {
|
|
art.url = '/assets/sample/video.mp4?t=0';
|
|
});
|
|
```
|
|
|
|
### fullscreen
|
|
|
|
在播放器窗口全屏时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
fullscreen: true,
|
|
});
|
|
|
|
art.on('fullscreen', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### fullscreenWeb
|
|
|
|
在播放器网页全屏时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
fullscreenWeb: true,
|
|
});
|
|
|
|
art.on('fullscreenWeb', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|
|
|
|
### hotkey
|
|
|
|
在快捷键被使用时触发
|
|
|
|
<div className="run-code">▶ Run Code</div>
|
|
|
|
```js
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.on('hotkey', (...args) => {
|
|
console.info(args);
|
|
});
|
|
```
|