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

如何获取video.js的代码

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

编译打包video.js

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

安装node.js

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

安装npm所需的依赖

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

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

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

使用npm打包

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

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

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

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

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

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

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

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

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

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

赞 (0)

相关推荐

  • vue + typescript + video.js实现 流媒体播放 视频监控功能

    视频才用流媒体,有后台实时返回数据, 要支持flash播放, 所以需安装对应的flash插件.当视频播放时,每间隔3秒向后台发送请求供检测心跳,表明在线收看状态,需要后台持续发送视频数据. 1. yarn add video.js videojs-flash 2. 创建videp.js声明文件 3. 创建video_player.vue组件,供外部调用.源码如下 <script lang="ts"> import { Component, Emit, Prop, Vue }

  • Vue结合Video.js播放m3u8视频流的方法示例

    首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls

  • video.js添加自定义组件的方法

    video.js添加自定义组件的方法

    videojs虽然已经为我们提供了较为完善的功能.但是在实际应用中,我们仍然可能需要为这个播放器添加部分功能.下面将以添加标题栏为示例简要介绍如何给videojs添加功能或组件. 获取videojs源码 访问videojs在github上的项目即可下载到videojs的源代码 项目网址: https://github.com/videojs/video.js 源码的编译 使用cmd,在源代码根目录下使用npm run build命令对源码进行打包. 具体的打包编译方法可以点击这里查看 没有错误正

  • 详解js获取video任意时间的画面截图

    详解js获取video任意时间的画面截图

    首先就是要把视频加载出来,然后使用canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);获取到当前视频时间的截图,需要不同时间的video视频图,设置video的currentTime(单位秒),然后videoElement这个对象信息会实时更新. 如果是视频是在阿里云OSS上就更方便了,poster="http://a-image-demo.oss-cn-qingdao.aliyun

  • vue使用video.js进行视频播放功能

    关于video.js video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放(可加载本地静态资源视频以及网络链接视频) 官网:videojs.com/ 安装 npm  install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 使用 <div class="demo1-vide

  • Js视频播放器插件Video.js使用方法详解

    Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js <link href="video-js.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="video.js"

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

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

    如何获取video.js的代码 video.js的源码托管在github.com上面,一般来说,master分支上对应的是最新版本,点击右边绿色的clone or download 按钮可以行源码的下载,不过最新的代码未必是稳定的版本,所以这里有一个小技巧,我们可以选择最近的tag进行下载,这样相对要稳妥许多. 编译打包video.js 下载对应的源码之后,一般解压后,可以看到一个.dist的目录,里面是作者替我们打包好的代码,一般有两个版本,压缩和未压缩的版本.但是很遗憾,这个版本中居然没有打

  • 手把手教你使用TypeScript开发Node.js应用

    为什么要使用TypeScript? 为了减少代码编写过程中出现的错误,以及更好的维护你的项目,本文将手把手教你配置一个简单的开发环境来编写Node.js的应用程序,创建这样的一个开发环境有很多方式,这只是其中一种,希望对你有所帮助! 手把手教你使用TypeScript开发Node.js应用 首先配置package.json 因为要在项目中使用Webpack,所以首先得创建一个package.json文件,我们可以使用npm init来生成 { "name": "start&q

  • 手把手教你学会HBuilder打包APP

    手把手教你学会HBuilder打包APP

    我们打包APP需要用到HBuilder,所以先讲解如何安装使用 HBuilder的下载与安装 HBuilder的官网下载地址:https://www.dcloud.io/ 点击DOWNLOAD后会弹出如上显示的两种版本下载 Windows版 和 MacOS版 根据我们电脑版本下载即可,我们一定要下载标准版哦(正式版中的) 我这里是Windows系统,所以我选择的是window版 下载完是一个压缩包 右击压缩一下即可 打开文件夹后找到如下HBuilderX.exe文件 双击即可运行 为了方便我们可

  • 手把手教你使用Django + Vue.js 快速构建项目

    手把手教你使用Django + Vue.js 快速构建项目

    目录 1. 前言 2. 环境准备 3. 创建 Django 项目 4. 创建 Vue.js 前端项目 5. 解决跨域问题 6. 整合 Django 和 Vue.js 前端 1. 前言 本篇将基于Django + Vue.js,手把手教大家快速的实现一个前后端分离的Web项目. 2. 环境准备 Python 3.6.1 Mysql 5.7.23 Pycharm (专业版) Node 3. 创建 Django 项目 创建完成后,目录结构如下所示 使用 Navicat 工具创建数据库 DjangoVu

  • 手把手教你用SpringBoot将文件打包成zip存放或导出

    手把手教你用SpringBoot将文件打包成zip存放或导出

    环境准备 其实也没什么准备,准备好Springboot就行,还有几张图片: 将文件打包成Zip存放 代码 Controller代码: @RequestMapping("/zip") @RestController public class ZipController { /** * 将文件打包成zip并存放在特定位置 */ @PostMapping("package") public void packageFileToZip() throws IOExceptio

  • 手把手教你实现Android编译期注解

    手把手教你实现Android编译期注解

    详细阐述了实现一个Android编译期注解sdk的步骤以及注意事项,并简要分析了运行时注解以及字节码技术在生成代码上与编译期注解的不同与优劣 一.编译期注解在开发中的重要性 从早期令人惊艳的ButterKnife,到后来的以ARouter为首的各种路由框架,再到现在谷歌大力推行的Jetpack组件,越来越多的第三方框架都在使用编译期注解这门技术,可以说不管你是想要深入研究这些第三方框架的原理 还是要成为一个Android高级开发工程师,编译期注解都是你不得不好好掌握的一门基础技术. 本文从基础的

  • 手把手教你uniapp和小程序分包(图文)

    手把手教你uniapp和小程序分包(图文)

    目录 一.小程序分包 二.uniapp分包小程序 分包步骤: 1.配置manifest.json 2.配置pages.json 3.分包预载配置(preloadRule) 一.小程序分包 每个使用分包小程序必定含有一个主包.所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本:而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示 目前小程序分包

  • 手把手教你搭建一个vue项目的完整步骤

    手把手教你搭建一个vue项目的完整步骤

    目录 一.环境准备 1.安装node.js 2.检查node.js版本 3.为了提高我们的效率,可以使用淘宝的镜像源 二.搭建vue环境 1.全局安装vue-cli 三.创建vue项目 1.用cmd命令创建项目 1.1创建文件 1.2选择配置信息 1.3选择版本 1.4路径模式选择 1.5语法代码格式检查 1.6第三方文件存在的方式 1.7是否保存本次配置信息(保存预设) 1.8创建成功 1.9运行 1.10启动 1.11停止服务 2.用vue资源管理器创建 2.1进入vue资源管理器界面(vu

  • 手把手教您实现react异步加载高阶组件

    本篇文章通过分析react-loadable包的源码,手把手教你实现一个react的异步加载高阶组件 1. 首先我们想象中的react异步加载组件应该如何入参以及暴露哪些API? // 组件应用 import * as React from 'react'; import ReactDOM from 'react-dom'; import Loadable from '@component/test/Loadable'; import Loading from '@component/test/

随机推荐