今天给大家分享一款超不错的可扩展多功能H5播放器框架Chimee。

H5直播/点播播放器LivePlayer

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，就介绍到这里。感兴趣的小伙伴可以去看下哈，欢迎分享交流！