网站首页 > 技术文章 正文
今天给大家分享一款超不错的可扩展多功能H5播放器框架Chimee。
chimee 奇舞团视频云前端出品的H5组件化视频播放器,star高达2.2K+。支持mp4、m3u8、flv等多种格式,让开发者快速迭代开发。
功能特性
首先,Chimee 是一个视频播放器。
- 可以播放 mp4、m3u8、flv 等多种格式的视频流。
- 解决大部分的兼容性问题,能够解决包括全屏、自动播放、内联播放等常见视频需求。
其次,Chimee 是一个基于 video 设计的组件化框架。
- 容许我们使用插件分割业务上与视频相关的功能。
- 对于每个组件来说,它们的编写都相当于直接操作 video 元素,简便快捷。
- 会梳理好插件间的层级关系,让我们免于被 z-index 困扰。
- 提供了如透明插件、穿透插件、内外层插件等多种模式,能够覆盖多种交互情景。
- 提供了多种便利的方式让我们进行组件间的沟通。
- 允许我们定义高优先级插件,从而让我们轻松完成业务上的广告需求。
- 支持异步组件。
安装
$ npm i chimee -S
使用插件
<div id="wrapper"></div>
<script>
import Chimee from 'chimee';
const chimee = new Chimee({
wrapper: '#wrapper',
src: 'http://cdn.toxicjohann.com/lostStar.mp4',
controls: true,
autoplay: true,
});
chimee.on('play', () => console.log('play!!'));
chimee.play();
</script>
如果需要播放 flv 或者 hls 格式,请传入解码器。
import Chimee from 'chimee';
import flv from 'chimee-kernel-flv';
import hls from 'chimee-kernel-hls';
const chimee = new Chimee({
wrapper: '#wrapper',
src: 'http://cdn.toxicjohann.com/lostStar.mp4',
controls: true,
autoplay: true,
kernels: {
flv,
hls
}
});
chimee.play();
架构设计
针对有不同层次深度定制化需求的用户,Chimee的横向和纵向分层设计,能更灵活的满足相应需求。
如果你使用的是移动端,那么请使用为移动端设计的 chimee-mobile-player。里面有移动端常用的基础 ui 与插件。
import ChimeeMobilePlayer from 'chimee-mobile-player';
const player = new ChimeeMobilePlayer({
wrapper: '#wrapper', // video dom容器
src: 'http://cdn.toxicjohann.com/lostStar.mp4',
autoplay: true,
controls: true,
playsInline: true,
preload: true,
x5VideoPlayerFullscreen: true,
x5VideoOrientation: true,
xWebkitAirplay: true,
muted: true
});
另外还支持自定义控制条、状态UI、popup弹窗插件、移动版手势控制及弹幕设置。
挺不错的一套可扩展的H5视频播放器组件化框架,大家不可错过哟!
# 文档地址
http://chimee.org/
# 仓库地址
https://github.com/Chimeejs/chimee
ok,就介绍到这里。感兴趣的小伙伴可以去看下哈,欢迎分享交流!
猜你喜欢
- 2024-11-26 视频播放必备神器,解锁H5 Player的强大功能
- 2024-11-26 NAS下搭建具备web管理界面并自动上传视频的bilibili录播姬
- 2024-11-26 html5的面试中,大概率会问到的音频和视频的那些知识点
- 2024-11-26 老司机福利,迅雷X新版可以下载网页视频了
- 2024-11-26 随笔:前端音视频的那些名词
- 2024-11-26 基于flutter/dart仿抖音app实例
- 2024-11-26 今年找工作到底有多难,真的不好找工作吗 @抖音短视频
- 2024-11-26 基于flutter3.x跨端仿抖音app实战|flutter-douyin短视频直播
- 2024-11-26 Sketch 免费入门视频教程 - 设计/前端/产品都应该学的设计利器
- 2024-11-26 MiroTalk:基于 WebRTC 的免费 4K 实时视频会议框架
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)