免费视频播放器videojs中⽂教程
Video.js是⼀款web视频播放器，⽀持html5和flash两种播放⽅式。更多关于video.js的介绍，可以访问介绍，我之前也写过⼀篇关于video.js 的使⽤⼼得，有兴趣的可以 , 阅读的⼈数还蛮多的，有些热⼼的读者甚⾄还给过我⼩额打赏，钱虽不多，但是很感动。最⼏天⼜收到⼏位⽹友的私信，问⼀些关于videojs使⽤⽅⾯的问题。我⾃⼰都不记得videojs长什么模样了，出于别⼈对我的信任，⼜回头看了⼀遍上⼀篇⽂章，还是2014年的时候写的，如今videojs的版本已经更新到6.0.0了，代码已经重构了，原来介绍的⽅法，现在已经不灵通了。于是我⼜去官⽹重新下了⼀份代码，学习之后重写⼀篇使⽤教程。
如何获取videojs的代码
videojs的源码托管在上⾯，⼀般来说，master分⽀上对应的是最新版本，点击右边绿⾊的clone or download 按钮可以⾏源码的下载，不过最新的代码未必是稳定的版本，所以这⾥有⼀个⼩技巧，我们可以选择最近的tag进⾏下载，这样相对要稳妥许多.
下载对应的源码之后，⼀般解压后，可以看到⼀个dist的⽬录，⾥⾯是作者替我们打包好的代码，⼀般有两个版本，压缩和未压缩的版本，但是很遗憾，这个版本中居然没有打包好的代码，看来只能⾃⼰来完成这⼀步了。⽅法很简单，⼀般看⼀下how to use 或 quick start ，⾥边会有介绍怎么⽣成发布打包发布的⽅法。然⽽再次失望，还是没有到相关介绍。看来只有使出最后的办法了。直接去看package.json
⽂件，到scripts：
"homepage": "videojs",
"author": "Steve Heffernan",
"scripts": {
"changelog": "conventional-changelog -p videojs -i CHANGELOG.md -s",
"build": "grunt dist",
"change": "grunt chg-add",
"clean": "grunt clean",
"grunt": "grunt",
"lint": "vjsstandard",
"start": "grunt dev",
"test": "grunt test",
"docs": "npm run docs:lint && npm run docs:api",
"jsdoc": "jsdoc",
"predocs:api": "node -e \"var s=require('shelljs'),d=['docs/api'];s.rm('-rf',d);\"",
"docs:api": "jsdoc -c .jsdoc.json",
"postdocs:api": "node ./build/fix-api-docs.js",
"docs:lint": "remark -- './**/*.md'",
"docs:fix": "remark --output -- './**/*.md'",
"babel": "babel src/js -d es5",
"prepublish": "not-in-install && run-p docs:api build || in-install",
"prepush": "npm run lint -- --errors",
"version": "node build/version.js && git add CHANGELOG.md"
},
⾥边有很多脚本，我这⾥只要构建(build)的⽅法就好了，作者居然⽤的是ｇｒｕｎｔ， 要安装ｇｒｕｎｔ，需要先安装nodejs，然后通过npm install 安装构建的依赖，完成之后，就可以通过运⾏ npm run build 脚本得到所需的代码了。
看到这个结果，without errors ，说明成功了。再次打开video.js-master⽬录，就会有dist⽬录了，⾥边有需要的js和css⽂件，还有⼀个examples⽬录。
video.js和video-js.css就是接下来需要⽤到的⽂件。如果是放在线上⽤的，可以直接⽤压缩版本(加.min后缀的)。
如果这些你都不想做，那么我这⾥提供现成的下载，
如何使⽤videojs播放视频
试想，如果我们没有使⽤这个videojs进⾏播放⽹页视频的话，最简单的办法就是使⽤html5的video标签。就像下⾯这样：
1 2 3<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="dn/v/oceans.png"> <source src="dn/v/oceans.mp4" type="video/mp4">
</video>
videojs使⽤⽅式就是以类似的⽅式开始的，不过由于我们借助videojs对视频进⾏⼀些控制或制定，所以要先在head标签⾥引⼊video.js和video-js.css这两个⽂件。然后就可以使⽤videojs了。最简单的开始：
var player = videojs('example_video_1');
再次刷新这个页⾯的时候，默认的video外观变成videojs的默认样式了（通常叫⽪肤）。
videojs是全局函数，它可以接收三个参数（id,options,onready）: 第⼀个参数是video标签的id，兼容以前的⽅式，如果⽤ '#'+id 也是可以的，⽐如
videojs('#example_video_1'); 第⼆参数是配置选项，除了在这⾥给出之外，还可以通过在video标签中，通过data-setup='{}'属性的形式给出。如果不知道要传什么内容，那么这个options可以直接省略，但是如果你要⽤到第三参数onready的话，这个options不能直接省略，必须要⽤{}进⾏占位。第三个参
数实际上是videojs初始化完成之后的回调函数，在这个⾥函数⾥边，可以使⽤this引⽤videojs的实例对象。进⾏this.play(),this.pause()，('ended')等操作：
下⾯给⼀个官⽅关于onready的例⼦：
var options = {};
var player = videojs('example_video_1', options, function onPlayerReady() {
videojs.log('播放器已经准备好了!');
// In this context, `this` is the player that was created by Video.js.
// 注意，这个地⽅的上下⽂， `this` 指向的是Video.js的实例对像player
this.play();
// How about an event listener?
// 如何使⽤事件监听？
<('ended', function() {
videojs.log('播放结束了!');
});
});
对于视频播放来说，常⽤的功能有：
1. 播放 this.play()
2. 停⽌ -- video没有stop⽅法，可以⽤pause 暂停获得同样的效果
3. 暂停 this.pause()
4. 销毁 this.dispose()
5. 监听 ('click',fn)
6. 触发事件igger('dispose')
....
以上的this是指在onPlayerReady函数中执⾏。
如何配置videojs的参数
有两种⽅式可以改变videojs的⾏为：
1. 通过添加video标签的data-setup属性：<video data-setup='{"autoplay":"true",.....}'
2. var player = videojs('example_video_1',{autoplay:true,....}) , 直接传⼊options
由于第⼀种⽅式是写在html标签中，通过JSON.parse解析，性能低，还容易报错。个⼈更倾向于⽅法2.
常⽤⼏个项有：
autoplay : true/false 播放器准备好之后，是否⾃动播放【默认false】If true/present as an attribute, begins playback when the player is ready
controls : true/false 是否拥有控制条【默认true】，如果设为false ，那么只能通过api进⾏控制了。也就是说界⾯上不会出现任何控制按钮height: 视频容器的⾼度，字符串或数字单位像素⽐如： height:300 or height:'300px'
width: 视频容器的宽度, 字符串或数字单位像素
loop : true/false 视频播放结束后，是否循环播放
muted : true/false 是否静⾳
poster: 播放前显⽰的视频画⾯，播放开始之后⾃动移除。通常传⼊⼀个URL
preload：预加载
'auto' ⾃动
’metadata' 元数据信息，⽐如视频长度，尺⼨等
'none' 不预加载任何数据，直到⽤户开始播放才开始下载
children: Array | Object 可选⼦组件从基础的Component组件继承⽽来的⼦组件，数组中的顺序将影响组件的创建顺序哦。
// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
// 下⾯的⽅式只使⽤bigPlayButton和controlBar两个⼦组件
videojs('my-player', {
children: [
'bigPlayButton',
'controlBar'
]
});
sources:Array 资源⽂件
videojs('my-player', {
sources: [{
src: '//path/to/video.mp4',
type: 'video/mp4'
}, {
src: '//path/to/video.webm',
type: 'video/webm'
}]
});
等价于html中的形式：
<video ...>
<source src="//path/to/video.mp4" type="video/mp4">
<source src="//path/to/video.webm" type="video/webm">
</video>
techOrder: Array 使⽤哪种技术播放，可选值有'html5','flash' 默认为['html5'], 注意：在v6.0.0 及以上的版本中，默认不包含flash的使⽤代码。如果要使⽤flash播放的，需要⼿动引⼊flash相关逻辑的代码。且需要指定swf⽂件的路径。
// 全局指定swf⽂件的位置
videojs.options.flash.swf = 'video-js.swf'
// Create a player.
var player = videojs('example_video_1',{
teachOrder:['flash']
},function(){
console.log(this)
});
还有⼀些可以配置的项⽬，⽐如plugins:⾃动初始化要加载的插件, ⽤到的时候再去研究。对于⼀般的
应⽤，了解以上配置项的⽤法，应该⾜以应付⼀阵了。不过项⽬的需求往往有些变态（定制需求），这时需要对videojs中⼀个重要的内容进⾏深⼊的学习和理解“Component"--组件。
怎么定制videojs组件
有⼀个⽹友问我，怎么在视频中添加⼀个视频标题，播放的时候⾃动隐藏标题，⽤户聚焦到播放器或暂停的时候显⽰标题？
我觉得这个需求正确的做法应当是通过组件的⽅式来做。
其中index.html是⽤暴⼒⽅式实现的，update.html是⽤组件⽅式实现的
// Get the Component base class from Video.js
// 从Videojs中获取⼀个基础组件
var Component = Component('Component');
// d function is used to assist with inheritance. In
// an ES6 environment, `class TitleBar extends Component` would work
// identically.
// d⽅法⽤来实现继承，等同于ES6环境中的class titleBar extends Component⽤法
var TitleBar = d(Component, {
// The constructor of a component receives two arguments: the
// player it will be associated with and an object of options.
// 这个构造函数接收两个参数：
// player将被⽤来关联options中的参数
constructor: function(player, options) {
// It is important to invoke the superclass before anything else,
// to get all the features of components out of the box!
// 在做其它事之前先调⽤⽗类的构造函数是很重要的，
/
/ 这样可以使⽗组件的所有特性在⼦组件中开箱即⽤。
Component.apply(this, arguments);
// If a `text` option was passed in, update the text content of
// the component.
// 如果在options中传了text属性，那么更新这个组件的⽂字显⽰
if () {
this.);
}
},
// The `createEl` function of a component creates its DOM element.
// 创建⼀个DOM元素
createEl: function() {
return ateEl('div', {
// Prefixing classes of elements within a player with "vjs-"
// is a convention used in Video.js.
//给元素加vjs-开头的样式名，是videojs内置样式约定俗成的做法
className: 'vjs-title-bar'
});
},
// This function could be called at any time to update the text
// contents of the component.
// 这个⽅法可以在任何需要更新这个组件内容的时候调⽤
updateTextContent: function(text) {
// If no text was provided, default to "Text Unknown"
// 如果options中没有提供text属性，默认显⽰Text Unknow
if (typeof text !== 'string') {
text = 'Text Unknown';
}
// Use Video.js utility DOM methods to manipulate the content
// of the component's element.
// 使⽤Video.js提供的DOM⽅法来操作组件元素
js argumentsptyEl(this.el());
videojs.dom.appendContent(this.el(), text);
}
});
// Register the component with Video.js, so it can be used in players.
// 在videojs中注册这个组件，才可以使⽤哦.
虽然通过组件的⽅式来实现，代码量要多出许多，但是从长远来看，这种⽅式的可读性要更好，也是官⽅推荐的⽅式。
⼩结
我们⼤多数⼈都不愿意造轮⼦，特别是有现成的轮⼦的时候。像videojs这样的轮⼦，凭⼀⼰之⼒，很难做到⽬前这个成熟度。所以我唯⼀的想法就是尽⼒去读懂它，⾄少要认真看完它的API，了解它的基本⽤法，还要能根据需要，进⾏⼀定程度的扩展和改造。如果说会⽤还算⽐较容易的，要能⾃⼰写扩展（组件），那么就需要对它的实现原理有⼀个基本了解了。然⽽要做到这⼀点，光看api就不够了，必须结合源码来学习。⽽最好的学习⽅式就是动⼿尝试，必要的时候进⾏断点追踪，对重点的⽅法进⾏着重的学习，做笔记，画草图。最后感谢那些精神或现⾦打赏的朋友，给我写这篇⽂章的动⼒。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论