![Video.js logo][logo]
# [Video.js - HTML5 Video Player][vjs]
[![Build Status][travis-icon]][travis-link]
[![Coverage Status][coveralls-icon]][coveralls-link]
[![Greenkeeper badge](https://badges.greenkeeper.io/videojs/video.js.svg)](https://greenkeeper.io/)
[![Slack Status][slack-icon]][slack-link]
[![NPM][npm-icon]][npm-link]
> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins][plugins]). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over ~~50,000~~ ~~100,000~~ ~~200,000~~ [400,000 websites][builtwith].
## Table of Contents
* [Quick Start](#quick-start)
* [Contributing](#contributing)
* [Code of Conduct](#code-of-conduct)
* [License](#license)
## Quick Start
Thanks to the awesome folks over at [Fastly][fastly], there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's `<head>`:
```html
<link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>
```
> For the latest version of video.js and URLs to use, check out the [Getting Started][getting-started] page on our website.
Video.js version 7 (and newer) CDN builds do not send any data to Google Analytics.
In older versions of Video.js (6 and earlier), in the `vjs.zencdn.net` CDN-hosted versions we include a [stripped down Google Analytics pixel](https://github.com/videojs/cdn/blob/master/src/analytics.js) that tracks a random sampling (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global before including Video.js via the free CDN:
```html
<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
```
Alternatively, you can include Video.js by getting it from [npm](https://videojs.com/getting-started/#install-via-npm), downloading from [GitHub releases](https://github.com/videojs/video.js/releases) or by including it via [unpkg](https://unpkg.com) or another JavaScript CDN like CDNjs. These releases _do not_ include Google Analytics tracking at all.
```html
<!-- unpkg : use the latest version of Video.js -->
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>
<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video.min.js"></script>
```
Next, using Video.js is as simple as creating a `<video>` element, but with an additional `data-setup` attribute. At a minimum, this attribute must have a value of `'{}'`, but it can include any Video.js [options][options] - just make sure it contains valid JSON!
```html
<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="https://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
```
When the page loads, Video.js will find this element and automatically setup a player in its place.
If you don't want to use automatic setup, you can leave off the `data-setup` attribute and initialize a `<video>` element manually using the `videojs` function:
```js
var player = videojs('my-player');
```
The `videojs` function also accepts an `options` object and a callback to be invoked
when the player is ready:
```js
var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
// In this context, `this` is the player that was created by Video.js.
this.play();
// How about an event listener?
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
```
If you're ready to dive in, the [Getting Started][getting-started] page and [documentation][docs] are the best places to go for more information. If you get stuck, head over to our [Slack channel][slack-link]!
## Contributing
Video.js is a free and open source library, and we appreciate any help you're willing to give - whether it's fixing bugs, improving documentation, or suggesting new features. Check out the [contributing guide][contributing] for more!
_Video.js uses [BrowserStack][browserstack] for compatibility testing._
## [Code of Conduct][coc]
Please note that this project is released with a [Contributor Code of Conduct][coc]. By participating in this project you agree to abide by its terms.
## [License][license]
Video.js is [licensed][license] under the Apache License, Version 2.0.
[browserstack]: https://browserstack.com
[builtwith]: https://trends.builtwith.com/media/VideoJS
[contributing]: CONTRIBUTING.md
[coveralls-icon]: https://coveralls.io/repos/github/videojs/video.js/badge.svg?branch=master
[coveralls-link]: https://coveralls.io/github/videojs/video.js?branch=master
[docs]: https://docs.videojs.com
[fastly]: https://www.fastly.com/
[getting-started]: https://videojs.com/getting-started/
[license]: LICENSE
[logo]: https://videojs.com/logo-white.png
[npm-icon]: https://nodei.co/npm/video.js.png?downloads=true&downloadRank=true
[npm-link]: https://nodei.co/npm/video.js/
[options]: docs/guides/options.md
[plugins]: https://videojs.com/plugins/
[slack-icon]: http://slack.videojs.com/badge.svg
[slack-link]: http://slack.videojs.com
[travis-icon]: https://travis-ci.org/videojs/video.js.svg?branch=main
[travis-link]: https://travis-ci.org/videojs/video.js
[vjs]: https://videojs.com
[coc]: CODE_OF_CONDUCT.md
没有合适的资源?快使用搜索试试~ 我知道了~
video.js-main_open_js_
共481个文件
js:213个
html:86个
json:44个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 1 下载量 99 浏览量
2021-09-30
07:30:40
上传
评论
收藏 2.11MB ZIP 举报
温馨提示
Video.js - open source HTML5 & Flash video player
资源推荐
资源详情
资源评论
收起资源包目录
video.js-main_open_js_ (481个子文件)
.babelrc 126B
main.css 170KB
guides-gh.css 14KB
guides.css 2KB
api-docs.css 2KB
api-index.css 704B
videojs.css 330B
.editorconfig 239B
fontawesome-webfont.eot 69KB
embeds.html.example 7KB
hotkeys.html.example 6KB
middleware-play.html.example 5KB
icons.html.example 4KB
responsive.html.example 4KB
autoplay-tests.html.example 4KB
combined-tracks.html.example 3KB
pip-disabled.html.example 3KB
language.html.example 3KB
double-sub-video.html.example 3KB
descriptions.html.example 2KB
focus-visible.html.example 2KB
flash.html.example 2KB
plugin.html.example 2KB
vertical-volume.html.example 2KB
index.html.example 2KB
hls.html.example 1KB
liveui.html.example 1KB
live.html.example 1KB
.gitignore 369B
player.html 85KB
html5.html 69KB
flash.html 57KB
video.html 55KB
tech.html 52KB
audio-track-button.html 47KB
playback-rate-menu-button.html 46KB
volume-bar.html 46KB
seek-bar.html 45KB
chapters-button.html 44KB
slider.html 43KB
captions-button.html 43KB
subtitles-button.html 43KB
modal-dialog.html 43KB
error-display.html 43KB
menu-button.html 43KB
text-track-display.html 41KB
off-text-track-menu-item.html 41KB
component.html 41KB
caption-settings-menu-item.html 41KB
text-track-menu-item.html 41KB
playback-rate-menu-item.html 41KB
chapters-track-menu-item.html 41KB
play-toggle.html 41KB
poster-image.html 40KB
volume-menu-button.html 40KB
popup-button.html 40KB
menu-item.html 40KB
text-track-settings.html 40KB
mute-toggle.html 40KB
clickable-component.html 40KB
big-play-button.html 40KB
menu.html 40KB
button.html 40KB
fullscreen-toggle.html 40KB
remaining-time-display.html 38KB
current-time-display.html 38KB
duration-display.html 38KB
load-progress-bar.html 38KB
popup.html 37KB
mouse-time-display.html 37KB
progress-control.html 37KB
time-divider.html 37KB
volume-control.html 37KB
play-progress-bar.html 37KB
custom-control-spacer.html 37KB
volume-level.html 37KB
spacer.html 37KB
live-display.html 37KB
loading-spinner.html 37KB
control-bar.html 37KB
languages.html 18KB
text-tracks.html 15KB
setup.html 9KB
tech.html 7KB
options.html 6KB
video-tracks.html 5KB
audio-tracks.html 4KB
html-track-element.html 4KB
text-track-button.html 4KB
glossary.html 4KB
plugins.html 4KB
skins.html 4KB
components.html 4KB
loader.html 4KB
close-button.html 4KB
api.html 3KB
removing-players.html 3KB
index.html 2KB
index.html 2KB
index.html 2KB
共 481 条
- 1
- 2
- 3
- 4
- 5
资源评论
- a2486923312022-04-18用户下载后在一定时间内未进行评价,系统默认好评。
爱牛仕
- 粉丝: 96
- 资源: 4716
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功