videojs 插件（video.js中文文档一）
Video.js (当前版本 v7.18.1)提供了下列的一些使用方法，但是你应该选择最适合你使用的方式去使用，今天小编就来聊一聊关于videojs 插件?接下来我们就一起去研究一下吧!
videojs 插件
下载Video.js (当前版本 v7.18.1)提供了下列的一些使用方法，但是你应该选择最适合你使用的方式去使用。
Video.js CDN我们在Fastly上提供了video.js所需必须的足够多的文件，通过引用这些托管文件可能是使用video.js最简单的方法，你只需要在你的页面按照下列方式使用即可。
<head>
<link href="http://vjs.zencdn.net/7.18.1/video-js.CSS" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<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>
<script src="http://vjs.zencdn.net/7.18.1/video.min.js"></script>
</body>
对于更高级的工程可以使用NPM进行安装
$ npm install --save-dev video.js
由于IE浏览器已经基本被市场淘汰，所以这块内容不做翻译，如果真的遇到IE浏览器的问题，建议大家访问官网（http://videojs.com/getting-started/#internet-explorer-support）解决
谷歌分析（Google Analytics）我们内置了一个精简的谷歌分析器，用于通过跟踪和分析用户从CDN加载的随机百分比来了解当前使用的浏览器，以及一些其他有用的指标属性，如系统和设备。如果你想禁用分析，你可以通过设置下面的全局属性即可。
window.HELP_IMPROVE_VIDEOJS = false;
注意：v7不会发送任何数据，而v6.8及以上版本尊重浏览器的不跟踪标志。
下载的包是什么？如果您已经下载了其中的一个版本，或者通过包管理器安装了它，您可能会注意到其中的内容与github上提供的源代码略有不同。前者只包含使用Video.js所需的编译文件，而后者包含用于创建这些文件的源代码。
结构目录如果你下载了了一个发行版或者通过包管理工具安装了一个video.js，就会发现下面的目录结构：
Video.js/
├── alt
│ ├── video.core.js
│ ├── video.core.min.js
│ ├── video.core.novtt.js
│ ├── video.core.novtt.min.js
│ ├── video.novtt.js
│ └── video.novtt.min.js
├── examples/
├── font
│ ├── VideoJS.svg
│ ├── VideoJS.ttf
│ └── VideoJS.woff
├── Lang/
├── video-js-<span class="vjs-version">$LATEST_VERSION$</span>.zip
├── video-js.css
├── video-js.min.css
├── video.cjs.js
├── Video.es.js
├── Video.js
└── video.min.js
该包包含了Video.js在生产站点上使用所需的所有内容。默认情况下，我们将Video.js与Mozilla的VTT.js捆绑在一起。如果你不需要VTT.js功能，你可以使用Video.js的一个副本，它不包括VTT.js。它们的名称中有novtt，可以在alt/目录中找到。font/包含了Videojs font项目中生成的所有图标字体文件。Lang /包含所有生成的翻译文件。
源码你可以在git仓库中中发现video.js的所有源码。它包含了所有用以构建video.js生产版本，以及开发工具和案例所必须的工具和源文件。
因为在互联网上，很多包管理都是使用项目根目录下的JSON配置文件。大多重要的东西都在src/和build目录下。src/目录下包含了所有的用户的js源文件和一些基础样式。build目录包含了所有grunt.js构建工具，构建任务的源文件
构建工具使用前你需要先安装Node.js,详情可以查看CONTRIBUTING.md（http://github.com/videojs/video.js/blob/main/CONTRIBUTING.md#contributing-code）
客制化直接使用Video.js是可以的，但是如果你想做更好播放器，那么你也可以客制化更好的客制化你的插件和样式。
皮肤
播放器皮肤完全由HTML和CSS构建，包括使用Flash和YouTube等其他播放器时。
皮肤的改变可以简单到将播放按钮置于中心(你可以将“vjs-big-play-centered”类添加到你的视频标签中)，也可以复杂到创建全新的布局。我们已经建立了一个代码依赖的项目，在那里你可以探索不同的变化。
主页主题主页中的主题来自Videojs主题库。要在您的播放器中使用它们，请导入CSS，然后将相关的类添加到您的视频标签。例如，如果你想使用City主题，你可以这样设置你的HTML:
<!-- In the head of your document with your other CSS includes... -->
<!-- Video.js base CSS -->
<link
href="http://unpkg.com/video.js@7/dist/video-js.min.css"
rel="stylesheet"
/>
<!-- City -->
<link
href="http://unpkg.com/@videojs/themes@1/dist/city/index.css"
rel="stylesheet"
/>
<!-- Then, in the player -->
<video class="video-js vjs-theme-city" ...></video>
很好的开始是设计你自己的video.js皮肤，我们建议使用CSS的级联方面来简单地覆盖你想定制的设计部分。
插件Video.js本身非常简单。它支持基本的视频和音频播放特性，并确保它们在不同的播放技术(“techhs”)之间工作相同。任何更高级的功能都是作为插件构建的，包括播放列表、分析、广告，以及对HLS和DASH等高级格式的支持。查看插件页面，看看有什么可用的。
插件库：http://videojs.com/plugins/
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
