larkplayer
v1.6.6
Published
An extendable html5 video player, includes event, plugin and custom style :)
Downloads
856
Readme
中文｜English
简介
larkplayer 是一款轻量、可扩展的 html5 播放器。
核心在于插件化的机制，使得播放器可以像高达一样可拆卸和组装，从而舒适地支持业务从简单到复杂的演变。
功能支持
- 支持 mp4、webm、ogg、m3u8 多种格式
- 支持 PC、移动端自适应样式
- 支持视频点播、直播
- 支持断点续播功能
- 支持360°全景视频
相关功能通过插件提供，请参考下文的插件章节
特性
- 体积小巧，~12KB(gzip)
- 解决大部分兼容性问题，如全屏、移动端内联播放等
- 提供事件机制，支持自定义事件
- 提供插件机制，支持多种插件类型
- 原生 javascript 编写，无特定框架依赖
查看在线示例
下载
NPM
npm install larkplayerCDN
<script src="https://unpkg.com/larkplayer@latest/dist/larkplayer.js"></script>快速上手
通过 script 的方式
<!DOCTYPE html>
<html>
<head>
<title>larkplayer quick start</title>
</head>
<body>
<video id="my-video" src="https://baikebcs.bdimg.com/baike-other/big-buck-bunny.mp4" width="400" height="300" controls>
请升级浏览器以支持 html5 video
</video>
<script type="text/javascript" src="https://unpkg.com/larkplayer@latest/dist/larkplayer.js"></script>
<script type="text/javascript">
// js 文件以 umd 的形式包装，以 script 的形式引用时，larkplayer 会直接挂载在 window 上
var player = larkplayer('my-video', {
width: 640,
height: 360
}, function () {
console.log('player is ready');
});
player.on('firstplay', function () {
console.log('firstplay');
});
// 支持所有的 html5 标准事件
player.on('play', function () {
console.log('play');
});
player.on('ended', function () {
console.log('ended');
player.src('http://www.w3school.com.cn/i/movie.ogg');
player.play();
});
</script>
</body>
</html>通过 npm + es6 的方式
import larkplayer from 'larkplayer';
const player = larkplayer('video-el');
文档
插件
- larkplayer-ui 提供适应 PC 与 Mobile 的样式
- larkplayer-hls 支持 M3U8 视频类型
- larkplayer-vr 支持 VR 全景视频
- larkplayer-auto-resume 提供断点续播功能
- larkplayer-play-muted 静音播放时，为用户提供提示与交互
如何贡献代码
- fork 或 clone 代码到本地
- 修改代码
- 使用 fecs 检查 js 代码规范
- 在项目根目录下执行 fecs src （更多选项可参考 fecs_eslint_wiki）
- 修复所有级别为 ERROR 的提示
- 建议修复所有级别为 WARN 的提示
- 执行测试
- 切换到 test 目录，并执行 karma start
- 修复未通过的 case
- 提交 pull request
使用交流
QQ 群：860073225
Change Log
License
larkplayer is MIT licensed