dblate / Larkplayer
Licence: mit
🚀 A lightweight & flexible web player :)
Stars: ✭ 82
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Larkplayer
Video.js
Video.js - open source HTML5 & Flash video player
Stars: ✭ 32,478 (+39507.32%)
Mutual labels: player, html5-video, videojs, html5
Html5 Dash Hls Rtmp
🌻 HTML5播放器、M3U8直播/点播、RTMP直播、低延迟、推流/播流地址鉴权
Stars: ✭ 1,805 (+2101.22%)
Mutual labels: player, html5-video, videojs, html5
React Jplayer
Html5 audio and video player library for React
Stars: ✭ 128 (+56.1%)
Mutual labels: video-player, html5-video, html5
Chimee
a video player framework aims to bring wonderful experience on browser
Stars: ✭ 2,332 (+2743.9%)
Mutual labels: video-player, html5-video, html5
Videojscustomization
HTML5 视频播放器 自定制: React + video.js 详细讲解
Stars: ✭ 32 (-60.98%)
Mutual labels: video-player, videojs, html5
Eplayer
🔮 A web-component html5 video player facing future
Stars: ✭ 253 (+208.54%)
Mutual labels: player, video-player, html5-video
Clappr
🎬 An extensible media player for the web.
Stars: ✭ 5,436 (+6529.27%)
Mutual labels: player, video-player, html5-video
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+4809.76%)
Mutual labels: player, video-player, videojs
Openplayerjs
Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads
Stars: ✭ 255 (+210.98%)
Mutual labels: player, html5-video, html5
clappr-core
Core components of the Clappr player architecture
Stars: ✭ 41 (-50%)
Mutual labels: player, video-player, html5-video
Xgplayer
A HTML5 video player with a parser that saves traffic
Stars: ✭ 4,792 (+5743.9%)
Mutual labels: player, video-player, html5-video
Rx Player
DASH/Smooth HTML5 Video Player
Stars: ✭ 600 (+631.71%)
Mutual labels: player, video-player, html5
Abplayerhtml5
Video Player for danmaku comments. ABPlayer in HTML5. ABPlayer核心构件以动态HTML编写的版本。向HTML5进发!HTML5弹幕播放器
Stars: ✭ 858 (+946.34%)
Mutual labels: player, video-player
Nexplayer unity plugin
Stream videos in HLS & DASH with Widevine DRM using NexPlayer Video Streaming Player SDK for Unity on Android & iOS devices
Stars: ✭ 73 (-10.98%)
Mutual labels: player, video-player
Hlsjs P2p Engine
Let your viewers become your unlimitedly scalable CDN.
Stars: ✭ 759 (+825.61%)
Mutual labels: player, html5
Fijkplayer
ijkplayer for flutter. ijkplayer 的 flutter 封装。 Flutter video/audio player. Flutter media player plugin for android/iOS based on ijkplayer. fijkplayer 是基于 ijkplayer 封装的 flutter 媒体播放器,开箱即用,无需编译 ijkplayer
Stars: ✭ 943 (+1050%)
Mutual labels: player, video-player
Indigo Player
Highly extensible, modern, JavaScript video player. Handles MPEG-Dash / HLS / MPEG-4 and is built on top of the HTML5 video element.
Stars: ✭ 1,173 (+1330.49%)
Mutual labels: video-player, html5-video
Better Chrome Native Video
Add keyboard support to Chrome's native HTML5 video player.
Stars: ✭ 31 (-62.2%)
Mutual labels: video-player, html5-video
Yuview
The Free and Open Source Cross Platform YUV Viewer with an advanced analytics toolset
Stars: ✭ 665 (+710.98%)
Mutual labels: player, video-player
larkplayer
中文|English
简介
larkplayer 是一款轻量、可扩展的 html5 播放器。
核心在于插件化的机制,使得播放器可以像高达一样可拆卸和组装,从而舒适地支持业务从简单到复杂的演变。
功能支持
- 支持 mp4、webm、ogg、m3u8 多种格式
- 支持 PC、移动端自适应样式
- 支持视频点播、直播
- 支持断点续播功能
- 支持360°全景视频
相关功能通过插件提供,请参考下文的插件章节
特性
- 体积小巧,~12KB(gzip)
- 解决大部分兼容性问题,如全屏、移动端内联播放等
- 提供事件机制,支持自定义事件
- 提供插件机制,支持多种插件类型
- 原生 javascript 编写,无特定框架依赖
查看在线示例
下载
NPM
npm install larkplayer
CDN
<script src="https://unpkg.com/[email protected]/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/[email protected]/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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].