Giter VIP home page Giter VIP logo

chimee-mobile-player's Introduction

ChimeeMobilePlayer

这是基于chimee集成的一套您可以直接使用的HTML5移动端播放器,提供有了默认样式。

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

  1. chimee-plugin-mobile-controlbar
  2. chimee-plugin-mobile-state

安装

首先根据您的业务场景,你可以直接将lib目录下适合的打包文件引入您的业务代码中,比如直接使用<script src='./lib/chimee-mobile-player.browser.js'></script>引用JS。

或者您的项目基于nodejs环境构建的话,直接执行 npm install chimee-mobile-player --save,然后再在代码中import ChimeeMobilePlayer from 'chimee-mobile-player';即可(注意:在 0.1.5 版本后,样式文件单独打包, 需要用户单独引入 lib/chimee-mobile-player.browser.css)。

基本用法

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

new ChimeeMobilePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  autoplay: true,
  controls: true,
  playsInline: true,
  preload: 'auto',
  x5VideoPlayerFullscreen: true,
  x5VideoOrientation: 'landscape|portrait',
  xWebkitAirplay: true,
  muted: true,
  // removeInnerPlugins: ['chimeeMobiControlbar', 'chimeeState'] // 需要移除的插件
});

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

// HLS 直播
new ChimeeMobilePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://chimee.org/xxx/fff.m3u8',
  isLive: true,
  autoplay: true,
  controls: true,
  playsInline: true,
  preload: 'auto',
  x5VideoPlayerFullscreen: true,
  x5VideoOrientation: 'landscape|portrait',
  xWebkitAirplay: true,
  muted: true,
  disableUA: ['Mozilla/5.0 (Linux; Android 4.4.2; HM NOTE 1TD Build/KOT49H; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/62.0.3202.97 Mobile Safari/537.36']
  // removeInnerPlugins: ['chimeeMobiControlbar', 'chimeeState'] // 需要移除的插件
});

注意

  1. 默认配置是自带控制条和中部状态的,通过配置可以去掉
  2. 暂不支持在该元素上使用缩放 zoom / scale
  3. ios 上的声音和机器的声音同步,并非设置 volume 可以改变,muted 是有效果的。
  4. [email protected] 之后将 playsline / x5VideoPlayerType 分开配置。
  5. 在 0.1.5 版本后,样式文件单独打包, 需要用户单独引入 lib/chimee-mobile-player.browser.css
  6. 当出现覆盖不掉原生控制条的情况,可以配置 disableUA 来覆盖掉。

FAQ

为什么移动端不能播放 m3u8 直播流?

移动端是原生支持 m3u8 播放的,无需使用 chimee-kernel-hls 进行编解码。如果你发现使用 chimee 不能顺利播放直播流。请注意 box 值是否有设为 native

为什么我在移动端播放没有音量?

注意下是否设置了 mutedtrue。示例中的 muted 均设置了 true 值。

但是在移动播放器中,一般只允许静音的视频进行自动播放,因此如果需要自动播放的,最好将 muted 设为 true。

为什么我不能条调节件音量?

如果你所持有的是 iOS 设备,你会发现声音是和机器的声音同步的,并非设置 volume 可以改变的。

预装的内部插件可以去掉吗?

其实 chimee-mobile-player 预装的插件并不多,只有 chimee-plugin-mobile-controlbar, chimee-plugin-mobile-state。

如果需要的话,可以自行利用 chimee 进行搭建也可以利用 removeInnerPlugins 进行。

注意, 注意, 注意

如果要兼容低级手机浏览器的话, 需要引入 babel-polyfill

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

chimee-mobile-player's People

Contributors

huzunjie avatar skipify avatar toxic-johann avatar yandeqiang avatar zhaoyan1986 avatar

Watchers

 avatar

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.