免费视频播放器videojs中文教程

   如何获取videojs的代码

"homepage": "http://videojs.com",
"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"
},

如何使用videojs播放视频

<

video

id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"  poster="http://vjs.zencdn.net/v/oceans.png">

<

source

src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">

</

video

>

var player = videojs('example_video_1');

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?
// 如何使用事件监听？
this.on('ended', function() {
videojs.log('播放结束了!');
});
});

如何配置videojs的参数

true

controls : true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮       

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
// 下面的方式只使用bigPlayButton和controlBar两个子组件
videojs('my-player', {
children: [
'bigPlayButton',
'controlBar'
]
});

videojs('my-player', {
sources: [{
src: '//path/to/video.mp4',
type: 'video/mp4'
}, {
src: '//path/to/video.webm',
type: 'video/webm'
}]
});

<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)
});

怎么定制videojs组件

// Get the Component base class from Video.js
// 从Videojs中获取一个基础组件
var Component = videojs.getComponent('Component');

// The videojs.extend function is used to assist with inheritance. In
// an ES6 environment, `class TitleBar extends Component` would work
// identically.
// videojs.extend方法用来实现继承，等同于ES6环境中的class titleBar extends Component用法
var TitleBar = videojs.extend(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 (options.text) {
this.updateTextContent(options.text);
}
},

// The `createEl` function of a component creates its DOM element.
// 创建一个DOM元素
createEl: function() {
return videojs.dom.createEl('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方法来操作组件元素
videojs.dom.emptyEl(this.el());
videojs.dom.appendContent(this.el(), text);
}
});

// Register the component with Video.js, so it can be used in players.
// 在videojs中注册这个组件，才可以使用哦.
videojs.registerComponent('TitleBar', TitleBar);

小结