Step 1: Include the Javascript and CSS files for Video.js in the head tag of the page
You can download the source code of Video.js and put it on your own server, or use the free CDN-hosted version. Putting JavaScript files <body> in tags is now recommended instead <head>. But Video.js includes an <head> 'HTML5 Shiv' that needs to be referenced in the tag, in order for older versions of IE to recognize the video tag.
Note: If you are already using an HTML5 shiv such as Modernizr , you can reference the Video.js JavaScript file anywhere. But make sure that the Modernizr version includes shiv for video.
If you are not using a library like Modernizr but still want <body> to reference Video.JS in , you can add your own shiv and <head> reference it in .
<script type="text/javascript">
document.createElement('video');document.createElement('audio');document.createElement('track');
</script>
CDN version
Thanks to our friends at Fastly for giving us a CDN-hosted version of Video.js that anyone can use for free, simply add these files to your page documentation <head> :
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
Install via package manager
NPM
$ npm install --save video.js
Bower
$ bower install --save video.js
self-hosted
To be fully self-hosted, you need to pull the font files and let Video.js know where the swf is. If you simply copy the contents of the dist folder or zip file into your project, it will work fine, but editing the LESS file to rebuild or directly editing the generated CSS file will make the file path easily changed.
<link href="//example.com/path/to/video-js.css" rel="stylesheet">
<script src="//example.com/path/to/video.js"></script>
<script>
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script
Step 2: Add an HTML5 video tag to your page
With Video.js, you can <video> embed a video with just one HTML5 tag. Video.js then reads the tag and makes it work in all browsers, not just those that support HTML5 video. In addition to the basic markup, Video.js requires some additional markup.
Note: If you use another setting method in the following section, then the
data-setupproperty should not be set here.
The 'data-setup' property tells Video.js to automatically set up the video when the page is loaded, and to read all the configuration (in JSON format) from the properties ( options ). There are other ways to initialize the player, but this one is the easiest.
'id'Attribute: Should be unique for each video in the same page'class'The property contains two styles:
video-jsApply desired Video.js features, such as fullscreen and subtitle styles.vjs-default-skinApplies a default skin for HMTL control bars, which can be removed or overridden to create your own control bar styles.
Otherwise, include/exclude the , settings , sources and tracks attributes can be used as usual with HTML5 video.
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<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>
If you don't want to use auto-setup it, you can temporarily leave out data-setup the property and initialize a video element manually.
var player = videojs('really-cool-video', { /* Options */ }, function() {
console.log('Good to go!');
this.play(); // if you don't trust autoplay for some reason
// How about an event listener?
this.on('ended', function() {
console.log('awww...over so soon?');
});
});
默认情况下，大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，你可以给你的 video 标签添加额外的 vjs-big-play-centered 样式，比如：
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
...
</video>
为动态加载的 HTML 元素设置 Video.js
如果你的 web 页面或者应用是动态加载 video 标签的（ajax，appendChild，等等）,这样在页面加载后这个元素是不存在的，那么你会想要手动设置播放器而不是依靠 data-setup 属性。要做到这一点，首先将 data-setup 属性从 video 标签中移除掉，这样在播放器初始化的时候就不会混乱了。接下来，运行下面的 javascript ，有时在 Video.js 加载后，有时是在 video 标签被加载进 DOM 后，
videojs("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
videojs 方法中的第一个参数是你的 video 标签的 ID，用你自己的代替。
第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。
第三个参数是一个 'ready' 回调。一旦 Video.js 初始化完成后，就会触发这个回调。
你也可以传入一个元素本身的引用来代替元素ID：
videojs(document.getElementById('example_video_1'), {}, function() {
// This is functionally the same as the previous example.
});
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
// You can grab an element by class if you'd like, just make sure
// if it's an array that you pick one (here we chose the first).
});
如果您无法播放内容，您得确保使用了 正确的格式，你的 HTTP 服务器可能无法提供正确的 MIME类型 的内容
如果你已经准备开始使用 Video.js， 为了获取更多信息，文档 是你第一个需要查看的。一般来说， 播放器 API 文档 是接下来需要看的。