npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chimee-mobile-player

v0.3.0

Published

A complete set of H5 mobile player

Downloads

74

Readme

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

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