ChimeeMobilePlayer

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

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

安装

首先根据您的业务场景,你可以直接将lib目录下适合的打包文件引入您的业务代码中,比如直接使用引用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'] // 需要移除的插件

});

注意

默认配置是自带控制条和中部状态的,通过配置可以去掉

暂不支持在该元素上使用缩放 zoom / scale

ios 上的声音和机器的声音同步,并非设置 volume 可以改变,muted 是有效果的。

在 chimee@0.8.3 之后将 playsline / x5VideoPlayerType 分开配置。

在 0.1.5 版本后,样式文件单独打包, 需要用户单独引入 lib/chimee-mobile-player.browser.css

当出现覆盖不掉原生控制条的情况,可以配置 disableUA 来覆盖掉。

FAQ

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

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

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

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

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

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

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

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

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

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

注意, 注意, 注意

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

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

让HTML播放器使用指定ua,chimee-mobile-player相关推荐

  1. 音乐播放器制作一(Windows Media Player控件)

    VS2013 MFC做音乐播放器,需要使用到ActiveX控件(Windows Media Player),可以播放音视频,支持歌单添加,删除,保存操作,支持循环,顺序,随机播放.   话不多说,先来 ...

  2. android启动播放器,android – 使用Intent启动Media Player

    我正在开发我的第一个 Android应用程序.这是录音应用程序.我正在使用MediaRecord录制语音,如下所示: mRecorder = new MediaRecorder(); mRecorde ...

  3. html加入window播放器,使用 HTML 和 Windows Media Player

    使用 HTML 和 Windows Media Player 05/31/2018 本文内容 概述 使用 HTML 和 Windows Media Player 是将音频和视频与文本和图形组合在一起的 ...

  4. 使用Vitamio打造自己的Android万能播放器(2)—— 手势控制亮度、音量、缩放

    前言 本章继续完善播放相关播放器的核心功能,为后续扩展打好基础. 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over1 ...

  5. 网页Windows Media Player播放器参数含义(转)

    常用网页播放器代码 我们在网页上看到的播放器无外乎WMP/RealOne/Macromedia Flash Player,其他的无非是面板不同,或者添加了其他控件,对于计算机上安装的一些播放器也都是编 ...

  6. 经常使用网页播放器代码

    经常使用网页播放器代码 我们在网页上看到的播放器无外乎WMP/RealOne/Macromedia Flash Player,其它的无非是面板不同,或者加入了其它控件,对于计算机上安装的一些播放器也都 ...

  7. android音乐播放器开发 SweetMusicPlayer 播放本地音乐

    代码地址:https://github.com/huweigoodboy/SweetMusicPlayer 上一篇写了加载歌曲列表,http://blog.csdn.net/huweigoodboy/ ...

  8. React+阿里云Aliplayer播放器实现rtmp直播(推流时间差,重启播放器,计时观看)

    需求 前端框架为React 用阿里云播放器Aliplayer播放直播 使用的rtmp协议 资料 阿里云播放器 Web端文档:https://help.aliyun.com/document_detai ...

  9. 使用OES纹理+GLSurfaceView+JNI实现基于OpenGL ES的播放器画面处理

    前言: 安卓使用SurfaceView + SurfaceTexture + Surface进行视频播放或者相机预览,只能看到原色画面,但很多场合需求画面可以实现二次加工,例如调整红绿蓝三原色的比例. ...

  10. DASH视频系统(服务器播放器)搭建

    文章目录 0. 概述 1. 搭建服务器(Nginx) 2. 获取源视频及音频 3. 安装编码器(FFmpeg) 4. 视频编码 5. 音频编码 6. 安装视频切片工具(Bento4) 7. 视频切片 ...

最新文章

  1. iOS 富文本编辑工厂, 让书写更简便.
  2. C++/C的文件结构
  3. 【C++】 C++虚函数表详细分析(上)
  4. C语言太简单?这14道C语言谜题,你能答对几个?
  5. 麟龙指标通达信指标公式源码_通达信指标公式源码波段极限副图源码
  6. Javascript笔记:(实践篇)从jQuery插件技术说起-分析extend方法的源码(发现extend方法里有bug)(下篇)...
  7. windows操作系统,python环境下django的自动安装
  8. 为什么至今为止有些人的电脑系统还在使用XP?
  9. 苹果xsmax是什么接口_为什么苹果PD快充线头是银色而非金黄色?原来那根本就不是镀的银...
  10. Python解释器【转载】
  11. python3数据科学入门与实战技巧_Python3数据科学入门与实战
  12. 玩转Vagrant之工作环境的迁移(box的导入与导出)
  13. 云计算技术基础复习知识点
  14. [iOS Animation]-CALayer 变换-灭点
  15. 管道与命名管道(FIFO)
  16. 新浪A股、港股、美股、股票期权行情接口
  17. 浅谈马氏距离【Mahalonobis Distance】
  18. DT内核圆柱模板行业站点主动tags三项主动推送插件
  19. 为什么只有状态转移算法才是真正意义上的智能优化算法,其它的都是“假冒伪劣”?
  20. linux解压tar.gz报错,Linux解压tar.gz文件时提示gzip:stdin:not错误

热门文章

  1. 一款非常好看的婚纱请柬设计英文字体
  2. python之论文降重工具
  3. 十代主板改win7_微星b460主板装win7系统及bios设置教程(支持十代usb驱动)
  4. css表格一行删除线,EXCEL电子表格一行中间画一条删除线怎么画/excel表格如何划掉数据...
  5. 《MATLAB智能算法30个案例》:第11章 基于多层编码遗传算法的车间调度算法
  6. java 对手机号码进行校验
  7. java工具类解压缩zip和rar
  8. 服务器上系统怎么启动iis,IIS服务器如何重新启动
  9. FPGA之SDRAM控制器设计(四)
  10. myline java线段类,MyLine 编写一个线段类 MyLine 联合开发网 - pudn.com