Kind: global class
- Player
- new Player(tag, [options], [ready])
- .poster([poster]) ⇒
boolean
- .preload([preload]) ⇒
boolean
- .autoplay([autoplay]) ⇒
boolean
- .loop([loop]) ⇒
boolean
- .muted([muted]) ⇒
boolean
- .defaultMuted([defaultMuted]) ⇒
boolean
- .controls([controls]) ⇒
boolean
- .controlsList([controlsList]) ⇒
DOMTokenList
- .playsinline([playsinline]) ⇒
boolean
- .playbackRate([playbackRate]) ⇒
boolean
- .defaultPlaybackRate([defaultPlaybackRate]) ⇒
boolean
- .volume([volume]) ⇒
boolean
- .error() ⇒
MediaError
|null
- .currentSrc() ⇒
string
- .networkState() ⇒
number
- .buffered() ⇒
TimeRanges
- .readyState() ⇒
number
- .seeking() ⇒
boolean
- .duration() ⇒
number
|NaN
- .paused() ⇒
boolean
- .played() ⇒
TimeRanges
- .seekable() ⇒
TimeRanges
- .ended() ⇒
boolean
- .videoWidth() ⇒
number
|NaN
- .videoHeight() ⇒
number
|NaN
- .dispose()
- .width([value]) ⇒
number
|NaN
- .height([value]) ⇒
number
|NaN
- .isFullscreen() ⇒
boolean
- .requestFullscreen()
- .exitFullscreen()
- .play()
- .pause()
- .load()
- .reset()
- .currentTime([seconds]) ⇒
number
- .remainingTime() ⇒
number
- .bufferedEnd() ⇒
boolean
- .src([src]) ⇒
string
- .source([source]) ⇒
Array
- "loadstart"
- "suspend"
- "abort"
- "error"
- "emptied"
- "stalled"
- "loadedmetadata"
- "loadeddata"
- "canplay"
- "canplaythrough"
- "playing"
- "waiting"
- "seeking"
- "seeked"
- "ended"
- "durationchange"
- "timeupdate"
- "progress"
- "play"
- "pause"
- "ratechange"
- "resize"
- "volumechange"
- "firstplay"
- "fullscreenchange" (data)
- "fullscreenerror"
- "srcchange" (src)
初始化一个播放器实例
Param | Type | Description |
---|---|---|
tag | Element | string |
DOM 元素或其 id(如果是 video 标签,会将其已有属性作为参数) |
[options] | Object |
配置项,可选 |
[options.height] | number |
播放器高度 |
[options.width] | number |
播放器宽度 |
[options.loop] | boolean |
是否循环播放,默认 false |
[options.controls] | boolean |
是否有控制条,默认 false |
[options.controlsList] | string |
对原生控制条的一些设置,可选值为 nodownload nofullscreen noremoteplayback |
[options.playbackRate] | number |
视频播放速率,默认 1.0 |
[options.defaultPlaybackRate] | number |
视频默认播放速率,默认 1.0 |
[options.volume] | number |
声音大小,默认 1,取值应在 0~1 |
[options.muted] | boolean |
是否静音,默认 false |
[options.playsinline] | boolean |
是否使用内联的形式播放(即非全屏的形式),默认 true。仅 ios10 以上有效,在 ios10 以下,视频播放时会自动进入全屏 |
[options.poster] | string |
视频封面 |
[options.preload] | string |
视频预先下载资源的设置,可选值有以下 3 种(当然就算你设置了以下 3 种,最终结果也不一定符合预期,毕竟浏览器嘛,你懂的) - auto 浏览器自己决定 - metadata 仅下载 metadata(视频总时长、高宽等信息) - none 不要预下载 |
[options.src] | string |
视频链接 |
[options.source] | Array |
视频 source 标签。为 [{src: 'xxx', type: 'xxx'}] 的形式,type 可选 |
[ready] | function |
播放器初始化完成后执行的函数,可选 |
获取或设置 poster 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 poster 的值
Param | Type | Description |
---|---|---|
[poster] | string |
封面图 |
获取或设置 preload 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 preload 的值
Param | Type | Description |
---|---|---|
[preload] | string |
自动下载策略,可选值为 none, metadata, auto |
获取或设置 autoplay 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 autoplay 的值
Param | Type | Description |
---|---|---|
[autoplay] | boolean |
是否自动播放,默认 false,由于浏览器策略,移动端大多无法自动播放 |
获取或设置 loop 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 loop 的值
Param | Type | Description |
---|---|---|
[loop] | boolean |
是否循环播放,默认 false |
获取或设置 muted 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 muted 的值
Param | Type | Description |
---|---|---|
[muted] | boolean |
是否静音,默认 false |
获取或设置 defaultMuted 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 defaultMuted 的值
Param | Type | Description |
---|---|---|
[defaultMuted] | boolean |
是否默认静音,默认 false |
获取或设置 controls 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 controls 的值
Param | Type | Description |
---|---|---|
[controls] | boolean |
是否显示控制条,默认 false |
player.controlsList([controlsList]) ⇒ DOMTokenList
获取或设置 controlsList 的值
Kind: instance method of Player
Returns: DOMTokenList
- 不传参时返回当前 controlsList 的值
Param | Type | Description |
---|---|---|
[controlsList] | string |
对控制条的一些设置,可选值为 nodownload, nofullscreen, noremoteplayback 比如 'nodownload nofullscreen' |
获取或设置 playsinline 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 playsinline 的值
Param | Type | Description |
---|---|---|
[playsinline] | boolean |
是否内联播放,IOS10 及以上有效,默认 true |
获取或设置 playbackRate 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 playbackRate 的值
Param | Type | Description |
---|---|---|
[playbackRate] | boolean |
播放速率,默认为 1.0 |
获取或设置 defaultPlaybackRate 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 defaultPlaybackRate 的值
Param | Type | Description |
---|---|---|
[defaultPlaybackRate] | boolean |
默认播放速率,默认为 1.0 |
获取或设置 volume 的值
Kind: instance method of Player
Returns: boolean
- 不传参时返回当前 volume 的值
Param | Type | Description |
---|---|---|
[volume] | boolean |
播放速率,默认为 1,可选值为 0~1 |
player.error() ⇒ MediaError
| null
获取 error 的值
Kind: instance method of Player
Returns: MediaError
| null
- 出错时返回 MediaError 对象,否则返回 null
See: html spec mediaerror for detail
获取 currentSrc 的值
Kind: instance method of Player
Returns: string
- 当前视频链接
获取 networkState 的值
Kind: instance method of Player
Returns: number
- 当前播放器的网络状态
See: https://html.spec.whatwg.org/multipage/media.html#network-states
player.buffered() ⇒ TimeRanges
获取 buffered 的值
Kind: instance method of Player
Returns: TimeRanges
- 当前已缓冲的区间
获取 readyState 的值
Kind: instance method of Player
Returns: number
- 当前 readyState 的值
See: html spec dom-media-readystate for detail
获取 seeking 的值
Kind: instance method of Player
Returns: boolean
- 播放器是否正在跳转到某一时刻
获取 duration 的值
Kind: instance method of Player
Returns: number
| NaN
- 视频总时长
获取 paused 的值
Kind: instance method of Player
Returns: boolean
- 当前是否处于暂停状态
player.played() ⇒ TimeRanges
获取 played 的值
Kind: instance method of Player
Returns: TimeRanges
- 当前真正已播放过的时间范围,假设从时刻 A 直接跳到 B,A B 之间的时间并不算已经播放过
player.seekable() ⇒ TimeRanges
获取 seekable 的值
Kind: instance method of Player
Returns: TimeRanges
- 当前可流畅切换的时间范围
获取 ended 的值
Kind: instance method of Player
Returns: boolean
- 是否已播放完成
获取 videoWidth 的值
Kind: instance method of Player
Returns: number
| NaN
- 视频原始宽度(注意不是播放器宽度)
获取 videoHeight 的值
Kind: instance method of Player
Returns: number
| NaN
- 视频原始高度(注意不是播放器高度)
销毁播放器
Kind: instance method of Player
获取或设置播放器的宽度
Kind: instance method of Player
Returns: number
| NaN
- 不传参数则返回播放器当前宽度
Param | Type | Description |
---|---|---|
[value] | number |
要设置的播放器宽度值,可选 |
获取或设置播放器的高度
Kind: instance method of Player
Returns: number
| NaN
- 不传参数则返回播放器当前高度
Param | Type | Description |
---|---|---|
[value] | number |
要设置的播放器高度值,可选 |
判断当前是否处于全屏状态
Kind: instance method of Player
Returns: boolean
- 返回当前全屏状态
进入全屏 会先尝试浏览器提供的全屏方法,如果没有对应方法,则进入由 css 控制的全屏样式
Kind: instance method of Player
退出全屏
Kind: instance method of Player
播放视频
Kind: instance method of Player
暂停播放
Kind: instance method of Player
加载当前视频的资源,一般不需手动调用,链接更新时会自动加载
Kind: instance method of Player
重置播放器 会移除播放器的 src source 属性,并重置各 UI 样式
Kind: instance method of Player
获取/设置当前时间
Kind: instance method of Player
Returns: number
- 不传参数则返回视频当前时刻
Param | Type | Description |
---|---|---|
[seconds] | number |
以秒为单位,要设置的当前时间的值。可选 |
获取视频剩下的时长
Kind: instance method of Player
Returns: number
- 总时长 - 已播放时长 = 剩下的时长
判断当前视频是否已缓冲到最后
Kind: instance method of Player
Returns: boolean
- 当前视频是否已缓冲到最后
获取或设置当前视频的 src 属性的值
Kind: instance method of Player
Returns: string
- 不传参数则返回当前视频的 src 或 currentSrc
Param | Type | Description |
---|---|---|
[src] | string |
要设置的 src 属性的值,可选 |
获取或设置播放器的 source
Kind: instance method of Player
Returns: Array
- 若不传参则获取 source 数据
Param | Type | Description |
---|---|---|
[source] | Array |
视频源,可选 |
The user agent begins looking for media data
Kind: event emitted by Player
See: html spec event-media-loadstart for detail
The user agent is intentionally not currently fetching media data
Kind: event emitted by Player
See: html spec event-media-suspend for detail
The user agent stops fetching the media data before it is completely downloaded, but not due to an error
Kind: event emitted by Player
See: html spec event-media-abort for detail
An error occurs while fetching the media data or the type of the resource is not supported media format
Kind: event emitted by Player
See: html spec event-media-error for detail
A media element whose networkState was previously not in the NETWORK_EMPTY state has just switched to that state
Kind: event emitted by Player
See: html spec event-media-emptied for detail
The user agent is trying to fetch media data, but data is unexpectedly not forthcoming
Kind: event emitted by Player
See: html spec event-media-stalled for detail
The user agent has just determined the duration and dimensions of the media resource and the text tracks are ready
Kind: event emitted by Player
See: html spec event-media-loadedmetadata for detail
The user agent can render the media data at the current playback position for the first time
Kind: event emitted by Player
See: html spec event-media-loadeddata for detail
The user agent can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content
Kind: event emitted by Player
See: html spec event-media-canplay for detail
The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering
Kind: event emitted by Player
See: html spec event-media-canplaythrough for detail
Playback is ready to start after having been paused or delayed due to lack of media data
Kind: event emitted by Player
See: html spec event-media-playing for detail
Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course
Kind: event emitted by Player
See: html spec event-media-waiting for detail
The seeking IDL attribute changed to true, and the user agent has started seeking to a new position
Kind: event emitted by Player
See: html spec event-media-seeking for detail
The seeking IDL attribute changed to false after the current playback position was changed
Kind: event emitted by Player
See: html spec event-media-seeked for detail
Playback has stopped because the end of the media resource was reached
Kind: event emitted by Player
See: html spec event-media-ended for detail
The duration attribute has just been updated
Kind: event emitted by Player
See: html spec event-media-durationchange for detail
The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously
Kind: event emitted by Player
See: html spec event-media-timeupdate for detail
The user agent is fetching media data
Kind: event emitted by Player
See: html spec event-media-progress for detail
The element is no longer paused. Fired after the play() method has returned, or when the autoplay attribute has caused playback to begin
Kind: event emitted by Player
See: html spec event-media-play for detail
The element has been paused. Fired after the pause() method has returned
Kind: event emitted by Player
See: html spec event-media-pause for detail
Either the defaultPlaybackRate or the playbackRate attribute has just been updated
Kind: event emitted by Player
See: https://html.spec.whatwg.org/multipage/media.html#event-media-ratechange
One or both of the videoWidth and videoHeight attributes have just been updated
Kind: event emitted by Player
See: html spec event-media-resize for detail
Either the volume attribute or the muted attribute has changed. Fired after the relevant attribute's setter has returned
Kind: event emitted by Player
See: html spec event-media-volumechange for detail
在视频第一次播放时触发,只会触发一次
Kind: event emitted by Player
在进入/退出全屏时触发
Kind: event emitted by Player
Param | Type | Description |
---|---|---|
data | Object |
全屏相关的数据 |
data.isFullscreen | boolean |
当前是否是全屏状态 |
在全屏时出错时触发
Kind: event emitted by Player
srcchange 时触发
Kind: event emitted by Player
Param | Type | Description |
---|---|---|
src | string |
更换后的视频地址 |