09月06, 2017

H5播放器的革命

H5播放器的革命

前言:

   应该从2000年左右说起,Adobe Flash开始改变浏览器、改变我们的世界。直到HTML5面世之前,在浏览器里播放影音一直是Flash一家独大,但是Flash非常耗费CPU,以及不断的漏洞让人诟病(Flash仍然丰富了我们十几年的浏览器世界,向它致敬)。HTML5发布之后,video标签就可以播放视频了,不过他影响的范围还是很小的,但是自从15年直播行业的迅速崛起让更多的前端开发者去尝试使用HTML5 video标签来播放视频,甚至是直播。H5播放器已更小巧、更快速的姿态悄然步入了我们的生活。目前支持H5播放器的大厂有B站、熊猫、360等。

H5播放器的原理

    自从IE9以来开始支持以video标签播放mp4视频并且要求是H264编码(当然firfox和chrome很早很早就已经支持了),浏览器引入了H264的编解码器 。这就意味着浏览器已经逐渐的在拒绝Flash等NPAPI等插件,浏览器的功能在日益壮大。那么在这个全民直播的浪潮下,我们前端开发如何能扬帆远航呢?下面我就给大家揭开H5播放器的前世今生。
         首先为大家介绍的是 MediaSource 这个类。MediaSource是媒体资源对象的接口,它可以附着在HTMLMediaElement在浏览器中播放音视频。一个主要的方法就是 addsourceBuffer 它可以根据指定的mime类型建立 SourceBuffer。有了SourceBuffer我们就可以 往SourceBuffer里append数据了。当然数据需要遵循fmp4的结构。

alt

chimee 是什么?

chimee是一款综合性非常强的[H5播放器](https://github.com/chimeejs),它以更全的插件,丰富我们的播放器,它支持弹幕、UI、弹层,并且还同时支持mp4、flv、hls等多格式的播放。使用它可以快速让我们的网站有精美的播放器。

安装

    npm install --save chimee

用法

你可以直接使用 chimee。

假设你的页面中有一 idwrapperdiv

<body>
  <div id="wrapper">
  </div>
</body>

那么你可以直接在其上建立 chimee 实例。

import Chimee from 'chimee';
const chimee = new Chimee('#wrapper');
chimee.on('play', () => console.log('play!!'));
chimee.load('http://cdn.toxicjohann.com/lostStar.mp4');
chimee.play(); // play!!

插件

如果你需要有UI、有弹幕、有日志等功能,可以使用chimee 自带的强大插件满足业务上的需求,同时也可以自行编写插件,来满足不同的功能。 在没有配置任何皮肤插件的时候,chimee 会使用浏览器原生的皮肤。你可以尝试使用我们的皮肤插件。

import ui from 'chimee-plugin-ui';
import Chimee from 'chimee';
Chimee.install(ui);
const chimee = new Chimee({
  wrapper: '#wrapper',
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  plugin: [ui.name],
  controls: false,
  autoplay: true
});

如果你想了解更多关于 chimee 插件的知识,请点击此处

欢迎使用chimee 如果你觉得用的不错 欢迎star

本文链接:http://www.gyblog.cn/post/chimee.html

-- EOF --

Comments