参数-事件

事件绑定

tp.on(event, handler)

tp.on('ended', function () {
  console.log('player ended')
})

绑定一次性事件

tp.once(event, handler)

tp.once('ended', function () {
  console.log('player ended')
})

视频事件： abort canplay canplaythrough durationchange emptied ended error loadeddata loadedmetadata loadstart mozaudioavailable pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting

视频事件以 HTML<video>元素为准。

播放器事件： screenshot destroy resize fullscreen fullscreen_cancel

事件注销

tp.off(event, handler)

const handler = function () {
  console.log('player ended')
}
tp.on('ended', handler)
tp.off('ended', handler)

手动触发

tp.emit(event, data)

tp.emit('ended')

参数

Tiny Player 的参数遵循 w3c 规范，同时支持原生 video 的参数，以下是 Tiny Player 的参数列表：

名称	默认值	描述
container	document.querySelector('.tiny-player')	播放器容器元素
src	-	视频链接
poster	-	视频封面
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
loop	false	视频循环播放
controls	true	是否显示控制栏
autoplay	false	视频自动播放
controlTarget	-	控制器的挂载目标
type	'auto'	视频类型，可选值：'auto'，'normal'，'hls'
preload	'auto'	预加载 ,可选值: 'auto' , 'none' , 'metadata'
muted	false	是否静音
playbackSpeed	1	播放速率
waterMarkShow	false	是否显示水印
waterMarkUrl	-	自定义水印地址
clipStart	-	视频片段的开始时间
clipEnd	-	视频片段的结束时间
handleVideoEndByOuter	false	是否由外部控制视频结束 ,用于视频片段播放 ,为 true 时，视频播放结束时不会触发 video end 事件

import TinyPlayer from 'tiny-player'

// 示例：实际使用的时候，很多参数都是可选的，只需要传入必要的参数即可，详情请查看文档
const tp = new TinyPlayer({
  container: document.querySelector('#tiny-player'), // 挂载节点
  poster: poster, // 封面地址
  controls: true, // 是否显示控制栏
  loop: true, // 循环播放
  volume: 0.9, // 音量
  playbackRate: 1, // 播放速率
  autoplay: false, // 自动播放
  controlOptions: {
    playTime: true, // 是否显示播放时间
    volumeControl: true, // 是否显示音量控制条
    fullScreenControl: true, // 是否显示全屏按钮
    mountTarget: null, // 挂载目标节点
    nativeControls: false, // 是否使用原生控制条
  },
  preload: 'metadata', // 预加载
  src: videoSource, // 视频地址
  type: 'hls', // 视频类型
  waterMarkShow: true, // 是否显示水印
  waterMarkUrl: '//assets.fedtop.com/picbed/202306091010648.png', // 自定义水印地址
  clipStart: 6, // 视频片段的开始时间
  clipEnd: 12, // 视频片段的结束时间
  // width: '800px', // 自定义宽度
  // height: '800px', // 自定义高度
  // "...":'...' // 开发中。。。
})

API

tp.play(): 播放视频
tp.pause(): 暂停视频
tp.seek(time: number): 跳转到特定时间
js
```
tp.seek(100)
```
1
tp.toggle(): 切换播放和暂停
tp.on(event: string, handler: function): 绑定视频和播放器事件
tp.once(event: string, handler: function): 绑定一次性时间事件
tp.off(event: string, handler: function): 解绑视频和播放器事件
tp.emit(event: string, data: any): 触发视频和播放器事件

tp.destroy(): 销毁播放器
tp.speed(rate: number): 设置视频速度
tp.volume(percentage: number, nostorage: boolean, nonotice: boolean): 设置视频音量
js
```
tp.volume(0.1, true, false)
```
1
tp.video: 原生 video
tp.video.currentTime: 返回视频当前播放时间
tp.video.duration: 返回视频总时间
tp.video.paused: 返回视频是否暂停
支持大多数原生 video 接口
tp.toggleFullScreen: 切换全屏

参数-事件 ​

事件绑定 ​

绑定一次性事件 ​

事件注销 ​

手动触发 ​

参数 ​

API ​

参数-事件

事件绑定

绑定一次性事件

事件注销

手动触发

参数

API