Github地址

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

快速开始

你可以有很多种方法来利用,不管是利用cdn还是下载下来静态资源文件,亦或者是利用npm安装都可以获取它:

<link href=\"大众./video-js.min.css\公众 rel=\"大众stylesheet\"大众><script src=\"大众./video.min.js\"大众></script>

npm install video.js

接下来,利用Video.js就像创建<video>元素一样大略,但具有额外的数据设置属性。
也便是一个配置工具,以下代码是一个最大略的示例:

html5video网站超赞的开源HTML5和Flash视频播放器Videojs GraphQL

<video id=\"大众my-player\"大众 class=\"大众video-js\"大众 controls preload=\公众auto\公众 poster=\"大众封面url,设置就可以显示封面\"大众 data-setup='{}'> <source src=\"大众视频URL\公众 type=\"大众video/mp4\"大众> </source> </video>

当页面加载时,Video.js将找到此元素并自动在其位置设置播放器。
如果你不想利用自动设置,可以不该用data-setup属性并利用videojs函数手动初始化<video>元素:

var player = videojs('my-player');

干系回调函数

var options = {};var player = videojs('my-player', options, function onPlayerReady() { videojs.log('Your player is ready!'); this.play(); this.on('ended', function() { videojs.log('Awww...over so soon?!'); });});详细的文档

Video.js的文档相称的详细,本文篇幅不宜过长,如果你已经对它感兴趣,那么你就可以对照文档准备学习下了,由于其功能很刁悍,那么相对应的文档也就非常的详细,分为详细的API文档和学习指南,通过阅读文档来实现你想要的功能(下面是一个大略的截图,利用了浏览器自带的翻译功能,很随意马虎也能看懂):

demo预览

官网也供应了一些比较高等的用法的demo,下面是一个带播放列表的示例(此示例不敷以表示他的强大):

可切换视频

画中画

丰富的菜单按钮工具(包括音频、多措辞等设置),支持中文措辞包

除了以上demo所展示的,还包括自定义皮肤、React中利用、插件等功能,可以说是非常的丰富了,要比自带的Video标签功能丰富了无数倍,有视频网站开拓的朋友可以考试测验利用它,我相信它一定对你有所帮助!

总结

插件万万万,好用的却不多,特殊是相对繁芜的,要么收费,要么功能不足强大,但是有很多开拓者贡献了开源的项目供开拓者利用才造就了如今技能的发达发展,Video.js只是个中一个,本文只是提出来这样一个必须赞一个的插件,其详细的内容远不止于此,感兴趣的话可以阅读干系文档学习,如果你有更好的建议,也可以在评论区留言分享,希望对你有所帮助!