Video.js是一个web HTML5视频播放器。它支持HTML5和Flash视频,以及YouTube和Vimeo(通过插件)。它支持视频在桌面和移动设备上播放。这个项目是2010年中期开始,超过40W网站使用该播放器,支持所有现代浏览器及IE8。Video.js拥有丰富的API文档,内置多种方法、事件、语言、配置选项等,功能也相当强大。
https://github.com/videojs/video.js
下载文件后放到项目任意位置,并引入插件的js和css即可,也可以使用CDN托管直接使用,在页面<head>中添加以下标签。
想要兼容IE8需要额外引入一个js文件。
接下来,使用Video.js创建一个简单的<video>元素,但该元素中额外需要data-setup属性。这个属性至少必须有一个“{ }”,它可以包括任何Video.js选项——确保它包含有效的JSON 。
controls:控制条;
prload:预加载;
poster:最初的显示的图片;
data-setup:支持用json来设置一些参数;
source:视频资源;
track:视频字幕。
当页面加载时,Video.js会发现这个元素,并自动设置。
如果你不想使用自动设置,你可以移除data-setup属性并使用videojs方法初始化一个<video>元素。
该方法支持传入3个参数,①<video>元素的id;②videojs配置参数json对象;③videojs准备好后的回调函数。
设置多种视频播放方式(如使用flash),只需设置techOrder属性,在<video>元素或者javascript中都可以设置。
<video>元素
javascript
该属性配置的是播放方式使用顺序,这里的意思是优先使用html5播放,不行再使用flash播放,除此之外还能设置其他播放方式。
如果你需要视频列表,可以使用以下插件
https://github.com/brightcove/videojs-playlist
支持自定义控制条:
https://codepen.io/heff/pen/EarCt
想要了解更多功能请前往官方网站,有相当丰富的文档、使用方法。
官方网站:
http://videojs.com/
API文档:
http://docs.videojs.com/