videojs学习笔记

Video.js是什么

• web视频播放器，使用html5和flash两种播放方式
• 几乎兼容所有的浏览器，并且优先使用html5，在不支持的浏览器中，会自动使用flash进行播放
• 界面可以定制，纯javascript和css打造
• 官方网站：http://videojs.com/

官方加载方式

1. 页面link引入video-js.css
2. 引入script引入video.js
3. 页面元素两个标签<video><source>

     <video class="video-js vjs-default-skin" controls width="640" height="264">
      <source src="xxxx.mp4" type="video/mp4" />   </video>
   

4. 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配置的两种传入方式

1. 方式一：写入video标签的data-setup属性
   写在html标签中，通过JSON.parse解析，性能低，还容易报错
   <video data-setup='{"autoplay":"true",.....}'
2. 方式二：在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