原文:
Getting Started with Video.js - Video.js: The Player Framework
目录
- Download
- CDN
- npm
- Bower What’s in the box
- Distribution
- Source code Build
- Install Grunt
- Fork & clone Video.js
- Create upstream remote
- Install dependencies
- Build it! Customize
- Skinning
- Plugins
Video.js 入门
概述如何开始使用Video.js,从基本的CDN使用到Browserify,以及示例。
下载
有几种方法可以开始使用Video.js(目前 v6.6.3),但您应该选择最适合您特定的使用方法。
无论您最终将Video.js包含在您的项目中,都应记住一些常见事项。核心代码库使用Javascript(ES5)的一些现代功能,因此如果您想支持IE8,则需要包含ES5垫片。为了更容易,我们创建了一个可以包含IE8支持的文件。无论核心Video.js库放置在哪里,该文件都需要位于
<head>
文档中。
Video.js CDN
我们的朋友Fastly非常善于为其内容传送网络上的Video.js的所有必需文件提供托管。使用这些托管文件可能是开始使用Video.js最简单的方法,您只需在页面中包含以下链接即可。
<head>
<link href="https://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/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="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
</body>
谷歌分析
我们包含精简的Google Analytics(分析)像素,可跟踪从CDN加载的玩家的随机比例(目前为1%)。这使我们能够(粗略地)看到哪些浏览器正在使用,以及其他有用的指标,如操作系统和设备。如果您想停用分析功能,则可以在通过免费CDN添加Video.js之前简单包含以下全局内容:
window.HELP_IMPROVE_VIDEOJS = false;
通过npm安装
对于更高级的工作流程,建议通过npm进行安装
通过Bower安装
Video.js也可在Bower.io上找到。
$ bower install video.js
盒子里有什么东西?
如果您已下载其中一个发行版或通过软件包管理器进行安装,您可能已经注意到,这些内容与Github上提供的源代码略有不同。前者包含使用Video.js所需的编译文件,另一个包含用于创建这些文件的源代码。
分布
如果您已下载发行版或通过软件包管理器安装,则可以找到Video.js发行版。
video.js/
├── alt
│ ├── video.novtt.js
│ ├── video.novtt.min.js
│ └── video.novtt.min.js.map
├── examples/
├── font
│ ├── VideoJS.eot
│ ├── VideoJS.svg
│ ├── VideoJS.ttf
│ └── VideoJS.woff
├── ie8
│ ├── videojs-ie8.js
│ └── videojs-ie8.min.js
├── lang/
├── video-js-.zip
├── video-js.css
├── video-js.min.css
├── video-js.swf
├── video.js
├── video.js.map
├── video.min.js
└── video.min.js.map
该软件包包含在生产站点上使用Video.js所需的一切。默认情况下,我们将Video.js与Mozilla的优秀VTT.js捆绑在一起。如果您出于某种原因不需要VTT.js功能,则可以使用其中一个不包含VTT.js的Video.js副本。这些
novtt
名称可以在
alt/
目录中找到。
font/
包括来自Videojs字体项目的所有生成的图标字体文件。
ie8/
包含支持IE8所需的垫片,并
lang/
包含所有生成的翻译文件。
源代码
源代码是检查Video.js git存储库时可以找到的所有内容。这包括构建Video.js的生产就绪版本所需的所有源文件和任何工具,以及有用的开发工具,如沙箱实例。
video.js/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── build/
├── component.json
├── composer.json
├── contrib.json
├── dist/
├── docs/
├── lang/
├── package.json
├── sandbox/
├── src/
│ ├── css
│ └── js
└── test/
因为互联网,很多根源目录是JSON为各种软件包管理器配置的。最有可能的是你正在寻找的重要事物将在
src/
和
build/
。
src/
包含播放器JS和基本皮肤的所有源文件,而
build/
目录包含各种grunt任务以及主构建文件——
grunt.js
。
构建工具
Video.js使用称为Grunt的taskrunner作为其构建管道。在开始之前,您需要安装Node.js。
安装Grunt
这可能需要
sudo
。
分叉并克隆存储库
对Video.js的贡献需要通过你自己的仓库分支完成。即使你不打算立即这样做,我们建议创建你自己的分支 ,以防万一你想要在路上做出贡献。
设置一个上游遥控
为了能够在未来为Video.js提取上游,您可以设置上游遥控。
$ git checkout master
$ git remote add upstream https://github.com/videojs/video.js.git
$ git pull upstream master
安装依赖关系
依赖关系通过与Node.js一起安装的npm安装
$ npm install
建立起来!
用于生产
根据你想要做什么,有几种不同的方式来构建源代码。当我们发布新版本时,我们会这样做。
$ grunt dist
这样可以隐藏代码库,运行测试,构建Video.js,并将生产所需的所有内容放在
dist
目录中。
用于开发
为了使用ES6功能,我们需要使用Babel来传输源代码。这意味着在开发过程中我们必须观察变化的来源,以便在测试时重建。
$ grunt dev
这将在
build
目录中保留更新的代码,从而允许使用Sandbox演示文件。为了方便起见,这也运行本地http服务器,以便您可以通过localhost:9999/sandbox访问沙箱。
定制
使用Video.js可以直接使用,但我们认为如果您自己创作,它会更好。插件和皮肤可以完全自定义您的播放器。
皮肤
玩家皮肤完全由HTML和CSS构建,包括使用Flash和其他玩家如YouTube的情况。
皮肤的变化可以像对准播放按钮一样简单(您可以将’vjs-big-play-centered’类添加到视频标签中),或者像创建全新布局一样复杂。我们已经构建了一个codepen项目,您可以在其中探索不同的更改。
Video.js皮肤设计器
如果你知道CSS,你总是可以打开你的Chrome开发工具并破解!
插件
Video.js本身是非常简单的。它支持基本的视频和音频播放功能,并确保它们在不同的播放技术(“技术人员”)之间保持一致。任何更高级的功能都是作为插件构建的,包括播放列表,分析,广告以及对高级格式(如HLS和DASH)的支持。查看插件页面查看可用的内容。
Video.js插件