一款超简单易用功能丰富的视频播放器Chimee

最新推荐文章于 2024-03-27 09:55:49 发布

HWMI

最新推荐文章于 2024-03-27 09:55:49 发布

阅读量1.9k

点赞数

分类专栏： H5播放器 video播放器文章标签： Chimee H5播放器播放器播放器清晰度切换

本文链接：https://blog.csdn.net/Hello_artificialI/article/details/103485138

版权

H5播放器同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

video播放器

1 篇文章 0 订阅

订阅专栏

最近项目中需要用到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:

链接：http://chimee.org/docs/chimee_plugin_center_state.html

HWMI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一款超简单易用功能丰富的视频播放器Chimee

最近项目中需要用到H5播放器，然后找到一款神器Chimee。记录一下，方便日后使用。使用：假设你的页面中有一id为wrapper的div。<body> <div id="wrapper"> </div></body>1.引用公共CDN上的JS，或者在lib目录下选择适合的构建结果放入业务目录中，直接引用JS:&...
复制链接

扫一扫