7+最佳HTML5媒体播放器javascript插件

本文概述

7. Projekktor
6. jPlayer
5. MediaElement.js
4. Afterglow
3. Popcorn.js
2. Video.js
1. Plyr
LeanBack Player

播放音乐, 自制视频, 纪录片(并且希望与盗版有关的任何东西)。我们不需要从头开始, 也不必阅读有关<video> html标签以及如何使用javascript进行操作或学习如何处理兼容性问题等知识。请保持聪明并使用插件。此顶部提供的插件将处理较艰巨的任务, 例如兼容性, 旧浏览器的后备方式等, 使你的生活更加轻松。

享受以下网络上最强大的7个媒体播放器插件的集合。

7. Projekktor

Github |演示版

Projekktor是一个以Java脚本编写的, 用于Web的自托管, 开源视频(和音频)播放器, 在GPLv3下发布。通过解决大量的跨浏览器和兼容性问题, 增加了视觉吸引力, 并提供了非常强大的非标准功能, 它简化了你实施和使用网络视频的方式。

Projekktor自动检测播放内容的最佳方法。不管是否通过Flash, VLC Web插件或本地HTML5视频：Javascript API的工作原理相同。专注于工作中有趣的部分, 让Projekktor做好肮脏的工作。

不同的平台, 一种外观和行为。 Projekktor为你的用户提供一致的体验。无论它们是通过台式机还是移动设备提供的。没有检测到用户代理, 没有嵌套的标记技巧, 而是一个播放器, 其工作原理和外观相同。

6. jPlayer

Github |演示版

jPlayer是使用JavaScript编写的完全免费的开源(MIT)媒体库。一个jQuery插件(和Zepto)jPlayer允许你将跨平台的音频和视频快速地编织到你的网页中。 jPlayer全面的API可让你创建创新的媒体解决方案, 同时jPlayer活跃且不断发展的社区提供了支持和鼓励。

易于入门, 几分钟即可部署。
使用HTML和CSS完全可定制和可换肤。
轻巧-仅压缩和压缩了14KB。
免费和开源, 没有许可限制。
活跃且不断发展的社区提供支持。
适用于流行平台的免费插件。
广泛的平台支持-多编解码器, 跨浏览器和跨平台。
全面的文档和入门指南。
所有浏览器, HTML5或Adobe®Flash™中一致的API和接口。
可扩展的体系结构。
HTML5：mp3, mp4(AAC / H.264), ogg(Vorbis / Theora), webm(Vorbis / VP8), wav。
Flash：mp3, mp4(AAC / H.264), rtmp, flv。

5. MediaElement.js

Github |演示版

带有Flash和Silverlight垫片的HTML5 <音频>或<视频>播放器, 模仿HTML5 MediaElement API, 从而在所有浏览器中实现一致的UI。 MediaElement.js并没有为现代浏览器提供HTML5播放器, 而是为较旧的浏览器提供了完全独立的Flash播放器, 而是通过模仿HTML5 MediaElement API的自定义Flash和Silverlight插件对其进行了升级。许多出色的HTML5播放器在后备模式下具有完全独立的Flash UI, 但是MediaElementPlayer.js对所有播放器都使用相同的HTML / CSS。

纯HTML和CSS中的HTML5音频和视频播放器。
模仿旧版浏览器的HTML5 MediaElement API的自定义Flash和Silverlight播放器。
辅助功能标准, 包括WebVTT。

4. Afterglow

Github |演示版

afterglow是一种工具, 可以以最小的努力从HTML5视频元素创建完全响应且功能强大的视频播放器。

它的初始化非常简单, 并提供了对不同质量的支持：

<!DOCTYPE html>
<html>
 <head>
 <title>afterglow player</title>
 <script type="text/javascript" src="//cdn.jsdelivr.net/afterglow/latest/afterglow.min.js"></script>
 </head>
 <body>
 <video class="afterglow" id="myvideo" width="1280" height="720">
 <source type="video/mp4" src="/path/to/myvideo.mp4" />
 </video>
 </body>
<html>

3. Popcorn.js

Github |演示版

Popcorn.js是一个JavaScript库, 它允许视频, 音频和其他媒体进行控制, 并可以由网页的任意元素控制。结合开源Web技术, 作者可以让他们的媒体成为交互式和身临其境的体验的”指挥”。 Popcorn.js是一个用JavaScript编写的HTML5媒体框架, 适用于电影制片人, 网络开发人员以及所有想要在网络上创建基于时间的交互式媒体的人。 Popcorn.js是Mozilla的Popcorn项目的一部分, Popcorn.js由Mozilla带给你。

Popcorn.js是HTML5媒体的事件框架。 Popcorn.js利用本机HTMLMediaElement属性, 方法和事件, 将它们标准化为易于学习的API, 并为社区贡献的交互提供了一个插件系统。

媒体包装器允许Popcorn与HTML5视频和音频以外的其他各种类型的媒体一起使用。这意味着它可以与YouTube, Vimeo和SoundCloud一起使用。这为各种媒体与Popcorn.js合并提供了潜力。在项目中使用Popcorn是一种轻松的体验, 需要大约7行JavaScript才能完成(请参见此处的基本入门教程)。

2. Video.js

Github |演示版

Video.js是专为HTML5世界打造的网络视频播放器。它支持HTML5和Flash视频, 以及YouTube和Vimeo(通过插件)。它支持在台式机和移动设备上播放视频。该项目始于2010年中期, 该播放器现已在200, 000个网站上使用。

1. Plyr

Github |演示版

Plyr是一种简单, 可访问且可自定义的HTML5, YouTube和Vimeo媒体播放器。它是轻巧, 可访问且可自定义的媒体播放器, 支持现代浏览器。 Plyr使用正确的元素来使事情变得非常简单。

特征

可访问-完全支持VTT字幕和屏幕阅读器。
轻量级-压缩后小于10KB。
可自定义-使播放器以所需的标记呈现所需的样式。
语义-使用正确的元素。 <input type =” range”>表示音量, <progress>表示进度, 以及<button>表示按钮。没有<span>或<a href=”#”>按钮黑客。
响应式-就像你最近所期望的那样。
HTML视频和音频-支持两种格式。
嵌入式视频-支持YouTube和Vimeo视频播放。
API-切换播放, 音量, 搜索等。
通用事件-不会弄乱Vimeo和YouTube API, 所有事件在所有格式之间都是通用的。
全屏-支持本机全屏, 并回退到”全屏”模式。
i18n支持-支持控件的国际化。
没有依赖关系-用”原始” JavaScript编写, 不需要jQuery。

LeanBack Player

下载

LeanBack Player是基于Javascript的HTML5视频和音频媒体播放器UI, 使用标准浏览器, 平台和设备的内置HTML5 <video>和<audio>元素功能。它非常易于集成, 可以使用CSS进行换肤, 它独立于任何其他javascript库, 可以通过使用扩展来适应, 并且可以免费用于非商业用途, 如果你的项目是商业性的, 你就必须支付许可证。