1. Dotnet9首页
  2. 大前端
  3. 前端语言
  4. JavaScript

一个强大的开源HTML5视频播放器,字节出品

18

哈喽,大家好!现在短视频、直播十分的火,相信许多开发童鞋都遇到要在项目中加入视频组件的情况吧。

一般视频播放或者直播的前端组件都要有诸如弹幕、清晰度调整、倍数播放等功能,今天精选板给大家带来的就是这样一款完善的HTML5视频播放组件–xgplayer(西瓜播放器)!

一个强大的开源HTML5视频播放器,字节出品

西瓜播放器是一个HTML5播放器类库,它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。它可以作为 H5 组件、Vue、React 组件单独使用。

更重要的是它不只是在 UI 层有灵活的表现,在功能上也做了大胆的尝试:摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力,让本不支持流式播放的 mp4 能做到分段加载,这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时,它也集成了对 flv、hls、dash 的点播和直播支持。

一个强大的开源HTML5视频播放器,字节出品

而且上手开发也十分简单,官方开发文档也十分完善:

快速上手

只需三步:安装、DOM占位、实例化即可完成播放器的使用。

安装

# 最新稳定版
$ npm install xgplayer

对于已有项目也可以通过 CDN 引入,代码如下:

<script src="//cdn.jsdelivr.net/npm/xgplayer/browser/index.js" type="text/javascript"></script>

使用

1. 在页面提供占位 DOM

<div id="mse"></div>

2. 实例化

let player = new Player({  id: 'mse',  url: '//abc.com/**/*.mp4'});

就两步完成最简单的视频播放(mp4点播),播放器提供了较丰富的配置选项,如自动播放、贴图、音量控制、内置控件关闭等等,更多配置参考配置。

如果想完成直播的功能,播放器会自动识别直播或回放,更多内容请参考官方示例 。

注意

播放器核心包和插件都使用 babel 编译到 ES5。

效果

一个强大的开源HTML5视频播放器,字节出品

开源地址:https://github.com/bytedance/xgplayer

项目官网:http://h5player.bytedance.com/

一个强大的开源HTML5视频播放器,字节出品

原文出处:微信公众号【精选展示板 前端潮咖】

原文链接:https://mp.weixin.qq.com/s/hcCEUO5wc55AY1Y-I0gygw

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论