免费视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/6689179.html
Video.js是一款web视频播放器,支持html5和flash两种播放方式。更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 是2014年的时候写的,如今videojs的版本已经更新到6.0.0了,代码已经重构了,原来介绍的方法,现在已经不灵通了。于是我又去官网重新下了一份代码,学习之后重写一篇使用教程。
如何获取videojs的代码
videojs的源码托管在github.com上面,一般来说,master分支上对应的是最新版本,点击右边绿色的clone or download 按钮可以行源码的下载,不过最新的代码未必是稳定的版本,所以这里有一个小技巧,我们可以选择最近的tag进行下载,这样相对要稳妥许多.
下载对应的源码之后,一般解压后,可以看到一个dist的目录,里面是作者替我们打包好的代码,一般有两个版本,压缩和未压缩的版本,但是很遗憾,这个版本中居然没有打包好的代码,看来只能自己来完成这一步了。方法很简单,一般看一下how to use 或 quick start ,里边会有介绍怎么生成发布打包发布的方法。然而再次失望,还是没有找到相关介绍。看来只有使出最后的办法了。直接去看package.json文件,找到scripts:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
"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"
},
|
里边有很多脚本,我这里只要构建(build)的方法就好了,作者居然用的是grunt, 要安装grunt,需要先安装nodejs,然后通过npm install 安装构建的依赖,完成之后,就可以通过运行 npm run build 脚本得到所需的代码了。
看到这个结果,without errors ,说明成功了。再次打开video.js-master目录,就会有dist目录了,里边有需要的js和css文件,还有一个examples目录。
video.js和video-js.css就是接下来需要用到的文件。如果是放在线上用的,可以直接用压缩版本(加.min后缀的)。
如果这些你都不想做,那么我这里提供现成的下载,点此下载videojs.6.0.0
如何使用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="http://vjs.zencdn.net/v/oceans.png">
< source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</ video >
|
videojs使用方式就是以类似的方式开始的,不过由于我们借助videojs对视频进行一些控制或制定,所以要先在head标签里引入video.js和video-js.css这两个文件。然后就可以使用videojs了。最简单的开始:
1
|
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(),this.on('ended')等操作:
下面给一个官方关于onready的例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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.<br> // 注意,这个地方的上下文, `this` 指向的是Video.js的实例对像player
this .play();
// How about an event listener?<br> // 如何使用事件监听?
this .on( 'ended' , function () {
videojs.log( '播放结束了!' );
});
});
|
对于视频播放来说,常用的功能有:
1. 播放 this.play()
2. 停止 -- video没有stop方法,可以用pause 暂停获得同样的效果
3. 暂停 this.pause()
4. 销毁 this.dispose()
5. 监听 this.on('click',fn)
6. 触发事件this.trigger('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.
这里有大量关于options的配置参数:http://docs.videojs.com/tutorial-options.html
常用几个项有:
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组件继承而来的子组件,数组中的顺序将影响组件的创建顺序哦。
1
2
3
4
5
6
7
8
9
|
// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
// 下面的方式只使用bigPlayButton和controlBar两个子组件
videojs( 'my-player' , {
children: [
'bigPlayButton' ,
'controlBar'
]
});
|
sources:Array 资源文件
1
2
3
4
5
6
7
8
9
|
videojs( 'my-player' , {
sources: [{
src: '//path/to/video.mp4' ,
type: 'video/mp4'
}, {
src: '//path/to/video.webm' ,
type: 'video/webm'
}]
});
|
等价于html中的形式:
1
2
3
4
|
<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文件的路径。
1
2
3
4
5
6
7
8
|
// 全局指定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是用组件方式实现的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
// 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);
|
虽然通过组件的方式来实现,代码量要多出许多,但是从长远来看,这种方式的可读性要更好,也是官方推荐的方式。
免费视频播放器Video.js介绍相关推荐
- 开源视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/4115377.html 最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上 ...
- HTML5视频播放插件 video.js介绍
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=kjab&title=HTML5%E8%A7%86%E9%A2%91%E6%92%AD ...
- java flash 播放器_视频播放插件Video.js
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...
- 21个为您的网站和博客提供的免费视频播放器[转载]
很多设计师在都会在他们的网站使用视频播放器.在线视频播放器无需为简单的用户和Web开发人员提供过多的介绍,它简单易用,为您建站时提供了灵活性和创造性,您可以添加无限数量的视频,并根据你的想法安排它们的 ...
- 21个为您的网站和博客提供的免费视频播放器
很多设计师在都会在他们的网站使用视频播放器 .在线视频播放器无需为简单的用户和Web开发人员提供过多的介绍,它简单易用,为您建站时提供了灵活性和创造性,您可以添加无限数量的视频,并根据你的想法安排它们 ...
- H5打造属于自己的视频播放器(JS篇1)
回顾 1)H5打造属于自己的视频播放器(HTML篇) 2)H5打造属于自己的视频播放器(逻辑篇) 前言 在HTML篇当中我们写好了样式,今天我们为video新增一个样式 .bad-video vide ...
- html 在线播放器,HTML5 Web播放器-Video.js
原标题:HTML5 Web播放器-Video.js Video.js是一款优秀的HTML5 Web视频播放器.它同时支持 HTM5 和 Flash 视频,支持在桌面和移动设备上的视频播放,截至目前,大 ...
- php网页视频播放插件下载_视频播放插件Video.js
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...
- 视频播放插件 Video.js 使用和个版本下载
来源:https://blog.csdn.net/zhanghao143lina/article/details/79457035 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,V ...
最新文章
- CB Insights发布最新AI 100排名,包含100家最有前景的AI初创公司
- sysfs方式控制GPIO
- Spring IOC 组件概述
- 第一节、Alex 讲解 python+mysql 交互;
- python 导入numpy 导致多进程绑定同一个CPU问题解决方法
- 如何选择漏电保护器规格型号_三相四线漏电保护器型号要如何选
- firebird 3.0 开发者指南_11月19日召开 2020 vivo开发者大会报名正式开启
- 十七条黄金定律!(心态是命运的控制塔)
- zookeeper基本原理
- 用Python写个魂斗罗,另附30个Python小游戏源码
- Linux x86架构下ACPI PNP Hardware ID的识别机制
- 华为ensp路由器静态路由配置
- 中控考勤机数据通过java程序读取方法
- html从谷歌浏览器跳转到IE,谷歌浏览器chrome
- 毕业生就业管理系统 C++
- A调用B方法,@Transactional事务失效情况
- 数据分析--数据的分组和聚合
- 7.物理地址(MAC地址)是什么?
- java自定义窗口,java 自定义窗口
- Android中的su命令使用
热门文章
- 计算机科技英语期末课程a,《信息科技英语翻译期末考试 A卷参考答案.doc
- 论文中英对照翻译--(Fusing Multiple Deep Features for Face Anti-spoofing)
- 我的世界观——阿尔伯特·爱因斯坦
- C++中方括号[]的作用总结
- scrcpy CreateProcessW() error 5
- [科幻]一堂宇宙生物课
- 全透视:CSS Z-index 属性
- 程序员的英文代号_构建一个代号为1的聊天应用程序2
- 计算机技术在多媒体教学中的作用,多媒体教学中的现状及作用
- org.apache.http.conn.HttpHostConnectException: Connect to sonatype-download.global.ssl.fastly.net:44