A simple, HTML5, FLV media player.
npm install vplyr
https://www.npmjs.com/package/vplyr
<video poster="/path/to/poster.jpg" controls src="/path/to/video.mp4"></video>Include the vplyr.css stylsheet into your <head>
<link rel="stylesheet" href="dist/vplyr.css">Include the vplyr.js script before the closing </body> tag and then call new vPlayer(tag,options)
<script src="dist/vplyr.js"></script>
<script>new vPlayer(document.querySelector('video'), { debug: false })</script>| API | Required | Description |
|---|---|---|
container |
— | 返回播放器容器get : player.container |
poster |
— | get or set video poster get : player.poster | set player.poster = '图片地址' |
readyState |
— | 返回视频播放器状态 |
loadingState |
— | 返回视频加载状态 |
duration |
— | 返回视频总时间 |
play() |
— | 开始播放视频 |
pause() |
— | 暂停播放视频 |
stop() |
— | 停止播放视频 |
currentTime |
— | Number | 拿到或者设置视频当前播放时间 get : player.currentTime | set player.currentTime = Number |
volume |
— | Number | 返回或者设置视频音量 get : player.volume | set player.volume = Number |
muted |
— | Boolean | 返回或者设置视频静音 get : player.muted | set player.muted = true || false |
togglePlay() |
Boolean | 切换视频播放状态 |
paused |
— | 返回视频当前播放状态 |
toggleMute() |
— | 切换视频静音状态 |
toggleFullscreen() |
Event | 切换视频全屏状态 |
playing(...) |
Event | 监听视频播放事件,callback返回视频当前播放时间 |
fullscreen |
— | Boolean | 返回或者设置当前视频全屏get : player.fullscreen | set player.fullscreen = true || false |
src |
— | String |
返回或者设置当前视频地址
get : player.src | set player.src = '视频地址'
|
destroy() |
— | 销毁视频播放器，重置状态 |