如何獲取video.js的代碼

video.js的源碼托管在github.com上面，一般來說，master分支上對(duì)應(yīng)的是最新版本，點(diǎn)擊右邊綠色的clone or download 按鈕可以行源碼的下載，不過最新的代碼未必是穩(wěn)定的版本，所以這里有一個(gè)小技巧，我們可以選擇最近的tag進(jìn)行下載，這樣相對(duì)要穩(wěn)妥許多.

編譯打包video.js

下載對(duì)應(yīng)的源碼之后，一般解壓后，可以看到一個(gè).dist的目錄，里面是作者替我們打包好的代碼，一般有兩個(gè)版本，壓縮和未壓縮的版本。但是很遺憾，這個(gè)版本中居然沒有打包好的代碼，看來只能自己來完成這一步了。方法很簡(jiǎn)單，一般看一下how to use 或 quick start ，里邊會(huì)有介紹怎么生成發(fā)布打包發(fā)布的方法。接下來介紹一下構(gòu)建（build）方法，需要使用grunt。

安裝node.js

node.js可以去官網(wǎng)下載，不一定要選擇最新的版本，可能會(huì)出現(xiàn)不兼容的情況。這里我選擇的是10.15.0.安裝教程網(wǎng)上已經(jīng)有很多，這里就不再贅述。
在cmd控制臺(tái)輸入node -v可以查看安裝node.js的版本。

安裝npm所需的依賴

安裝好的node.js會(huì)自帶一個(gè)npm打包工具，但是一般不是最新的，我這里使用的是6.4.1版本。

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

如果一直無(wú)法正常安裝，推薦直接在網(wǎng)上找一個(gè)現(xiàn)成的node_modules文件夾，放到上圖的目錄中。

使用npm打包

安裝完npm依賴后，就可以使用npm run build 命令編譯打包video.js了。
首先在cmd控制臺(tái)，cd到video.js的根目錄下。

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

編譯過程較長(zhǎng)，會(huì)檢查錯(cuò)誤。npm編譯時(shí)，根據(jù)版本不同，檢錯(cuò)機(jī)制可能也不相同。對(duì)于代碼格式規(guī)范要求可能會(huì)較嚴(yán)格。以下是我遇到的錯(cuò)誤范例，大家作相應(yīng)修改即可。

• 雙斜杠//后面要留一個(gè)空格，多了或者少了都不行
• String類對(duì)象必須使用雙引號(hào)，不得使用單引號(hào)
• 不得出現(xiàn)連續(xù)兩行及以上的空行
• 每一句之后不得有空格
• 加減號(hào)，等號(hào)必須用空格隔開
• 命名格式必須采用駝峰命名法

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

打包好的文件默認(rèn)會(huì)放在video.js的dist目錄下。

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

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

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

到此這篇關(guān)于手把手教你如何編譯打包video.js的文章就介紹到這了,更多相關(guān)編譯打包video.js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論