Skip to content

Latest commit

 

History

History
660 lines (481 loc) · 27.8 KB

player.md

File metadata and controls

660 lines (481 loc) · 27.8 KB
Raw

Player

Kind: global class

new Player(tag, [options], [ready])

初始化一个播放器实例

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 播放器初始化完成后执行的函数，可选

player.poster([poster]) ⇒ boolean

获取或设置 poster 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 poster 的值

Param Type Description
[poster] string 封面图

player.preload([preload]) ⇒ boolean

获取或设置 preload 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 preload 的值

Param Type Description
[preload] string 自动下载策略，可选值为 none, metadata, auto

player.autoplay([autoplay]) ⇒ boolean

获取或设置 autoplay 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 autoplay 的值

Param Type Description
[autoplay] boolean 是否自动播放，默认 false，由于浏览器策略，移动端大多无法自动播放

player.loop([loop]) ⇒ boolean

获取或设置 loop 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 loop 的值

Param Type Description
[loop] boolean 是否循环播放，默认 false

player.muted([muted]) ⇒ boolean

获取或设置 muted 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 muted 的值

Param Type Description
[muted] boolean 是否静音，默认 false

player.defaultMuted([defaultMuted]) ⇒ boolean

获取或设置 defaultMuted 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 defaultMuted 的值

Param Type Description
[defaultMuted] boolean 是否默认静音，默认 false

player.controls([controls]) ⇒ boolean

获取或设置 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'

player.playsinline([playsinline]) ⇒ boolean

获取或设置 playsinline 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 playsinline 的值

Param Type Description
[playsinline] boolean 是否内联播放，IOS10 及以上有效，默认 true

player.playbackRate([playbackRate]) ⇒ boolean

获取或设置 playbackRate 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 playbackRate 的值

Param Type Description
[playbackRate] boolean 播放速率，默认为 1.0

player.defaultPlaybackRate([defaultPlaybackRate]) ⇒ boolean

获取或设置 defaultPlaybackRate 的值

Kind: instance method of Player
Returns: boolean - 不传参时返回当前 defaultPlaybackRate 的值

Param Type Description
[defaultPlaybackRate] boolean 默认播放速率，默认为 1.0

player.volume([volume]) ⇒ boolean

获取或设置 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

player.currentSrc() ⇒ string

获取 currentSrc 的值

Kind: instance method of Player
Returns: string - 当前视频链接

player.networkState() ⇒ number

获取 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 - 当前已缓冲的区间

player.readyState() ⇒ number

获取 readyState 的值

Kind: instance method of Player
Returns: number - 当前 readyState 的值
See: html spec dom-media-readystate for detail

player.seeking() ⇒ boolean

获取 seeking 的值

Kind: instance method of Player
Returns: boolean - 播放器是否正在跳转到某一时刻

player.duration() ⇒ number | NaN

获取 duration 的值

Kind: instance method of Player
Returns: number | NaN - 视频总时长

player.paused() ⇒ boolean

获取 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 - 当前可流畅切换的时间范围

player.ended() ⇒ boolean

获取 ended 的值

Kind: instance method of Player
Returns: boolean - 是否已播放完成

player.videoWidth() ⇒ number | NaN

获取 videoWidth 的值

Kind: instance method of Player
Returns: number | NaN - 视频原始宽度（注意不是播放器宽度）

player.videoHeight() ⇒ number | NaN

获取 videoHeight 的值

Kind: instance method of Player
Returns: number | NaN - 视频原始高度（注意不是播放器高度）

player.dispose()

销毁播放器

Kind: instance method of Player

player.width([value]) ⇒ number | NaN

获取或设置播放器的宽度

Kind: instance method of Player
Returns: number | NaN - 不传参数则返回播放器当前宽度

Param Type Description
[value] number 要设置的播放器宽度值，可选

player.height([value]) ⇒ number | NaN

获取或设置播放器的高度

Kind: instance method of Player
Returns: number | NaN - 不传参数则返回播放器当前高度

Param Type Description
[value] number 要设置的播放器高度值，可选

player.isFullscreen() ⇒ boolean

判断当前是否处于全屏状态

Kind: instance method of Player
Returns: boolean - 返回当前全屏状态

player.requestFullscreen()

进入全屏 会先尝试浏览器提供的全屏方法，如果没有对应方法，则进入由 css 控制的全屏样式

Kind: instance method of Player

player.exitFullscreen()

退出全屏

Kind: instance method of Player

player.play()

播放视频

Kind: instance method of Player

player.pause()

暂停播放

Kind: instance method of Player

player.load()

加载当前视频的资源，一般不需手动调用，链接更新时会自动加载

Kind: instance method of Player

player.reset()

重置播放器 会移除播放器的 src source 属性，并重置各 UI 样式

Kind: instance method of Player

player.currentTime([seconds]) ⇒ number

获取／设置当前时间

Kind: instance method of Player
Returns: number - 不传参数则返回视频当前时刻

Param Type Description
[seconds] number 以秒为单位，要设置的当前时间的值。可选

player.remainingTime() ⇒ number

获取视频剩下的时长

Kind: instance method of Player
Returns: number - 总时长 - 已播放时长 = 剩下的时长

player.bufferedEnd() ⇒ boolean

判断当前视频是否已缓冲到最后

Kind: instance method of Player
Returns: boolean - 当前视频是否已缓冲到最后

player.src([src]) ⇒ string

获取或设置当前视频的 src 属性的值

Kind: instance method of Player
Returns: string - 不传参数则返回当前视频的 src 或 currentSrc

Param Type Description
[src] string 要设置的 src 属性的值，可选

player.source([source]) ⇒ Array

获取或设置播放器的 source

Kind: instance method of Player
Returns: Array - 若不传参则获取 source 数据

Param Type Description
[source] Array 视频源，可选

"loadstart"

The user agent begins looking for media data

Kind: event emitted by Player
See: html spec event-media-loadstart for detail

"suspend"

The user agent is intentionally not currently fetching media data

Kind: event emitted by Player
See: html spec event-media-suspend for detail

"abort"

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

"error"

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

"emptied"

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

"stalled"

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

"loadedmetadata"

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

"loadeddata"

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

"canplay"

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

"canplaythrough"

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

"playing"

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

"waiting"

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

"seeking"

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

"seeked"

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

"ended"

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

"durationchange"

The duration attribute has just been updated

Kind: event emitted by Player
See: html spec event-media-durationchange for detail

"timeupdate"

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

"progress"

The user agent is fetching media data

Kind: event emitted by Player
See: html spec event-media-progress for detail

"play"

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

"pause"

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

"ratechange"

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

"resize"

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

"volumechange"

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

"firstplay"

在视频第一次播放时触发，只会触发一次

Kind: event emitted by Player

"fullscreenchange" (data)

在进入／退出全屏时触发

Kind: event emitted by Player

Param Type Description
data Object 全屏相关的数据
data.isFullscreen boolean 当前是否是全屏状态

"fullscreenerror"

在全屏时出错时触发

Kind: event emitted by Player

"srcchange" (src)

srcchange 时触发

Kind: event emitted by Player

Param Type Description
src string 更换后的视频地址