GithubHelp home page GithubHelp logo

chimeejs / chimee-player Goto Github PK

View Code? Open in Web Editor NEW
295.0 21.0 45.0 3.65 MB

A complete set of H5 player. 这是一套包含UI插件、FLV和HLS解码器的快速上手解决方案,可以按您的业务场景适当调整依赖后重新构建打包。

Home Page: http://chimee.org/#demo

JavaScript 74.21% CSS 0.01% HTML 25.78%
chimee-player chimee hls flv video h5-video-ui h5-video h5-video-player chimeejs

chimee-player's Introduction

ChimeePlayer

这是基于chimee集成的一套您可以直接使用的HTML5播放器,提供有了默认样式,此时要避免CSS中给video写死宽高值---以避免全屏不能正常使用。

注意:当前文档适用于PC端,如果是移动端使用Chimee,您可以参考 Chimee-mobile-player 文档,移动端插件开发和注意事项可以参考Chimee 移动端插件开发 这篇文章。

并集成了以下官方UI插件:

  1. chimee-plugin-controlbar
  2. chimee-plugin-center-state
  3. chimee-plugin-contextmenu
  4. chimee-plugin-log

也默认包含FLV&HLS解码器:

  1. chimee-kernel-flv
  2. chimee-kernel-hls

安装引用

鉴于大家各自的业务构建场景的不同,可以从以下两种引用方式中选择适合自己的方案:

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

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';

基本用法

将 ChimeePlayer “安装引用” 到业务环境,就可以在业务逻辑中启用播放器了。

基于点播场景,可以这样使用:

new ChimeePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://chimee.org/vod/1.mp4',
  autoplay: true,
  controls: true
});

如果您需要的是直播场景场景,可以根据您的媒体容器类型,参考以下配置:

// HLS 直播
new ChimeePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://chimee.org/xxx/fff.m3u8',
  box: 'hls',
  isLive: true,
  autoplay: true,
  controls: true
});


// FLV 直播
new ChimeePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://chimee.org/xxx/fff.flv',
  box: 'flv',
  isLive: true,
  autoplay: true, // 注:flv直播中autoplay设置false无效
  controls: true
});

效果示例(本截图是已经点击右键“查看日志”开启日志输出之后的效果):

这里的代码示例只给出了几个最基本的参数配置,更多配置请参考 Chimee API 文档

修改插件配置

通常我们需要将关键环节的日志信息上传到服务端,以生成观看报表、异常报表等数据分析内容,这里我们就以日志插件为例,了解怎么使用插件的属性配置。

你可以参考以下代码配置实现日志上报:

new ChimeePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  autoplay: true,
  controls: true,
  plugins: [{
    name: 'chimeeLog',
    // 告诉 chimeeLog 插件你有一个可以接受日志上报的服务端接口
    logPostUrl: 'https://myDomain.xx/log_push'
  }]
});

更详细的日志说明、上报字段控制等,请参考chimee-plugin-log 插件说明

ChimeePlayer 打包的控制条插件也提供了很多定制化配置,具体请先考chimee-plugin-controlbar 插件说明.

添加自定义插件

这里以使用 ChimeePlayer.popupFactory 工厂方法创建插件为例。

Chimee.install(ChimeePlayer.popupFactory({
  name: 'my_popup',
  title: '这是一个居中信息框',
  body: '这里是信息内容',
  offset: '50% 50%',
  width: '200px'
}));

new ChimeePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  autoplay: true,
  controls: true,
  plugins: ['my_popup']
});

这样就可以非常方便的创建自己的UI组件了,更多插件开发相关说明,请参考如何编写一个UI插件

二次开发

当前播放器因为包含了几乎全量的官方插件,打包后体积偏大(打包文件 1.4M,uglify 处理后 514KB, gzip后 136KB),如果您希望使用更符合业务场景体积更小的代码量(比如你可能不需要FLV或HLS解码器),那可以适当删减 src/index.js 中的代码后,重新 npm run build 得到想要的打包代码。

兼容 IE

Chimee 本身的设计是兼容 IE 的, 但是需要 babel-polyfill 的支持。因此如果你确实需要在 IE 中使用 chimee, 请确保你已引入 babel-polyfill。

希望您用着方便,有相应问题请随时反馈。

chimee-player's People

Contributors

huzunjie avatar toxic-johann avatar yandeqiang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

chimee-player's Issues

ended事件不触发?

视频播放结束触发的是‘pause’事件,不触发ended事件,怎么捕获视频播放结束事件?

移动端ios,视频加载失败

wechatimg29

一直都是loading状态,然后就加载失败了,有时候这里
wx20171206-173411 2x
切换一下就能显示视频了。什么原因造成的呢?我引用的是chimee-player.browser.js这个版本的。

在引入[email protected],打包后报错

我的代码
var vie = new ChimeePlayer({
wrapper: '#wrapper',
// src:"http://cdn.toxicjohann.com/lostStar.mp4",
controls: true,
autoplay: false,
// plugin: [popup.name],
autoload: false
})
打包后,日志报错
Uncaught SyntaxError: Unexpected token ] chimee-player.browser.js:27620

var getCharForByte = function getCharForByte(byte) {
var charCode = byte;
if (specialCea608CharsCodes.hasOwnProperty(byte)) charCode = specialCea608CharsCodes[byte];

  return String.fromCharCode(charCode);
};

高频切换视频源报错

flv格式的视频源频繁的切换直播,初始化播放器,会报这样的错误。
chimee-player.browser.js:43052 DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

ts文件伪装成png图片后无法播放

我用windows的dos命令copy把ts文件跟png文件合并后生成新的png文件作为m3u8列表的文件,chimee无法播放,请问是什么原因,我该怎么处理

m3u8 格式有的播放不了

报错:vendor.1fd61b8e0a1f3bc4b8db.js:72323 [chimee-kernel-hls hlsError] > bufferSeekOverHole
有的都能播放,有的只有音频,没有视频,有的音频和视频都没有,这是咋回事呢?谢谢!

npm安装非常慢

拉其他依赖没问题 但是拉chimee-player就一直卡在checking installable status

chimee-player在angular下的使用

angualr基于ts开发,chimee还没支持,所以ts 引入和文档不太一样,
import * as Chimee from 'chimee-player';

后续开发再来补充其他的区别

新版chrome下m3u8只加载不播放

chrome版本 73.0.3683.103。
表现为m3u8资源在控制台里正常加载,但是播放器整个不显示,播放区域是透明的,也不报错。
半年前没问题,是最近才出现的,而且同样页面在360浏览器里仍然正常播放,猜测是新版chrome内核有什么调整导致的。

好像也没有解决播放器在不同手机浏览器的H5页面中的UI样式问题吧?

本人也有在做网页播放器的相关业务工作,遇到最头疼的莫过于国产手机浏览器厂商,对 video 标签的劫持问题,基本上自己写的 video 相关的控制栏样式完全没有什么意义,会被不同的手机浏览器做不同的样式展示,不知道 chimee-player 在做H5播放器的 UI 时,做到了哪一步,有没有什么解决方案呢?

样式丢失

直接在vue中
import("chimee-player").then(s => {
const ChimeePlayer = s.default;
let box = this.palyermaps[this.property.option.playertype].box;
let isLive = this.palyermaps[this.property.option.playertype].isLive;
let src = this.property.option.src;
this.Instance && this.Instance.destroy();
this.Instance = new ChimeePlayer({
// 播放地址
src: src,
// 直播:live 点播:vod
isLive: isLive,
// 编解码容器
box: box,
poster: this.property.option.poster,
// dom容器
wrapper: this.$el,
// video
autoplay: this.property.option.autoplay,
loop: this.property.option.loop,
muted: this.property.option.muted,
controls: true,
crossOrigin: "anonymous"
});
});
样式丢失

音频编码问题

请问支持G711U编码的音频吗?我播音频是G711U编码的视频好像没有声音

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.