Video.js --Getting Started!-CSDN博客

本文链接：https://blog.csdn.net/lpldplws/article/details/78933450

1.Download

Via Video.js CDN
It can provide hosting for all the necessary files for Video.js on user’s content delivery network. This is the easiest way to get started using Video.js. The code is following.

<head>
  <link href="http://vjs.zencdn.net/6.4.0/video-js.css" rel="stylesheet">
  <!-- If you'd like to support IE8 -->
  <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/6.4.0/video.js"></script>
</body>

2.Via npm
Because I have downloaded the npm, so I select this way to install Video.js.

$ npm install --global video.js

3.Via Bower

$ bower install video.js

2.What’s in the box?

If you’ve downloaded one of the releases or installed via a package manager, you’ve probably noticed that the contents are slightly different from the source code available on Github. The former includes just the compiled files necessary to use Video.js, and the other includes the source used to create those files.

Because I use -g to download Video.js, so the repository’s catalog is following:
video.js/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── dist
│ ├── alt
│ ├── ie8
│ ├── js
│ ├── examples
│ ├── font
│ ├── lang
├── docs
│ ├── api
├── package.json
├── src
│ ├── css

3.Build Tools

Because the environment is different from the develop environment, so I have to install build tools. I choose Grunt for my build pipeline.
1 Install Grunt

sudo npm install -g grunt-cli

2 Install dependencies
Dependencies are installed via npm, which is installed along with Node.js

$ npm install

3 Build away!
There are a few different ways to build the source depending on what you want to do. When we make a new release, we do something like this.

For Production

$ grunt dist

For development

$ grunt dev

4.Customize

Using Video.js straight out of the box is fine, but we think it’s better if you make it your own. Plugins and skins make it possible to completely customize your player

Skinning

The player skin is completely built from HTML and CSS, including when Flash and other players like YouTube are used.

Skin changes can be as simple as centering the play button (you can just add the ‘vjs-big-play-centered’ class to your video tag), or as complex as creating entirely new layouts. We’ve built a codepen project where you can explore different changes.
Video.js Skin Designer

Plugins

Video.js by itself is purposefully very simple. It supports the basic video and audio playback features and ensures they work the same across different playback technologies (“techs”). Any more advanced features are built as plugins, including playlists, analytics, advertising, and support for advanced formats like HLS and DASH. Check out the plugins page to see what’s available.
Video.js Plugins