实例事件 Permalink to "实例事件"

播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件

监听事件：

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('video:canplay', () => {
    console.info('video:canplay');
});

只监听一次事件：

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.once('video:canplay', () => {
    console.info('video:canplay');
});

手动触发事件：

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.emit('focus');

移除事件：

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

const onReady = () => {
    console.info('ready');
    art.off('ready', onReady);
}

art.on('ready', onReady);

全部事件请参考以下地址：

artplayer/types/events.d.ts

`ready` Permalink to "`ready`"

当播放器首次可以播放器时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    console.info('ready');
});

`restart` Permalink to "`restart`"

当播放器切换地址后并可以播放时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.url = '/assets/sample/video.mp4'
});

art.on('restart', (url) => {
    console.info('restart', url);
});

`pause` Permalink to "`pause`"

当播放器暂停时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('pause', () => {
    console.info('pause');
});

`play` Permalink to "`play`"

当播放器播放时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('play', () => {
    console.info('play');
});

`hotkey` Permalink to "`hotkey`"

当播放器热键被按下时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('hotkey', (event) => {
    console.info('hotkey', event);
});

`destroy` Permalink to "`destroy`"

当播放器销毁时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.destroy();
});

art.on('destroy', () => {
    console.info('destroy');
});

`focus` Permalink to "`focus`"

当播放器获得焦点时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('focus', (event) => {
    console.info('focus', event);
});

`blur` Permalink to "`blur`"

当播放器失去焦点时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('blur', (event) => {
    console.info('blur', event);
});

`dblclick` Permalink to "`dblclick`"

当播放器被双击时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('dblclick', (event) => {
    console.info('dblclick', event);
});

`click` Permalink to "`click`"

当播放器被单击时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('click', (event) => {
    console.info('click', event);
});

`error` Permalink to "`error`"

当播放器加载视频发生错误时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/404.mp4',
});

art.on('error', (error, reconnectTime) => {
    console.info(error, reconnectTime);
});

`hover` Permalink to "`hover`"

当播放器被鼠标移出或者移入时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('hover', (state, event) => {
    console.info('hover', state, event);
});

`mousemove` Permalink to "`mousemove`"

当播放器被鼠标经过时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('mousemove', (event) => {
    console.info('mousemove', event);
});

`resize` Permalink to "`resize`"

当播放器尺寸变化时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('resize', () => {
    console.info('resize');
});

`view` Permalink to "`view`"

当播放器出现在视口时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('view', (state) => {
    console.info('view', state);
});

`lock` Permalink to "`lock`"

在移动端，当锁定的状态发生变化时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    lock: true,
});

art.on('lock', (state) => {
    console.info('lock', state);
});

`aspectRatio` Permalink to "`aspectRatio`"

当播放器长宽比变化时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    aspectRatio: true,
    setting: true,
});

art.on('aspectRatio', (aspectRatio) => {
    console.info('aspectRatio', aspectRatio);
});

`autoHeight` Permalink to "`autoHeight`"

当播放器自动设置高度时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.autoHeight();
});

art.on('autoHeight', (height) => {
    console.info('autoHeight', height);
});

`autoSize` Permalink to "`autoSize`"

当播放器自动设置尺寸时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    autoSize: true,
});

art.on('autoSize', () => {
    console.info('autoSize');
});

`flip` Permalink to "`flip`"

当播放器发生翻转时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    flip: true,
    setting: true,
});

art.on('flip', (flip) => {
    console.info('flip', flip);
});

`fullscreen` Permalink to "`fullscreen`"

当播放器发生窗口全屏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreen: true,
});

art.on('fullscreen', (state) => {
    console.info('fullscreen', state);
});

`fullscreenError` Permalink to "`fullscreenError`"

当播放器发生窗口全屏错误时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
	art.fullscreen = true;
});

art.on('fullscreenError', (event) => {
    console.info('fullscreenError', event);
});

`fullscreenWeb` Permalink to "`fullscreenWeb`"

当播放器发生网页全屏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreenWeb: true,
});

art.on('fullscreenWeb', (state) => {
    console.info('fullscreenWeb', state);
});

`mini` Permalink to "`mini`"

当播放器进入迷你模式时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('ready', () => {
    art.mini = true;
});

art.on('mini', (state) => {
    console.info('mini', state);
});

`pip` Permalink to "`pip`"

当播放器进入画中画时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    pip: true,
});

art.on('pip', (state) => {
    console.info('pip', state);
});

`screenshot` Permalink to "`screenshot`"

当播放器被截图时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    screenshot: true,
});

art.on('screenshot', (dataUri) => {
    console.info('screenshot', dataUri);
});

`seek` Permalink to "`seek`"

当播放器发生时间跳转时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('seek', (currentTime) => {
    console.info('seek', currentTime);
});

`subtitleOffset` Permalink to "`subtitleOffset`"

当播放器发生字幕偏移时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitleOffset: true,
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
    setting: true,
});

art.on('subtitleOffset', (offset) => {
    console.info('subtitleOffset', offset);
});

`subtitleBeforeUpdate` Permalink to "`subtitleBeforeUpdate`"

当字幕更新前触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

art.on('subtitleBeforeUpdate', (cues) => {
    console.info('subtitleBeforeUpdate', cues);
});

`subtitleAfterUpdate` Permalink to "`subtitleAfterUpdate`"

当字幕更新后触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

art.on('subtitleAfterUpdate', (cues) => {
    console.info('subtitleAfterUpdate', cues);
});

`subtitleLoad` Permalink to "`subtitleLoad`"

当字幕加载时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    subtitle: {
        url: '/assets/sample/subtitle.srt',
    },
});

art.on('subtitleLoad', (option, cues) => {
    console.info('subtitleLoad', cues, option);
});

`info` Permalink to "`info`"

当信息面板显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('info', (state) => {
    console.log(state);
});

`layer` Permalink to "`layer`"

当自定义层显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('layer', (state) => {
    console.log(state);
});

`loading` Permalink to "`loading`"

当加载器显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('loading', (state) => {
    console.log(state);
});

`mask` Permalink to "`mask`"

当遮罩层显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('mask', (state) => {
    console.log(state);
});

`subtitle` Permalink to "`subtitle`"

当字幕层显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('subtitle', (state) => {
    console.log(state);
});

`contextmenu` Permalink to "`contextmenu`"

当右键菜单显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('contextmenu', (state) => {
    console.log(state);
});

`control` Permalink to "`control`"

当控制器显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('control', (state) => {
    console.log(state);
});

`setting` Permalink to "`setting`"

当设置面板显示或隐藏时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
});

art.on('setting', (state) => {
    console.log(state);
});

`muted` Permalink to "`muted`"

当静音的状态变化时触发

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('muted', (state) => {
    console.log(state);
});

`keydown` Permalink to "`keydown`"

监听来自 document 的 keydown 事件

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
});

art.on('keydown', (event) => {
    console.log(event.code);
});

`video:canplay` Permalink to "`video:canplay`"

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

`video:canplaythrough` Permalink to "`video:canplaythrough`"

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

`video:complete` Permalink to "`video:complete`"

OfflineAudioContext 渲染完成

`video:durationchange` Permalink to "`video:durationchange`"

duration 属性的值改变时触发

`video:emptied` Permalink to "`video:emptied`"

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

`video:ended` Permalink to "`video:ended`"

视频停止播放，因为 media 已经到达结束点

`video:error` Permalink to "`video:error`"

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

`video:loadeddata` Permalink to "`video:loadeddata`"

media 中的首帧已经完成加载

`video:loadedmetadata` Permalink to "`video:loadedmetadata`"

已加载元数据

`video:pause` Permalink to "`video:pause`"

播放已暂停

`video:play` Permalink to "`video:play`"

播放已开始

`video:playing` Permalink to "`video:playing`"

由于缺乏数据而暂停或延迟后，播放准备开始

`video:progress` Permalink to "`video:progress`"

在浏览器加载资源时周期性触发

`video:ratechange` Permalink to "`video:ratechange`"

播放速率发生变化

`video:seeked` Permalink to "`video:seeked`"

跳帧（seek）操作完成

`video:seeking` Permalink to "`video:seeking`"

跳帧（seek）操作开始

`video:stalled` Permalink to "`video:stalled`"

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

`video:suspend` Permalink to "`video:suspend`"

媒体数据加载已暂停

`video:timeupdate` Permalink to "`video:timeupdate`"

currentTime 属性指定的时间发生变化

`video:volumechange` Permalink to "`video:volumechange`"

音量发生变化

`video:waiting` Permalink to "`video:waiting`"

由于暂时缺少数据，播放已停止

实例事件 Permalink to "实例事件"

ready Permalink to "`ready`"

restart Permalink to "`restart`"

pause Permalink to "`pause`"

play Permalink to "`play`"

hotkey Permalink to "`hotkey`"

destroy Permalink to "`destroy`"

focus Permalink to "`focus`"

blur Permalink to "`blur`"

dblclick Permalink to "`dblclick`"

click Permalink to "`click`"

error Permalink to "`error`"

hover Permalink to "`hover`"

mousemove Permalink to "`mousemove`"

resize Permalink to "`resize`"

view Permalink to "`view`"

lock Permalink to "`lock`"

aspectRatio Permalink to "`aspectRatio`"

autoHeight Permalink to "`autoHeight`"

autoSize Permalink to "`autoSize`"

flip Permalink to "`flip`"

fullscreen Permalink to "`fullscreen`"

fullscreenError Permalink to "`fullscreenError`"

fullscreenWeb Permalink to "`fullscreenWeb`"

mini Permalink to "`mini`"

pip Permalink to "`pip`"

screenshot Permalink to "`screenshot`"

seek Permalink to "`seek`"

subtitleOffset Permalink to "`subtitleOffset`"

subtitleBeforeUpdate Permalink to "`subtitleBeforeUpdate`"

subtitleAfterUpdate Permalink to "`subtitleAfterUpdate`"

subtitleLoad Permalink to "`subtitleLoad`"

info Permalink to "`info`"

layer Permalink to "`layer`"

loading Permalink to "`loading`"

mask Permalink to "`mask`"

subtitle Permalink to "`subtitle`"

contextmenu Permalink to "`contextmenu`"

control Permalink to "`control`"

setting Permalink to "`setting`"

muted Permalink to "`muted`"

keydown Permalink to "`keydown`"

video:canplay Permalink to "`video:canplay`"

video:canplaythrough Permalink to "`video:canplaythrough`"

video:complete Permalink to "`video:complete`"

video:durationchange Permalink to "`video:durationchange`"

video:emptied Permalink to "`video:emptied`"

video:ended Permalink to "`video:ended`"

video:error Permalink to "`video:error`"

video:loadeddata Permalink to "`video:loadeddata`"

video:loadedmetadata Permalink to "`video:loadedmetadata`"

video:pause Permalink to "`video:pause`"

video:play Permalink to "`video:play`"

video:playing Permalink to "`video:playing`"

video:progress Permalink to "`video:progress`"

video:ratechange Permalink to "`video:ratechange`"

video:seeked Permalink to "`video:seeked`"

video:seeking Permalink to "`video:seeking`"

video:stalled Permalink to "`video:stalled`"

video:suspend Permalink to "`video:suspend`"

video:timeupdate Permalink to "`video:timeupdate`"

video:volumechange Permalink to "`video:volumechange`"

video:waiting Permalink to "`video:waiting`"

`ready` Permalink to "`ready`"

`restart` Permalink to "`restart`"

`pause` Permalink to "`pause`"

`play` Permalink to "`play`"

`hotkey` Permalink to "`hotkey`"

`destroy` Permalink to "`destroy`"

`focus` Permalink to "`focus`"

`blur` Permalink to "`blur`"

`dblclick` Permalink to "`dblclick`"

`click` Permalink to "`click`"

`error` Permalink to "`error`"

`hover` Permalink to "`hover`"

`mousemove` Permalink to "`mousemove`"

`resize` Permalink to "`resize`"

`view` Permalink to "`view`"

`lock` Permalink to "`lock`"

`aspectRatio` Permalink to "`aspectRatio`"

`autoHeight` Permalink to "`autoHeight`"

`autoSize` Permalink to "`autoSize`"

`flip` Permalink to "`flip`"

`fullscreen` Permalink to "`fullscreen`"

`fullscreenError` Permalink to "`fullscreenError`"

`fullscreenWeb` Permalink to "`fullscreenWeb`"

`mini` Permalink to "`mini`"

`pip` Permalink to "`pip`"

`screenshot` Permalink to "`screenshot`"

`seek` Permalink to "`seek`"

`subtitleOffset` Permalink to "`subtitleOffset`"

`subtitleBeforeUpdate` Permalink to "`subtitleBeforeUpdate`"

`subtitleAfterUpdate` Permalink to "`subtitleAfterUpdate`"

`subtitleLoad` Permalink to "`subtitleLoad`"

`info` Permalink to "`info`"

`layer` Permalink to "`layer`"

`loading` Permalink to "`loading`"

`mask` Permalink to "`mask`"

`subtitle` Permalink to "`subtitle`"

`contextmenu` Permalink to "`contextmenu`"

`control` Permalink to "`control`"

`setting` Permalink to "`setting`"

`muted` Permalink to "`muted`"

`keydown` Permalink to "`keydown`"

`video:canplay` Permalink to "`video:canplay`"

`video:canplaythrough` Permalink to "`video:canplaythrough`"

`video:complete` Permalink to "`video:complete`"

`video:durationchange` Permalink to "`video:durationchange`"

`video:emptied` Permalink to "`video:emptied`"

`video:ended` Permalink to "`video:ended`"

`video:error` Permalink to "`video:error`"

`video:loadeddata` Permalink to "`video:loadeddata`"

`video:loadedmetadata` Permalink to "`video:loadedmetadata`"

`video:pause` Permalink to "`video:pause`"

`video:play` Permalink to "`video:play`"

`video:playing` Permalink to "`video:playing`"

`video:progress` Permalink to "`video:progress`"

`video:ratechange` Permalink to "`video:ratechange`"

`video:seeked` Permalink to "`video:seeked`"

`video:seeking` Permalink to "`video:seeking`"

`video:stalled` Permalink to "`video:stalled`"

`video:suspend` Permalink to "`video:suspend`"

`video:timeupdate` Permalink to "`video:timeupdate`"

`video:volumechange` Permalink to "`video:volumechange`"

`video:waiting` Permalink to "`video:waiting`"