介绍
视频.js是基于HTML5世界的在线视频播放器。它支持HTML5和Flash视频，还可以通过插件支持世界上最受欢迎的视频网站。它支持在桌面和联通设备上播放视频。该项目于 2010 年年中启动，现在该播放器已在超过 400html5下载文件，000 个网站上使用，显示出它的受欢迎程度，因此它可能真的是您仍在寻找的基于 Web 的视频播放器！Github上也有超过20k +的明星！
Github地址
快速入门
您可以通过多种方式使用它，无论是使用 CDN 还是下载静态资源文件，还是使用 npm 安装来获取它：
npm install video.js
接下来，使用 Video .js就像创建元素一样简单，但具有其他数据设置属性。即配置对象，以下代码是最简单的示例：
当页面加载时，视频.js将找到此元素并手动将播放器设置在其位置。如果不想使用手动设置，可以使用 data-setup 属性并使用 videojs 函数自动初始化元素：
var player = videojs('my-player');
相关回调函数
var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
this.play();
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
详细文档
视频.js文档相当详细，这篇文章应该不会太长，如果你早就对它感兴趣，那么你可以计划针对文档学习，因为它的功能非常强大，那么对应的文档也非常详细，分为详细的 API 文档和学习手册，通过阅读文档来实现你想要的功能（下面是一个简单的截图，使用浏览器自带的翻译功能html5下载文件，易于理解）：
演示预览
官网还提供了一些比较中级用法的演示，下面是一个带有播放列表的例子（这个例子不足以显示他的韧性）：
切换视频
画
中画
丰富的菜单按钮工具（包括音频、多语言等设置），支持英文语言包
除了上面展示的演示外，还包括自定义皮肤、React 使用、插件等功能，可以说是非常丰富的，要比它自带的视频标签功能丰富无数倍，有视频网站开发的同学可以试试用，相信一定会对你有所帮助！
总结有
上千个插件，但好用的并不多，特别是比较复杂，要么收费，要么功能不够强大，但是有很多开发者贡献了开源项目供开发者使用，打造了当今技术的蓬勃发展。视频.js只是其中之一，本文只是提一下这样一个必须点赞的插件，它的详细内容远不止于此，有兴趣可以阅读相关文档了解，如果有更好的建议，也可以在评论区留言分享， 希望对您有所帮助！
如果您想让网站上的视频可以在 iOS 或 Android 设备上播放，您需要考虑两件事。 一是您网站上的视频播放器必须支持 HTML5，并且您的视频也必须支持 HTML5。 看看这个设备。
我们可以使用JWPlayer作为网站的视频播放器。 该播放器具有Flash、HTML5和下载三种模式。 也就是说html5视频播放器，如果浏览器不支持Flash模式，播放器将切换到HTML5模式。 如果不支持，可以提供下载视频的链接。 （您可以设置这些模式的顺序）
要使视频可以在 iOS 和 Android 上播放，您可以使用 AVC (h.264) 对视频进行编码，并使用 AAC 对音频进行编码。 编码视频可以使用Handbrake这个软件。
（带有发光皮肤的JWPlayer播放器）
视频
我们经常谈论视频有哪些格式，比如.mp4格式的视频，这个.mp4只是一个容器，这个容器上可能有几个东西，比如视频流、音频流，还可能包含字幕。 播放器在播放视频时，首先会检查该视频使用什么类型的容器（.mp4、.avi...）、上面存储了什么样的视频流和音频流，然后播放器会将该视频流被解码成一堆图像并显示，音频流也会被解码并发送到设备的扬声器。
将视频放到互联网上时，您必须考虑其质量和数量。 质量不能太差，体积不能太大。 所以我们必须应对，使用h.264或者AVC来编码视频，使用AAC来编码音频，这是目前比较好的选择。 他们可以在保持质量的同时降低视频的音量。
当时h.264的设计是针对不同速率的带宽和不同速率的CPU使用一种编码格式。 H.264使用一个称为配置文件（配置文件）的概念，不同的配置文件针对不同的情况进行了优化。
联通设备上可以使用低配置文件，如baselineprofile，台式笔记本上可以使用任意配置文件：baseline、main、high。
当 CPU 速率较慢且带宽较低时，使用基线配置文件。 带宽相对充足，主、高配置的h.264视频可以在CPU速率较快的设备上播放。
并不是说使用main或highprofile的h.264视频在联通设备上根本无法观看，因为现在联通设备的速度越来越快，宁好网的视频使用mainprofile，在新的iPhone或iPad上都没有问题正在观看，但有同学反映，在以前的iPad上观看时，会出现播放到一半就没有图像的情况。 我想这可能是因为宁浩网的视频使用了mainprofile。
编码软件
您需要一个编码软件来处理视频的视频流和音频流，推荐使用Handbrake。 开源软件，因此您可以免费使用它html5视频播放器，并且支持多个平台，无论您使用 Windows 还是 Mac。
（Handbrake软件截图）
玩家
您的网站需要一个视频播放器，推荐JWplayer。 您可以免费使用它，但免费版本在视频开始播放时会显示JWplayer水印，您可以付费将其删除。
JWPlayer的功能非常强大，可以给它添加插件，还可以自定义播放器的皮肤。 其官网上已经有一些现成的玩家皮肤可以直接使用。
JWPlayer也有Javascript API，如果需要的话，你可以定制这个播放器，使其更加强大。
如何在网页中嵌入 JWPlayer
下载：
注意：下载时需要填写您的邮箱地址。 另外，建议您去掉“IncludeViral, avideosharingplugin”前面的复选标记。
解压后有一堆文件，你只需要其中两个：
然后将其嵌入到网页中，如下所示：
JW Player goes here
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
file: "amazingspiderman.mp4",
width: "960",
height: "400",
skin: "glow.zip",
image: "amazingspiderman.png",
});
注意：IE浏览器会出现一些奇怪的错误。 如果发现嵌入式播放器无法显示，请勾选嵌入式播放器的最后一个选项，去掉该选项前面的“，”。 示例中的图像嵌入到播放器中 最后一个选项。
从JWPlayer官网下载您想要使用的播放器皮肤。 如果想在HTML5模式下使用相同的皮肤，需要将皮肤解压到与皮肤同名的文件夹中。 例如，在前面的示例中，我们使用的是glow.zip皮肤。 解压后，皮肤上的文件会在glow文件夹中。 但是，glow.zip 和glow 文件夹必须位于同一文件夹中。
