今天給大家分享一款超不錯的可擴展多功能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，就介紹到這裡。感興趣的小夥伴可以去看下哈，歡迎分享交流！