Video.js 入门 Getting Started with Video.js

最新推荐文章于 2024-06-16 15:54:56 发布

wxh06

最新推荐文章于 2024-06-16 15:54:56 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： Video.js video player JavaScript HTML5 Flash

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文：
Getting Started with Video.js - Video.js: The Player Framework

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进行安装

$ npm install --save-dev video.js

通过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-6.6.3.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。

$ npm install -g grunt-cli

分叉并克隆存储库

对Video.js的贡献需要通过你自己的仓库分支完成。即使你不打算立即这样做，我们建议创建你自己的分支，以防万一你想要在路上做出贡献。

$ git clone https://github.com/YOUR-GITHUB-USERNAME/video.js && cd 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插件

wxh06

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Video.js 入门 Getting Started with Video.js

原文： Getting Started with Video.js - Video.js: The Player Framework目录DownloadCDNnpmBowerWhat’s in the boxDistributionSource codeBuildInstall GruntFork &amp; clone Video.jsCr...
复制链接

扫一扫