手把手教你如何编译打包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 相关文章推荐
javascript 全等号运算符使用说明
May 31 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 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
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php微信开发之关注事件
2018/06/14 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
django使用LDAP验证的方法示例
2018/12/10 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
策划助理岗位职责
2013/11/18 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
初三学习决心书
2014/03/11 职场文书
美术教师岗位职责
2014/03/18 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
二手房购房意向书
2015/05/09 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技