rx-player, 流畅/快速的HTML5视频播放器

分享于 

6分钟阅读

GitHub

  繁體 雙語
HTML5 video player with some reactive programming
  • 源代码名称:rx-player
  • 源代码网址:http://www.github.com/canalplus/rx-player
  • rx-player源代码文档
  • rx-player源代码下载
  • Git URL:
    git://www.github.com/canalplus/rx-player.git
    Git Clone代码到本地:
    git clone http://www.github.com/canalplus/rx-player
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/canalplus/rx-player
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    rx播放器

    Build Statusnpm versionGitter

    rx播放器是一个实现 DASHMicrosoft流畅流视频播放器的库,无需插件。 它依靠HTML5的媒体扩展插件和加密媒体扩展插件,它是用的一个超集,一个JavaScript的超集 written。

    它目前已经用于高级服务,目标多种设备,如计算机,手机,set-top-boxes,智能电视等。

    它的主要目标是:

    • 使用或者无数字版本的数字版本来播放和使用平滑和破坏的内容

    • 提供一流用户体验( 没有任何缓冲,低延迟。)

    • 可以配置和可以扩展( 比如。 适用于Peer-to-Peer流媒体,机顶盒集成。

    • 易于集成和使用,作为各种基本库中的库。

    我们最近把代码代码转换为 TypeScript,这就是为什么要使用它。

    最新版本:v3.3.0

    API

    我们在中的每个小细节中记录了 API ( API文档文档)。

    演示

    你可以查看我们的在线演示,从我们的最后版本构建,这里的

    这个演示是一个用编写的小应用程序,它演示了玩家的简单用法。

    如何使用它?

    在代码中直接使用播放器的最快方法是将这个存储库作为依赖项添加。 你可以通过 npm:

    
    npm install --save rx-player
    
    
    
    

    然后,你可以直接在代码中导入和使用rx播放器:

    // import it ES6 style:importRxPlayerfrom"rx-player";// same in CommonJS style:// const RxPlayer = require("rx-player");// instantiate itconstplayer=newRxPlayer({
     videoElement:document.getElementById("my-video")
    });// play a videoplayer.loadVideo({
     url:"http://vm2.dashif.org/livesim-dev/segtimeline_1/testpic_6s/Manifest.mpd",
     transport:"dash",
     autoPlay:true});

    现在你还可以执行自己的自定义构建插件,只使用减少文件大小所需的功能。

    你的问题

    你可以直接问你关于这个项目的问题,我们的。 我们会尽可能快速地回答他们的问题。

    你可以通过以下方式帮助和贡献:

    如果你对贡献有任何疑问,可以在我们的 gitter房间中查询。 我们还开始在这里添加一个小的架构文档 不久即将到来 !

    依赖项

    克隆 repo 之后,你应该首先通过 npm 安装我们的依赖项:

    npm install

    插件生成

    我们使用npm脚本来捆绑。lint和测试播放机。 以下是一些示例:

    # build the player in dist/rx-player.jsnpm run build# lint the code with tslintnpm run lint# launch the demo on a local server (http://127.0.0.1:8000)npm run start# launch our test suite on various browsersnpm run test# list all available npm scriptsnpm run info

    build包含在 dist/ 目录(。基于最后一个版本的版本已经包含在其中) 中。

    为什么一个新玩家? 为什么 Rx?

    为网络构建一个流媒体播放器是一项复杂的任务,因为与外部世界的交互很多。 是否来自提供输入,网络交互或者浏览器功能的用户。 如果你还考虑了支持的浏览器的多样性和更改它们的api的速度,那么你就得到了一个非常重要的( 无论在意义上还是在意义上)。 视频播放器是我们应用的核心,它需要非常快速地适应各种错误。

    许多当前的视频播放器实现主要依赖于传统的面向对象的层次结构和带有共享可变对象的命令式事件回调来管理所有这些异步任务和状态。 我们发现,通过添加React性编程方法,我们可以获得更多的收益,最显著的情况是的RxJS库的帮助。

    RxJS提供了优雅的接口和操作符,通过representating变化状态将异步任务组合为可以观察的值流。 此外,它还带有一个 cancelation cancelation契约,以便在系统丢弃时,可以正确地释放每个异步副作用。 这种范式的改变很好地满足了我们的大多数需求。

    此外,在应用程序中编写RxPlayer而不是普通JavaScript给我们更多的工具和对代码库的信心。 我们可以将所有这些元素构建为可以维护的可以维护的和代码codebase代码库,让我们快速适应不断变化的环境。

    目标支持

    以下是支持的平台的基本列表:

    Chrome IE [1] 边缘 Firefox Safari Opera
    Windows> = 30> = 11> = 12> = 42> = 8> = 25
    OSX> = 30--> = 42> = 8> = 25
    Linux> = 37--> = 42-> = 25
    Android [2 ]> = 30--> = 42-> = 15
    iOS不是--不是不是不是

    [1] 仅在 Windows> = 8上。

    [2] Android版本> = 4.2

    我们应该知道播放器是否应该支持浏览器,这是为了访问页面 https://www.youtube.com/html5,并检查对MSE和的支持