快速开始

快速开始

导语

鉴于目前 H5-Video 在 Web 生态环境中存在较大差异化的表现，尤其移动端更是存在着太多不得不“case by case”的怪异状况的问题；

另外，也为了满足不同业务场景下各种灵活多变的潜在需求，使用基于组件化框架设计的 Chimee，可以从不同层次满足业务接入需求。

初识Chimee

基于 Chimee 统一调度处理的属性方法、属性读写API，能解决大部分的兼容性、差异化问题，实现对HLS与FLV编解码支持，且支持直播点播两种模式。

基于 Chimee 可以实现原生Video所不能支持的媒体源热切换、全屏操作与监听…

基于 Chimee 的事件监听与数据状态监听，可以很方便的感知状态的变化、进行事件挂起拦截等操作。

选择合适的接入方案

不得不再次强调：Chimee 是一套组件化视频播放器框架，基于组件化插件的应用与定制化组件开发，可以很方便的达成更有特色且更契合业务需求的功能开发；但前提是您必须有足够的好奇心和精力、能够预先充分了解 Chimee 和掌握业务需求。

如果精力不是很充足，那么可以结合目标业务场景，使用官方提供的基于 Chimee 打包后的适合PC端的Chimee-Player或是适合移动端的Chimee-Mobile-Player 。

几种方案的用法

不管是基于Chimee、还是Chimee-Player、亦或者是Chimee-Mobile-Player，官方都提供了多种不同的构建输出版本来满足不同业务应用场景的开发需求。

可以选择基于 npm install 模块名称 —save在自有构建环境进行依赖安装，也可以直接使用<script src='模块构建结果JS URL'></script>引入到业务页面中。

注意： 在 1.4.0 版本（包括）以上， css与js分开打包了，此时需要单独引入 css 文件 lib/chimee-player.browser.css

下面具体分别来看看：

PC端 Chimee-Player解决方案

1 . 引用公共CDN上的JS，或者在lib目录下选择适合的构建结果放入业务目录中，直接引用JS:

<!-- 注意：这里的 CDN 资源链接可能不是最新版，具体可访问：https://cdn.baomitu.com/chimee-player -->
<script src="http://lib.baomitu.com/chimee-player/1.1.9/chimee-player.browser.js"></script>
<script>
new ChimeePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://chimee.org/vod/1.mp4',
  controls: true
});
</script>

2 . 项目是基于nodejs环境构建的话，可以先在项目目录下执行命令安装依赖包：

npm install chimee-player --save

然后再按照自己的使用习惯，将依赖 import 或 require 到业务代码中使用：

import ChimeePlayer from 'chimee-player';
new ChimeePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://chimee.org/vod/1.mp4',
  controls: true
});
// HLS 直播
new ChimeePlayer({
  wrapper: '#wrapper',
  src: 'http://chimee.org/xxx/fff.m3u8',
  box: 'hls',
  isLive: true,
  autoplay: true,
  controls: true
});
// FLV 直播
new ChimeePlayer({
  wrapper: '#wrapper',
  src: 'http://chimee.org/xxx/fff.flv',
  box: 'flv',
  isLive: true,
  autoplay: true,
  controls: true
});

更详细的说明及文档请参考：http://chimee.org/docs/chimee_player.html。

移动端 Chimee-Mobile-Player解决方案

1 . 在lib目录下选择适合的构建结果放入业务目录或托管到CDN服务上，直接引用JS:

<script src="..yourURL../chimee-mobile-player.browser.js"></script>
<script>
new ChimeeMobilePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://chimee.org/vod/1.mp4',
  autoplay: true,
  controls: true,
  playsInline: true,
  preload: true,
  x5VideoPlayerFullscreen: true,
  x5VideoOrientation: true,
  xWebkitAirplay: true,
  muted: true
});
</script>

2 . 项目是基于nodejs环境构建的话，可以先在项目目录下执行命令安装依赖包：

npm install chimee-mobile-player --save

然后再按照自己的使用习惯，将依赖 import 或 require 到业务代码中使用：

import ChimeePlayer from 'chimee-mobile-player';
new ChimeeMobilePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://chimee.org/vod/1.mp4',
  autoplay: true,
  controls: true,
  playsInline: true,
  preload: true,
  x5VideoPlayerFullscreen: true,
  x5VideoOrientation: true,
  xWebkitAirplay: true,
  muted: true
});
// HLS 直播（移动端HLS可以用系统默认解码器，所以这里不需要像PC端那样设置box）
new ChimeeMobilePlayer({
  wrapper: '#wrapper',
  src: 'http://chimee.org/xxx/fff.m3u8',
  isLive: true,
  autoplay: true,
  controls: true,
  playsInline: true,
  preload: true,
  x5VideoPlayerFullscreen: true,
  x5VideoOrientation: true,
  xWebkitAirplay: true,
  muted: true
});

更详细的说明及文档请参考：http://chimee.org/docs/chimee_mobile_player.html。

另外如果您有移动端特殊需求，可以到这里进行需求登记；如果有遇到特定场景怪异表现，可以到这里提交异常兼容问题，并关注后续版本更新。

基于 Chimee 定制化开发方案

1 . 在lib目录下选择适合的构建结果放入业务目录或托管到CDN服务上，直接引用JS:

<script src="..yourURL../index.browser.js"></script>
<script>
// 编写自己的控制插件，并使用Chimee
const Chimee = window.Chimee;
const plugin = {
  // 插件名为 controller
  name: 'controller',
  // 插件实体为按钮
  el: '<button>play</button>',
  data: {
    text: 'play',
  },
  methods: {
    changeVideoStatus() {
      this[this.text]();
    },
    changeButtonText(text) {
      this.text = text;
      this.$dom.innerText = this.text;
    },
  },
  // 在插件创建的阶段，我们为插件绑定事件。
  create() {
    this.$dom.addEventListener('click', this.changeVideoStatus);
    this.$watch('controls', function(newVal, oldVal) {
      console.log(newVal, oldVal);
    }, { diff: false });
    console.log(this.$plugins);
  },
  // 插件会在播放暂停操作发生后改变自己的文案及相应的行为
  events: {
    pause() {
      this.changeButtonText('play');
    },
    play() {
      this.changeButtonText('pause');
    },
    c_contextmenu(evt) {
      console.log(evt);
    },
    click(evt) {
      console.log(evt);
    },
  },
};
Chimee.install(plugin);
const player = new Chimee({
  // 播放地址
  src: 'http://chimee.org/vod/1.mp4',
  // dom容器
  wrapper: '#wrapper',
  plugin: [ 'controller' ],
  volume: 0.1,
  controls: true,
});
[ 'touchstart', 'touchmove', 'touchend' ].forEach(key => {
  player.$on(key, evt => console.log(evt, key));
});
</script>

2 . 项目是基于nodejs环境构建的话，可以先在项目目录下执行命令安装依赖包（定制化开发时推荐使用这个方案）：

npm install chimee --save
# 这里可以按照业务需求继续安装其他依赖，比如下文代码中还需要：
npm install chimee-plugin-controlbar chimee-plugin-center-state chimee-kernel-hls chimee-kernel-flv --save

然后再按照自己的使用习惯，将依赖 import 或 require 到业务代码中使用：

import Chimee from 'chimee';
import chimeeControl from 'chimee-plugin-controlbar';
import chimeeCenterState from 'chimee-plugin-center-state';
import chimeeKernelHls from 'chimee-kernel-hls';
import chimeeKernelFlv from 'chimee-kernel-flv';
Chimee.install(chimeeControl);
Chimee.install(chimeeCenterState);
class MyChimeePlayer extends Chimee {
  constructor (config) {
    config = config ||{};
    // 添加UI插件
    config.plugin = config.plugin || config.plugins;
    if(!config.plugin) config.plugin = [];
    const innerPlugins = [
      chimeeControl.name,
      chimeeCenterState.name
    ];
    const configPluginNames = config.plugin.map(item => isObject(item) ? item.name : item);
    innerPlugins.forEach(name => {
      if(configPluginNames.indexOf(name) > -1) return;
      config.plugin.push(name);
    });
    // 添加解码器
     config.preset = {
       hls: chimeeKernelHls,
       flv: chimeeKernelFlv
     };
    super(config);
  }
}
export default MyChimeePlayer;

更详细的说明及文档请参考：http://chimee.org/docs/chimee_api.html

写在最后

ChimeeJS的每个项目模块源码中，都包含一个demo目录，可以参考里面的示例，进行相应模块的使用或二次开发。