noa-player

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 数据状态更新事件