# chimee-plugin-frame

**Repository Path**: twoer/chimee-plugin-frame

## Basic Information

- **Project Name**: chimee-plugin-frame
- **Description**: 基于 chimee 的视频帧组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://twoer.gitee.io/chimee-plugin-frame/
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-08-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# chimee-plugin-frame

一个基于 [chimee](http://chimee.org/) 可以在视频中添加 `文字 或 图片` 的插件。


### 先看效果：

![demo.gif](./demo.gif)

demo：[https://twoer.gitee.io/chimee-plugin-frame/](https://twoer.gitee.io/chimee-plugin-frame/)

### 使用方法：
```

// 引入插件
import chimeePluginFrame from 'dist/index.js'
import 'dist/index.css'

// 安装插件
Chimee.install(chimeePluginFrame)

// 初始化 chimee
var player = new Chimee({
  wrapper: '#video-wrapper',
  autoplay: true,
  muted: true,
  src: './video/zealer20160517.mp4',
  plugin: [
    chimeePluginControlbar.name,
    chimeePluginFrame.name
  ]
})


// 设置 data
player.chimeeFrame.setData([{
  id: 'i001', // 非必填
  type: 'text', // 类型[text|img]
  time: 5, // 从多少秒开始显示
  duration: 2, // 持续几秒
  content: '今天天气咋样？', // 内容
  style: { // 样式
    top: '20px',
    left: '20px'
  }
},
{
  id: 'i002',
  type: 'text',
  time: 10,
  duration: 2,
  content: '今天非常热，不宜出门。',
  style: {
    top: '20px',
    left: '20px'
  }
},
{
  id: 'i003',
  type: 'img',
  time: 15,
  duration: 3,
  content: './img/1.jpg',
  style: {
    top: '20px',
    right: '20px'
  }
}])


```

> 暂时还未发 `npm`，
> 
> 目前功能比较简单，后续可考虑 `文字 或 图片` 动效。