videojs学习笔记
Video.js是什么
- web视频播放器，使用html5和flash两种播放方式
- 几乎兼容所有的浏览器，并且优先使用html5，在不支持的浏览器中，会自动使用flash进行播放
- 界面可以定制，纯javascript和css打造
- 官方网站：http://videojs.com/
官方加载方式
- 页面link引入video-js.css
- 引入script引入video.js
- 页面元素两个标签<video><source>
<video class="video-js vjs-default-skin" controls width="640" height="264"> <source src="xxxx.mp4" type="video/mp4" /> </video> - js中用全局函数videojs进行初始化
var options = { }
//参数1，video标签的id
//参数2，配置选项options，组件设置写在这里
//要用到第三参数onready的话，options不能省略，必须要用{ }占位
//参数3，onready是videojs初始化完成之后的回调函数，事件写在这里
videojs('#id', options, function VideoOnReady(){
函数体;
//可以用this引用videojs的实例对象，进行this.play(),this.pause()等操作，还可以用this.on('ended')监听事件
});
初始化option配置：组件与元素
option配置的两种传入方式
- 方式一：写入video标签的data-setup属性
写在html标签中，通过JSON.parse解析，性能低，还容易报错
<video data-setup='{"autoplay":"true",.....}' - 方式二：在js中将option传入初始化的player对象（已被本文选用的默认方式）
常见options成员（写在option这个对象中）
-
autoplay : true/false
播放器准备好之后，是否自动播放，默认false -
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'
预加载
auto-自动
metadata-元数据信息 ，比如视频长度，尺寸等
none-不预加载任何数据，直到用户开始播放才开始下载 -
children: Array | Object
可选子组件
从基础的Component组件继承而来的子组件
数组中的顺序将影响组件的创建顺序
整后会生成的dom少一些，加载也快一些
播放器在html中的常见的组件元素
-
sources:Array
sources: [{ src: '...mp4', type: 'video/mp4'}, { src: '...webm', type: 'video/webm'}]
资源文件
等价于html中的<source src="...mp4" type="video/mp4">
-
techOrder: ['html5']
默认为['html5']，'flash'可以有，比如 ['html5', 'flash']
在v6.0.0 及以上的版本中，默认不包含flash的使用代码。如果要使用flash播放的，需要手动引入flash相关逻辑的代码。且需要指定swf文件的路径。
-
plugins:自动初始化要加载的插件*（未研究）
option配置参数详细列表:官方文档
api与事件
常用操作api
- pause //暂停
- play //播放
- dispose //清理-销毁
- on //监听事件
- trigger //触发事件
常用事件
- play //播放
- pause //暂停
- ended //结束
- error 错误
- loadeddata //数据加载完成
2018.4.20
