手把手教你如何编译打包video.js


Posted in Javascript onDecember 09, 2020

如何获取video.js的代码

video.js的源码托管在github.com上面,一般来说,master分支上对应的是最新版本,点击右边绿色的clone or download 按钮可以行源码的下载,不过最新的代码未必是稳定的版本,所以这里有一个小技巧,我们可以选择最近的tag进行下载,这样相对要稳妥许多.

手把手教你如何编译打包video.js

编译打包video.js

下载对应的源码之后,一般解压后,可以看到一个.dist的目录,里面是作者替我们打包好的代码,一般有两个版本,压缩和未压缩的版本。但是很遗憾,这个版本中居然没有打包好的代码,看来只能自己来完成这一步了。方法很简单,一般看一下how to use 或 quick start ,里边会有介绍怎么生成发布打包发布的方法。接下来介绍一下构建(build)方法,需要使用grunt。

安装node.js

node.js可以去官网下载,不一定要选择最新的版本,可能会出现不兼容的情况。这里我选择的是10.15.0.安装教程网上已经有很多,这里就不再赘述。
在cmd控制台输入node -v可以查看安装node.js的版本。

手把手教你如何编译打包video.js

安装npm所需的依赖

安装好的node.js会自带一个npm打包工具,但是一般不是最新的,我这里使用的是6.4.1版本。

手把手教你如何编译打包video.js

此时需要安装npm相关的依赖,在cmd控制台输入npm install,等待安装完成即可。
注意,这一步可能会花费较长时间。由于服务器原因,下载速度会比较慢,且中途可能会报错。如果出现错误,删除nodejs文件夹下名为node_modules的文件夹,重新开始下载安装。

手把手教你如何编译打包video.js

如果一直无法正常安装,推荐直接在网上找一个现成的node_modules文件夹,放到上图的目录中。

使用npm打包

安装完npm依赖后,就可以使用npm run build 命令编译打包video.js了。
首先在cmd控制台,cd到video.js的根目录下。

手把手教你如何编译打包video.js

输入npm run build 进行编译,并打包。出现打包成功,就说明打包成功完成了。

手把手教你如何编译打包video.js

编译过程较长,会检查错误。npm编译时,根据版本不同,检错机制可能也不相同。对于代码格式规范要求可能会较严格。以下是我遇到的错误范例,大家作相应修改即可。

  • 双斜杠//后面要留一个空格,多了或者少了都不行
  • String类对象必须使用双引号,不得使用单引号
  • 不得出现连续两行及以上的空行
  • 每一句之后不得有空格
  • 加减号,等号必须用空格隔开
  • 命名格式必须采用驼峰命名法

在HTML中连接打包好的js文件

打包好的文件默认会放在video.js的dist目录下。

手把手教你如何编译打包video.js

如图所示,我们主要用到的是video.min.js和video.js.css这两个文件。
example目录下有一个index.html,里面是复用video.js的一个样例,我们只需对其进行一些修改即可。

手把手教你如何编译打包video.js

提供的index.html打开是这样的,视频资源来自于网络。

手把手教你如何编译打包video.js

video.js就可以在HTML中正常使用了。

到此这篇关于手把手教你如何编译打包video.js的文章就介绍到这了,更多相关编译打包video.js内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
vue视图不更新情况详解
May 16 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
ES6 十大特性简介
Dec 09 #Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 #Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 #Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 #Javascript
ES6中的类(Class)示例详解
Dec 09 #Javascript
JavaScript实现表单验证功能
Dec 09 #Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 #Javascript
You might like
PHP5 字符串处理函数大全
2010/03/23 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python操作CouchDB的方法
2014/10/08 Python
Python的迭代器和生成器
2015/07/29 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
高一历史教学反思
2014/01/13 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
丑小鸭教学反思
2014/02/03 职场文书
学子宴致辞大全
2015/07/27 职场文书