ayaya

A simple Media Player.

Usage no npm install needed!

<script type="module">
  import ayaya from 'https://cdn.skypack.dev/ayaya';
</script>

README

Ayaya

A simple website media player

Build Setup

# install dependencies
npm install
# yarn
yarn

# serve with hot reload at localhost:9000
npm run dev
# yarn
yarn run dev


# build for production with minification
npm run build
# yarn
yarn run build

Docs

初始化播放器 1方式

var player = new Ayaya({
    element: document.getElementById('player'),
    type: 'hls',
    logLevel: 0,
    video: {
        poster: '//demo.loacg.com/poster.png',
        src: '//demo.loacg.com/mplayer/Puella_Magi_Madoka_Magica/01/01.m3u8'
    },
    volume: 10
});

初始化播放器 2 方式

// 先初始化播放器
var player = new Ayaya({
    element: document.getElementById('player'),
    logLevel: 1,
    volume: 10
});

// 后设置要播放器的视屏源
player.switchSource('//demo.loacg.com/assets/video/WakabaGirl.mp4');

播放器参数

参数 说明 类型 默认值
element 要初始化播放器的 dom 元素 DomElement .mplayer[0]
type 播放器类型
'html5', 'hls', 'dash', 'flv'
String 'html5'
preload 预加载 String 'auto'
quality 是否支持清晰度切换 Boolean false
hotkey 是否开启热键支持 Boolean false
autoplay 打开页面时自动播放 Boolean false
loop 循环播放 Boolean false
blob 是否采用 html5 BLOB 包装视频源 Boolean false
volume 当前播放器声音大小,范围 0-100 Number 40
loggerType 日志类型
0 在页面输出
1在浏览器 console 输出
Number 1
logLevel 0 DEBUG, 1INFO, 2 WARN, 3 ERROR Number 0

播放器事件

事件名 回调参数 说明
play function() {} 播放视频时 无参
pause function() {} 暂停播放时 无参
played function() {} 播放结束时 无参
ready function() {} 当视频元信息加载完毕时触发,此时可以开始调用播放
stop function() {} 停止播放时(播放结束)
ended function() {} 当播放结束时
seek function(int) {} 点击播放进度跳转时间轴时
跳过时间轴的秒数
volume function(int) {} 修改播放器音量时触发
参数 修改的音量大小
playbackRate function(rate) {} 播放器当前播放速度
参数 rate: int
fullscreen function(modeType) 播放器屏幕显示模式
参数 modeType:
0 - 正常
1 - web 全屏
2 - 屏幕全屏
destroy function() {} 播放器被销毁时 无参

事件绑定例子


// 初始化播放器
var player = new Ayaya({
    element: document.getElementById('player'),
    type: 'hls',
    loggerType: 1,
    video: {
        poster: '//demo.loacg.com/poster.png',
        src: '//demo.loacg.com/mplayer/Puella_Magi_Madoka_Magica/01/01.m3u8'
    },
    volume: 10
});

// 1. 无参事件
function playEvent() {
    console.log('player playing');
}

// 监听事件
player.on(Ayaya.EVENTS.PLAY, playEvent);

// 取消监听事件
player.off(Ayaya.EVENTS.PLAY, playEvent);


// 2. 有参监听
function light(parameter) {
    console.log(parameter); // true / false

    console.log('now turn light:', parameter);
}
player.on(Ayaya.EVENTS.PLAYER_LIGHT, light); // 监听
player.off(Ayaya.EVENTS.PLAYER_LIGHT, light); // 取消监听
player.once(Ayaya.EVENTS.PLAYER_LIGHT, light); // 只监听一次,之后都不在触发

日志记录

# 说明
loggerType 0, 1 0 在页面输出
1 在浏览器 console 输出
logLevel 0,1,2,3,4 0 DEBUG
1 INFO
2 WARN
3 ERROR
4 FATAL