一款超简单易用功能丰富的视频播放器Chimee
夔高寒
最近项目中需要用到H5播放器，然后找到一款神器Chimee。记录一下，方便日后使用。
使用：假设你的页面中有一 id 为 wrapper 的 div。
<body>
<div id="wrapper">
</div>
</body>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 Chimee from 'chimee';
const chimee = new Chimee({
wrapper: '#wrapper',
src: 'http://cdn.toxicjohann.com/lostStar.mp4',
controls: true,//控制栏
autoplay: true,//自动给播放
});最好添加下样式：
container {
position: relative;
display: block;
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
display: block;
background-color: #000;
}
video:focus,
video:active {
outline: none;
}这是最基本的使用，如果不满足需求可以添加各种插件，如控制栏皮肤：
import Chimee from 'chimee';
import chimeePluginControlbar from 'chimee-plugin-controlbar';
Chimee.install(chimeePluginControlbar);//安装插件
this.chimee = new Chimee({
wrapper: '#wrapper',
src: http://cdn.toxicjohann.com/lostStar.mp4,
noDefaultContextMenu: true,
plugins: [//插件配置
{
name: chimeePluginControlbar.name,//控制栏皮肤插件
children: {
play: {},//播放按钮，不配置即使用默认
progressTime: {},//时间，不配置即使用默认
progressBar: {},//进度条，不配置即使用默认
volume: {},//声音，不配置即使用默认（默认水平方向，设置为vertical变成垂直方向，不过垂直方向有点bug）
clarity: {//清晰度，配置后点击即可切换
list: [
{name: '超清', src: http://cdn.toxicjohann.com/lostStar1.mp4},
{name: '高清', src: http://cdn.toxicjohann.com/lostStar2.mp4}
],
immediate: true,
width: '4em'
},
playbackrate: {//倍速播放
list: [
{name: '0.5', value: 0.5},
{name: '1.0', value: 1, default: true},
{name: '2.0', value: 2}
]
},
screen: {}//全屏
}
}],
controls: true,
});也可以自定义插件：
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);
},
// 插件会在播放暂停操作发生后改变自己的文案及相应的行为
events: {
pause () {
this.changeButtonText('play');
},
play () {
this.changeButtonText('pause');
}
}
};
// 安装插件
Chimee.install(plugin);
const player = new Chimee({
// 播放地址
src: 'http://cdn.toxicjohann.com/lostStar.mp4',
// dom容器
wrapper: '#wrapper',
// 使用插件
plugin: ['controller'],
});还有更多功能，比如弹幕，广告等，具体可以查看Chimee的API:
类似资料：