手把手教你如何編譯打包video.js
如何獲取video.js的代碼
video.js的源碼托管在github.com上面,一般來說,master分支上對應(yīng)的是最新版本,點擊右邊綠色的clone or download 按鈕可以行源碼的下載,不過最新的代碼未必是穩(wěn)定的版本,所以這里有一個小技巧,我們可以選擇最近的tag進行下載,這樣相對要穩(wěn)妥許多.

編譯打包video.js
下載對應(yīng)的源碼之后,一般解壓后,可以看到一個.dist的目錄,里面是作者替我們打包好的代碼,一般有兩個版本,壓縮和未壓縮的版本。但是很遺憾,這個版本中居然沒有打包好的代碼,看來只能自己來完成這一步了。方法很簡單,一般看一下how to use 或 quick start ,里邊會有介紹怎么生成發(fā)布打包發(fā)布的方法。接下來介紹一下構(gòu)建(build)方法,需要使用grunt。
安裝node.js
node.js可以去官網(wǎng)下載,不一定要選擇最新的版本,可能會出現(xiàn)不兼容的情況。這里我選擇的是10.15.0.安裝教程網(wǎng)上已經(jīng)有很多,這里就不再贅述。
在cmd控制臺輸入node -v可以查看安裝node.js的版本。

安裝npm所需的依賴
安裝好的node.js會自帶一個npm打包工具,但是一般不是最新的,我這里使用的是6.4.1版本。

此時需要安裝npm相關(guān)的依賴,在cmd控制臺輸入npm install,等待安裝完成即可。
注意,這一步可能會花費較長時間。由于服務(wù)器原因,下載速度會比較慢,且中途可能會報錯。如果出現(xiàn)錯誤,刪除nodejs文件夾下名為node_modules的文件夾,重新開始下載安裝。

如果一直無法正常安裝,推薦直接在網(wǎng)上找一個現(xiàn)成的node_modules文件夾,放到上圖的目錄中。
使用npm打包
安裝完npm依賴后,就可以使用npm run build 命令編譯打包video.js了。
首先在cmd控制臺,cd到video.js的根目錄下。

輸入npm run build 進行編譯,并打包。出現(xiàn)打包成功,就說明打包成功完成了。

編譯過程較長,會檢查錯誤。npm編譯時,根據(jù)版本不同,檢錯機制可能也不相同。對于代碼格式規(guī)范要求可能會較嚴(yán)格。以下是我遇到的錯誤范例,大家作相應(yīng)修改即可。
- 雙斜杠//后面要留一個空格,多了或者少了都不行
- String類對象必須使用雙引號,不得使用單引號
- 不得出現(xiàn)連續(xù)兩行及以上的空行
- 每一句之后不得有空格
- 加減號,等號必須用空格隔開
- 命名格式必須采用駝峰命名法
在HTML中連接打包好的js文件
打包好的文件默認會放在video.js的dist目錄下。

如圖所示,我們主要用到的是video.min.js和video.js.css這兩個文件。
example目錄下有一個index.html,里面是復(fù)用video.js的一個樣例,我們只需對其進行一些修改即可。

提供的index.html打開是這樣的,視頻資源來自于網(wǎng)絡(luò)。

video.js就可以在HTML中正常使用了。
到此這篇關(guān)于手把手教你如何編譯打包video.js的文章就介紹到這了,更多相關(guān)編譯打包video.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 詳解在vue-cli3.0中自定css、js和圖片的打包路徑
- 發(fā)布BlueShow v1.0 圖片瀏覽器(類似lightbox)blueshow.js 打包下載
- Js模塊打包exports require import的用法和區(qū)別
- vue.config.js打包優(yōu)化配置
- nuxt.js添加環(huán)境變量,區(qū)分項目打包環(huán)境操作
- vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題
- 壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)
- 解決vue打包后vendor.js文件過大問題
- js實現(xiàn)多張圖片打包成zip
相關(guān)文章
TypeScript中的交叉類型和聯(lián)合類型示例講解
交叉類型簡單來說就是通過&符號將多個類型進行合并成一個類型,然后用type來聲明新生成的類型,聯(lián)合類型和交叉類型比較相似,聯(lián)合類型通過|符號連接多個類型從而生成新的類型,本文就這兩個類型結(jié)合示例代碼詳細講解,感興趣的朋友跟隨小編一起學(xué)習(xí)吧2022-12-12
javascript如何實現(xiàn)360度全景照片問題匯總
這篇文章主要為大家詳細匯總了javascript如何實現(xiàn)360度全景照片問題,感興趣的朋友可以參考一下2016-04-04
js數(shù)組轉(zhuǎn)json并在后臺對其解析具體實現(xiàn)
這篇文章主要介紹了js數(shù)組轉(zhuǎn)json并在后臺對其解析具體實現(xiàn),有需要的朋友可以參考一下2013-11-11

