当前位置：首页 > 科技 > 软件

十个靠谱的 Html 端视频播放器 JavaScript 库

来源：责编：时间：2024-07-23 07:16:57 57观看

导读由于视频更能形象的展示现实世界的内容，如今的互联网已经离不开视频，视频具有比单独的文本或图像更加有吸引力，也更能有效地传达信息。现在各类平台都在利用视频播放器提供教程、演示、娱乐以及交互式互动等内容，以保持用

由于视频更能形象的展示现实世界的内容，如今的互联网已经离不开视频，视频具有比单独的文本或图像更加有吸引力，也更能有效地传达信息。现在各类平台都在利用视频播放器提供教程、演示、娱乐以及交互式互动等内容，以保持用户参与度，提高留存率。

下面主要推荐一些比较好的JavaScript视频播放器组件库。

1.VideoJS（GitHub Star 37K）

https://github.com/videojs/video.js

VideoJS是一个HTML5视频播放器，它使用的是浏览器中的HTML5视频标签，并使用JavaScript来添加自定义控件、扩展功能，并修复跨浏览器的错误。

2.Plyr（Github star 26K）

https://github.com/sampotts/plyr

Plyr是一个易用、轻量级、可定制的HTML5媒体播放器，支持大部分最新浏览器。

3.HLS.js（Github star 14.5K）

https://github.com/video-dev/hls.js

HLS.js是一个实现了HTTP Live Streaming客户端的JavaScript库。它依赖于HTML5视频和MediaSource。

HLS.js的工作原理是：将MPEG-2传输流和AAC/MP3流转换为ISO BMFF（MP4）片段。当浏览器中提供Web Worker时，使用Web Worker异步执行变形。HLS.js可以直接在HTML标准元素之上运行。并且支持HLS + fmp4。

HLS.js库是用ECMAScript 6（.js）和TypeScript（.ts ES 6的强类型）编写的，并使用Babel和TypeScript编译器在ECMAScript5中编译。

4.Clappr（Github star 7K）

https://github.com/clappr/clappr

Clappr是一个高度可定制的HTML5视频播放器。

5.Mediaelement（Github star 8.2K）

https://github.com/mediaelement/mediaelement

这是一个MP4、WebM和MP3的HTML5音频或视频播放器，也支持HLS、Dash、YouTube、Facebook、SoundCloud和其他HTML5通用MediaElement API，可在所有浏览器中实现一致的UI。

6.西瓜视频播放器XGPlayer（Github star 8K）

https://github.com/bytedance/xgplayer

XGPlayer是一个web视频播放器库。基于一切都是组件化的原则，它被设计为一个独立的、可拆分的UI组件。它不仅在UI层灵活，而且在功能上也很大胆：摆脱了视频加载、缓存和对视频格式的依赖。特别是在mp4上，它可以分段加载，因为它不支持流式mp4。这意味着无缝切换、高清晰度、负载控制和视频节流。它还集成了对FLV、HLS和Dash的按需、实时加载。

特性包括：

从底层解析 MP4、HLS、FLV 格式的视频，有更广的视频播放使用场景
灵活的插件体系，PC / 移动端自动切换安全的白名单机制
强大的 MP4 视频播放控制，点播无缝切换，带宽节省显著
拥有完整的产品机制，错误的监控上报和自动的降级处理
在兼容性方面，xgplayer.js 支持直接播放 MP4 视频：
PC端播放HLS、FLV、MPEG-DASH需要浏览器支持 Media Source Extensions。
iOS端支持直接播放 mp4 和 HLS。
安卓端支持直接播放 mp4 和 HLS，播放FLV、MPEG-DASH 需要浏览器支持 Media Source Extensions。

7.Shaka Player(Github Star 7K)

https://github.com/shaka-project/shaka-player

Shaka Player是一个用于自适应媒体的开源JavaScript库。它在浏览器中播放自适应媒体格式（如DASH，HLS和MSS），而无需使用插件或Flash。相反，Shaka Player使用开放的Web标准MediaSource Extensions和Encrypted Media Extensions。

Shaka Player还支持使用IndexedDB离线存储和播放媒体。内容可以存储在任何浏览器上。

8.Lightgallery.js（Github Star 5.3k）

https://github.com/sachinchoolur/lightGallery

Lightgallery是一个轻量级的、模块化的JavaScript图像和视频灯箱画廊插件。适用于React.js、Vue.js、Angular和TypeScript。是一个免费功能齐全的JavaScript播放器，带有几十个视频播放功能，且无外部依赖性。

9.H5player(Github Star 2.9K)

https://github.com/xxxily/h5player

这款h5播放器支持所有音视频网站，比如TikTok、YouTube、Bilibili、TED、Instagram、Twitter等。

它的功能包括：可变播放速度，屏幕捕捉，视频下载，自定义设置和扩展等，为您提供愉快的在线音频和视频播放体验。

允许键盘快捷键进行全程控制，支持播放速度控制、视频截图、画中画、网页全屏、调节亮度、饱和度、对比度等功能，增强自定义配置可用性，为用户提供愉悦的在线视频播放体验。

10.Media Chrome（Github star 1.1K）

https://github.com/muxinc/media-chrome

Media Chrome是一个完全可定制化的媒体播放器控件，使用Web组件（本地自定义元素）。

主要特性包括：

兼容任何JavaScript框架（React，Angular，Svelte等）
与<video>和<audio>元素以及许多播放器（YouTube、HLS.js等）兼容
支持简单地添加/删除HTML控件
支持简单地控制CSS样式

实现案例如下：https://codepen.io/heff/pen/ZEGdBzN?editors=1000

本文链接：http://www.28at.com/showinfo-26-102906-0.html十个靠谱的 Html 端视频播放器 JavaScript 库

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 11 个高级 Web 工程师必备的 Web API

下一篇：深度选择器探秘：/deep/、>>>、::v-deep 与 v-deep() 的区别与用法

标签：

热门焦点

5月安卓手机好评榜：魅族20 Pro夺冠

性能榜和性价比榜之后，我们来看最后的安卓手机好评榜，数据来源安兔兔评测，收集时间2023年5月1日至5月31日，仅限国内市场。第一名：魅族20 Pro好评率：97.50%不得不感慨魅族老品牌还
线程通讯的三种方法！通俗易懂

线程通信是指多个线程之间通过某种机制进行协调和交互，例如，线程等待和通知机制就是线程通讯的主要手段之一。在 Java 中，线程等待和通知的实现手段有以下几种方式：Object 类下
WebRTC.Net库开发进阶，教你实现屏幕共享和多路复用！

WebRTC.Net库：让你的应用更亲民友好，实现视频通话无痛接入！除了基本用法外，还有一些进阶用法可以更好地利用该库。自定义 STUN/TURN 服务器配置WebRTC.Net 默认使用 Google 的
三星Galaxy Z Fold5今日亮相：厚度缩减但仍略显厚重

据官方此前宣布，三星将于7月26日也就是今天在韩国首尔举办Unpacked活动，届时将带来带来包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
三星Galaxy Z Fold/Flip 5国行售价曝光：最低7499元/12999元起

据官方此前宣布，三星将于7月26日也就是明天在韩国首尔举办Unpacked活动，届时将带来带来包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
回归OPPO两年，一加赢了销量，输了品牌

成为OPPO旗下主打性能的先锋品牌后，一加屡创佳绩。今年618期间，一加手机全渠道销量同比增长362%，凭借一加 11、一加 Ace 2、一加 Ace 2V三款爆品，一加
OPPO K11搭载长寿版100W超级闪充：26分钟充满100%

据此前官方宣布，OPPO将于7月25日也就是今天下午14:30举办新品发布会，届时全新的OPPO K11将正式与大家见面，将主打旗舰影像，和同档位竞品相比，其最大的卖
Counterpoint ：OPPO双旗舰战略全面落地高端产品销量增长22%

2023年6月30日，全球行业分析机构Counterpoint Research发布的《中国智能手机高端市场白皮书》显示，中国智能手机品牌正在寻求高质量发展，中国高端智能
onebot M24巧系列一体机采用轻薄机身设计，现已在各平台开售

onebot M24 巧系列一体机目前已在线上线下各平台同步开售。onebot M24 巧系列采用一体化轻薄机身设计，最薄处为 10.15mm，拥有宝石红、午夜蓝、石墨绿、雅致