当HTML5引入了和标签后，它们使得你的媒体文件真正可以访问互联网。HTML5视频正在快速替代Flash Player和其他类似的第三方媒体播放器。从历史上看，让媒体正确播放是一个相当麻烦的过程。
HTML5音频和视频标签的不同之处在于它们将文件视为图像。可以在标签中定义类似于任何其他HTML元素的属性，如高度、宽度和自动播放 -
<video src=”url” width=”640px” height=”380px” autoplay/>
为什么选择开源播放器？
开源视频播放器相对于使用专有软件开发的播放器具有一些优势。许多企业和个人用户更喜欢选择开源路线，因为这样就消除了采购障碍。
使用专有软件构建的视频播放器使用私有源代码，并通过许可证提供，用户需要在能够使用播放器之前支付并同意不同的条款和条件。
鉴于安全方面的大幅提高，补丁和错误修复的可用性，开源视频播放器可以免费使用，没有许可费用和繁琐的合同。一些其他的好处包括 -
免费使用
对于普通公众来说，开源媒体播放器是完全免费的，可以下载和使用。甚至可以审核和评估源代码。一些开源媒体播放器供应商包括他们的软件包的免费版本用于试用目的，其中也包括源代码。
几乎没有错误和快速修复
流行的开源视频播放器有成千上万的人浏览代码；因此，识别错误的机会要比专有媒体播放器大得多，专有媒体播放器的开发组织会有远远较小的IT人员。此外，开源社区通常更快地开发和实施修补程序、补丁或解决方法。
可定制的潜力
开源视频播放器可以定制和修改以满足组织或个人的特定要求。另一方面，对于专有视频播放器，你所能做的最多就是提交功能请求和增强，以更好地符合你的需求。这取决于开发组织是否考虑它们。
免费和即时的支持
当涉及到开源视频播放器时，无论它是当前处于评估阶段还是正在商业集成中，其全球开发者和用户社区始终可以回答问题并提供建议。此支持可以包括详细的文档、维基、新闻组、论坛、电子邮件列表以及实时聊天。所有这些都是完全免费的。
前5个开源播放器
在本节中，我们编制了一个包含5个开源HTML5媒体播放器的列表，我们认为它们是今天最好的开源播放器之一。
Plyr
Plyr是一个可定制且简单的HTML5、Vimeo和YouTube媒体播放器。它是轻量级、可访问和可定制的，并支持所有现代浏览器。你可以使用npm install plyr来访问完整的NPM源代码。
以下是HTML5音频和视频的一些代码示例 -
HTML5音频
<audio id=”player” controls>
<source src=”/path/to/audio.mp3" type=”audio/mp3">
<source src=”/path/to/audio.ogg” type=”audio/ogg”>
</audio>
HTML5视频
<video poster=”/path/to/poster.jpg” id=”player” playsinline controls>
<source src=”/path/to/video.mp4" type=”video/mp4">
<source src=”/path/to/video.webm” type=”video/webm”>
<! — Captions are optional →
<track kind=”captions” label=”English captions” src=”/path/to/captions.vtt” srclang=”en” default>
</video>
Video.js
Video.js是一个专为HTML5而构建的Web视频播放器，支持HTML5和Flash视频以及Vimeo和YouTube。也支持桌面和移动设备上的播放。Video.js于2010年启动，现在在约200,000个网站上得到积极使用。
Video.js的免费CDN托管版本可公开使用。你需要将以下标签添加到文档的<head>中：
<link href=”//vjs.zencdn.net/7.0/video-js.min.css” rel=”stylesheet”>
<script src=”//vjs.zencdn.net/7.0/video.min.js”></script>
使用Video.js与创建<video>元素一样简单，但增加了一个data-setup属性。此属性必须至少有一个值为'{}'，但它可以包含任何Video.js选项，只要它包含有效的JSON，如下所示 -
<video
id=”my-player”
class=”video-js”
controls
preload=”auto”
poster=”//vjs.zencdn.net/v/oceans.png”
data-setup=’{}’>
<source src=”//vjs.zencdn.net/v/oceans.mp4" type=”video/mp4"></source>
<source src=”//vjs.zencdn.net/v/oceans.webm” type=”video/webm”></source>
<source src=”//vjs.zencdn.net/v/oceans.ogv” type=”video/ogg”></source>
<p class=”vjs-no-js”>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href=”http://videojs.com/html5-video-support/” target=”_blank”>
supports HTML5 video
</a>
</p>
</video>
页面加载后，Video.js将自动设置一个播放器，一旦找到此元素。
Afterglow
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>
MediaElement.js
MediaElement.js是一个HTML5的<video>或<audio>播放器，带有Flash和Silverlight，模仿HTML5 MediaElement API，允许在浏览器中实现一致的UI。
MediaElement.js不是向现代浏览器提供HTML5播放器，并向旧浏览器提供独立的Flash播放器，而是提供了一个升级版本，带有自定义的Flash和Silverlight插件，模仿HTML5 MediaElement API。
安装MediaElement.js的完整指南在Installation中，有关创建和使用MediaElement实例的简要介绍在Usage中提供。对于任何其他功能，你可以参考他们的GitHub存储库。
jPlayer
jPlayer是一个免费的开源JavaScript媒体库。jPlayer允许你通过一个jQuery插件，将跨平台音频和视频快速编织到你的网页中。它的全面API支持创新的媒体解决方案，而支持则由jPlayer的活跃的开源用户和开发者社区提供。jPlayer提供了一个很好的PHP包，你可以使用composer进行安装。你需要在你的项目中的composer.json文件中添加以下内容：
// …
“require”: {
// …
“happyworm/jPlayer”: “2.*”
// …
}
// …
“config”: {
“component-dir”: “your/desired/asset/path”
},
// …
完成后，你可以执行以下命令：
php composer.phar update
Composer现在将下载所有组件并将所需的文件安装到指定路径中。
其他你应该知道的视频播放器
如果你感兴趣，这里有一些最好的非开源HTML5视频播放器值得一提 -
Cloudinary
这个由Cloudinary提供的HTML5视频播放器主要面向企业和商业用户。它被优化以提供最佳的观看体验，支持高分辨率视频和自适应流媒体。
然而，Cloudinary视频播放器的独特之处在于它为你的视频资产提供视频编码、操作和托管服务。视频转换发生在播放器级别，并且在运行时进行。它包含轻量级和易于使用的嵌入代码，允许简单地将其集成到组织的网站中。
Cloudinary内置的视频分析提供了有关观看者与视频的互动的实时可操作数据，并报告视频的性能以及转化率。
JW Player
JW Player扩展了其支持以允许HTML5视频播放。它是完全可定制的，具有响应式HTML5视频和各种令人兴奋的功能，从可访问性到分析到完整的HTML5视频控件。
JW Player作为WordPress网站的HTML5视频播放器非常出色。它也兼容作为YouTube视频播放器的备选方案。JW Player还支持一系列用户定义的主题。它的许多插件与更受欢迎的CMS一致，使集成相对容易和快速。
Kaltura HTML5视频播放器
Kaltura Player是一个免费的开源HTML5视频播放器，用于创建多个定制的设备间和浏览器间的皮肤，以匹配或补充你的网站。一些关键特性包括：
- 多平台支持
- 高效的全面表现
- 广告和分析支持
评论(0)