video.js 7.0 文件結構分析

2020-12-16 騰訊網

1.control-bar

核心的UI類的集合了,播放器下方的控制器都在此目錄中。

2. menu

對菜單UI的實現

3. mixins

用於校驗 video 參數/事件等

4. slider

主要是UI層面可拖動組件的實現,如進度條,音量條都是繼承的此類

5. tech

比較核心的類,對video封裝、flash的支持

6. tracks

處理的是音軌、字幕之類的功能

7. utils

一些常用的功能性類和函數。

8. big-play-button.js

播放器中心的播放按鈕

9. button.js

添加播放按鈕的實現

10. clickable-component.js

如果想實現一個支持點擊事件和鍵盤事件具備交互功能的組件可以繼承該類,它幫你做了細緻的處理。

11. close-button.js

對關閉按鈕的封裝,功能比較單一

12. component.js

video.js框架中最重要的類,是所有類的基類,也是實現組件化的基石

13. error-display.js

主要處理展示錯誤的樣式設置。

14. event-target.js

實現訂閱發布模式,event類和原生事件的兼容處理

15. extend.js

用於繼承

16. fullscreen-api.js

實現兼容各個瀏覽器的全屏方案

17. index.js

統一導出 video 播放器

18. live-tracker.js

初始化和追蹤播放器的變化,例如當前播放的時間,播放的事件進度等

19. loading-spinner.js

實現了播放器的加載機制

20. media-error.js

定義了各種錯誤的描述

21. modal-dialog.js

彈出層相關的內容

22. player.js

核心內容:構造了播放器類也是video.js的核心

23. plugin.js

實現了插件機制

24. poster-image.js

處理播放器貼片

25. resize-manager.js

在屏幕變化時,處理播放器的顯示大小

26. setup.js

用於處理播放器的配置安裝即data-setup屬性。

27. video.js

項目的入口文件

相關焦點

  • 有人分析了7個基於JS語言的DL框架
    作者分析,可能的原因是 ConvNetJS 的設計比較簡單,這也可以從它的庫文件大小反映出來。在速度方面 Brain.js 緊隨其後,與 ConvNetJS 的性能差距約為 2 倍,而 Tensorflow.js 與 ConvNetJS 的性能差距約為兩到三倍。
  • 使用reveal.js製作精美的網頁版PPT
    reveal.js可以把 Markdown 文件轉為類似 PPT 的演示文稿,輕快省力,減少排版上的時間,讓演講者更專於文字內容;同時,也獲得 PPT 所不具有的靈活性製作發布靈活、不限應用,不限平臺, 只需修改或打開 HTML 文件豐富的特性,支持過渡動畫、代碼高亮、視頻背景、Markdown 語法、導出 PDF 等極度輕量,佔用空間和內存少說了這麼多revealjs的優點,接下來我們就來學習如何使用它吧
  • 盤點7個強大的Node.js框架
    Node.js是由Ryan Dahl於2009年創建的,它是一個開源的跨平臺運行時環境,用於開發伺服器端和網絡應用程式,這篇文章的重點是Node.js框架,小編會給大家簡要盤點7個強大的Node框架,希望對大家有幫助。
  • IPFS技術進展:js-IPFS 0.51.0添加了類型定義並刪除了SECIO
    js-IPFS@0.51.0已經從 launchpad 起步,並且正在被傳送到您的 node_modules 文件夾,它支持 TypeScript、自定義 DAG 格式和一種新的、更輕便的模塊使用方式。
  • Node.js模塊化你所需要知道的事
    我們知道在Node.js中,文件即模塊,剛剛提到了模塊可以是.js、.json或者.node文件,通過引用它們,可以獲取工具函數、變量、配置等等,但是它的具體結構是怎樣呢?{}>複製代碼find-me目錄下的index.js文件會被自動引入。當然,這是有規則限制的,Node.js之所以能夠找到find-me目錄下的index.js文件,是因為默認的模塊引入規則是當具體的文件名缺失時尋找index.js文件。
  • 如何創建以EJS為模板引擎的Node.js項目
    expressejsJavaScript在創建Node.js項目時,可以使用不同的JavaScript模板引擎,如Pug、EJS等。打開工具,創建EJS模板引擎項目2、項目創建完畢,查看文件結構,可以發現跟Pug模板引擎項目結構一樣
  • 鴻蒙輕量級JS核心開發框架!
    JS應用框架模塊組成如下圖所示:目錄JS應用開發框架原始碼在/foundation/ace下,目錄結構如下圖所示:/foundation/ace├── frameworks # 框架代碼│ └── lite│ ├── examples # 示例代碼目錄│ ├── include # 對外暴露頭文件存放目錄│
  • Per.js 3.0-Beta.1 發布,「性能秒殺 Vue 的前端怪獸級框架」
    Per.js 3.0-Beta.1 版本今天終於發布了,那麼現在就讓我們來看看這次版本更新了哪些內容:1、dom方法響應式data、method、info屬性可以使用類似app.dom.var1這種格式更改了!
  • 如何在Windows系統安裝最新版本的Node.js
    那麼,怎麼下載Node.js、卸載Node.js和安裝最新版本的Node.js?操作步驟:1、打開電腦瀏覽器,搜索Node.js;然後進入官網,下載15.5.0當前發布版本確認卸載Node.js6、雙擊安裝文件,進入到軟體歡迎界面,點擊Next進入下一步
  • 利用js模擬用戶的cookie信息保存
    爬蟲學習文檔順序》並簡單搭建完展示頁面和管理後臺的練習部分例如管理後臺:展示頁面:接下來完成Cookie的實現思路如下圖:創建一個js文件和index.jsp文件jsp文件內容,都是默認實現,主要是為了引入analytics.js編寫analytics.js文件,函數初始結構添加一個CookieUtil工具獲取cookie的函數設置cookie
  • javascript基礎修煉——手把手教你造一個簡易的require.js
    ="main.js"></script>data-main自定義屬性指定了require.js完成初始化後應該加載執行的第一個文件。,當下載到定義business1模塊的文件scripts/business1.js後,寫在該文件中的define方法會被執行,此時又發現當前模塊依賴business3模塊,程序又會延遲生成business1模塊的工廠方法(也就是scripts/business1.js中傳入define方法的最後一個函數參數),轉而先去加載business3這個模塊,如果define方法沒有聲明依賴,或者聲明的依賴都已經加載
  • NET Core還是Node.js:你的選擇是什麼?
    全文共2800字,預計學習時長7分鐘本文中筆者想對比是.Net Core和Node.js,這兩個公開可用的著名開發環境可擴展、加速並可授權開發過程。.Net Core和Node.js兩者都具備長處和短處,每個新版本都會更好。
  • js-IPFS 0.48.0發布 具有連接性改進和較小的塊存儲
    亮點js-IPFS 0.48.0 具有更好的默認連接,更小的塊存儲和更直觀的API的新聞default默認情況下啟用代理節點傳統上,JS IPFS主要針對瀏覽器,如果您想使用DHT,則瀏覽器是一個糟糕的地方
  • 新手教程:使用Node.js創建WebSocket伺服器,兩步搞定
    在您選擇的代碼編輯器中打開新創建的項目文件夾,新建的 package.json 文件一開始看起來是這樣的。{"name": "stockswebsocketdemoserver","version": "1.0.0","description": "This is a demo server that serves example stocks
  • JupyterLab 3.0發布:支持中文界面,安裝插件無需Node.js
    改進的簡單界面模式簡單界面模式(以前稱為「單文檔模式」)進行了大幅更新,將界面進一步簡化。conda install -c conda-forge jupyterlab=3為何3.0升級如此重要JupyterLab 3.0可以更快、更方便地安裝使用擴展程序,它不要求用戶重建JupyterLab,也不需要安裝Node.js,Python用戶可以通過pip來輕鬆安裝擴展插件。
  • 「Android」淘寶618列車活動 自動瀏覽任務 Auto.js腳本
    看到有些人沒用過autojs的,這有一點地說一下,需要安卓7.0以上才可以,以下的話root之後有可能可以,需要自測無障礙服務打不開,懸浮窗權限給不了,這我也沒法一一解決了,畢竟手機也不在我手上,抱歉各方面沒問題還是用不了的,那試下論壇裡其他的腳本和app吧,或者看下有沒有PC版出爐吧
  • 如何在Node.js使用Pug創建表格並設置樣式
    工具WebStormNode.js瀏覽器>技術expresspug在Node.js項目中,如果項目使用Pug模板引擎,想要新建一個表格,該怎麼實現?下面利用實例說明:操作步驟:1、在已創建好的Node.js項目中,views文件夾上,滑鼠右鍵新建Pug文件;輸入文件名稱,點擊OK
  • 安卓神器之auto.js自動化軟體
    auto.jsauto.js簡介:一款不用ROOT就能實現自動點擊、長按、滑動屏幕操作的安卓APP。7.懸浮窗:用於顯示自定義的懸浮窗。8.files文件系統:文件創建、讀寫文件、獲取信息。用auto.js實現自動玩踢球遊戲這裡就用auto.js來實現這款踢球的H5小遊戲的簡單的自動玩遊戲功能
  • 使用SpreadJS 實現 JavaScript 中導入和導出Excel文件
    訪問 SpreadJS 官網了解更多產品動態:https://www.grapecity.com.cn/developer/spreadjs使用JavaScript實現 Excel 的導入和導出 通過純JavaScript,您完全可以實現導入和導出Excel文件功能,並為最終用戶提供與這些文件進行I/O交互的界面。