前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

JavaScript/前端
475
0
0
2022-05-06
标签   JavaScript库
Video.js是一个web HTML5视频播放器。它支持HTML5和Flash视频,以及YouTube和Vimeo(通过插件)。它支持视频在桌面和移动设备上播放。这个项目是2010年中期开始,超过40W网站使用该播放器,支持所有现代浏览器及IE8。Video.js拥有丰富的API文档,内置多种方法、事件、语言、配置选项等,功能也相当强大。

https://github.com/videojs/video.js

下载文件后放到项目任意位置,并引入插件的js和css即可,也可以使用CDN托管直接使用,在页面<head>中添加以下标签。

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

想要兼容IE8需要额外引入一个js文件。

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

接下来,使用Video.js创建一个简单的<video>元素,但该元素中额外需要data-setup属性。这个属性至少必须有一个“{ }”,它可以包括任何Video.js选项——确保它包含有效的JSON 。

controls:控制条;

prload:预加载;

poster:最初的显示的图片;

data-setup:支持用json来设置一些参数;

source:视频资源;

track:视频字幕。

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

当页面加载时,Video.js会发现这个元素,并自动设置。

如果你不想使用自动设置,你可以移除data-setup属性并使用videojs方法初始化一个<video>元素。

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

该方法支持传入3个参数,①<video>元素的id;②videojs配置参数json对象;③videojs准备好后的回调函数。

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

设置多种视频播放方式(如使用flash),只需设置techOrder属性,在<video>元素或者javascript中都可以设置。

<video>元素

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

javascript

该属性配置的是播放方式使用顺序,这里的意思是优先使用html5播放,不行再使用flash播放,除此之外还能设置其他播放方式。

如果你需要视频列表,可以使用以下插件

https://github.com/brightcove/videojs-playlist

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

支持自定义控制条:

https://codepen.io/heff/pen/EarCt

前端开发:一个开源、免费的HTML5和Flash视频播放器(Video.js)

想要了解更多功能请前往官方网站,有相当丰富的文档、使用方法。

官方网站:

http://videojs.com/

API文档:

http://docs.videojs.com/