Noa Player
A simple media player
Use
// noa options
var options = {
element: document.getElementById('player'),
title: 'WakabaGirl',
mediaSource: {
src: 'https://demo.loacg.com/video/WakabaGirl.m3u8',
poster: '/poster.png'
},
type: Noa.TYPE.NativeHls
}
// init Noa
var noa = new Noa(options)
noa.on(Noa.EVENTS.PLAY, () => {
console.log('播放器进行播放视频')
})
// button#switchS1
document.querySelector('#switchS1').addEventListener('click', () => {
console.log('按下了切换视频源1')
noa.switchSource({
source: '/cache/wakaba_girl/WakabaGirl.m3u8',
title: 'WakabaGirl'
})
})
// button#switchS2
document.querySelector('#switchS2').addEventListener('click', () => {
console.log('按下了切换视频源2')
noa.switchSource({
source: '/cache/shelter/shelter.m3u8',
title: 'Shelter OVA'
})
})
Options
| 属性 |
说明 |
类型 |
默认值 |
| element |
播放器挂载的 DOM 元素 |
DocumentElement |
#player |
| title |
播放器被鼠标激活时，显示在顶部的播放视频标题 |
String |
- |
| mediaSource |
播放媒体元信息 |
{ MediaSource } |
- |
| volume |
播放器声音大小 |
float(0-1) |
0.4 |
| type |
播放器处理媒体类型 |
Noa.TYPE |
'auto' |
| feedbackUrl |
播放器反馈地址,设置时会显示到菜单 |
String |
- |
| p2pSupport |
支持需要支持 CDNBye 提供的 P2P 功能 |
Boolean |
false |
{ MediaSource }
| 属性 |
说明 |
类型 |
默认值 |
| src |
视频源文件 |
String |
- |
| poster |
视频封面图地址 |
String |
- |
| qa |
视频清晰度标识 |
String |
- |
ENUM: TYPE
| 属性 |
说明 |
| NativeDash |
DASH 编解码方式 |
| NativeHls |
HLS (m3u8) 编解码方式 |
| NativeFlv |
FLV (.flv) 编解码方式 |
| HtmlMediaElement |
HTML5 (.mp4) 原生 |
| HtmlAudioElement |
HTML5 (.mp3) 原生 <audio /> |
Function
| 方法名 |
说明 |
响应 |
| play() |
播放 |
- |
| pause() |
暂停 |
- |
| stop() |
停止（进度条回到 0） |
- |
| seek(time) |
快进或快退到一个时间（Int） |
- |
| setVolume(volume) |
设置播放器当前音量（浮点数 0 ~ 1） |
- |
| mute(bool) |
静音（Boolean） |
- |
| playbackRate(rate) |
播放速度 0.5 | 0.75 | 1 | | 1.25 | 1.5 | 2 |
- |
| switchSource({ source, title, type = null }) |
切换视频源(切换源 480P,720P...) |
- |
| on(event, callback, [once]) |
监听播放器事件 |
- |
| off(event, callback) |
停止一个事件监听 |
- |
| trigger(event, ...args) |
主动触发一个事件 |
- |
| notice(text, [time, opacity]) |
在播放器内弹出提示 |
- |
| destroy(force = false) |
立即销毁播放器 |
|
Events (Noa.EVENTS)
| 事件名称 |
回调 |
说明 |
| PLAY |
- |
播放事件 |
| PLAYED |
- |
播放结束事件 |
| STOP |
- |
停止事件 |
| MUTED |
- |
静音 |
| ENDED |
- |
播放结束事件 |
| SEEK |
({ oldTime, time }) |
快进/快退 |
| ERROR |
(error) |
加载视频出错事件 |
| READY |
- |
播放器加载视频帧结束，可以进行播放事件 |
| STATS |
- |
播放器数据状态更新事件 |
| P2P_STATS |
- |
p2pEngine 数据状态更新事件 |