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 文件
  • 盤點7個強大的Node.js框架
    Node.js是由Ryan Dahl於2009年創建的，它是一個開源的跨平臺運行時環境，用於開發伺服器端和網絡應用程式，這篇文章的重點是Node.js框架，小編會給大家簡要盤點7個強大的Node框架，希望對大家有幫助。
  • Pandora.js 專業的 Node.js 應用監控管理器,阿里開源
    以往我們都是寫很多日誌文件，查看分析十分麻煩。Pandora.js 的 Metrics 提供了 Gauge（瞬時）、Counter（計數）、Meter（流速）、Histogram（直方圖） 等多種度量類型，您可以輕易地完成大部分的應用或業務指標。下面是一個例子：根據 Email 去 Gravatar 獲取用戶的 Profile。然後我想統計有多少次成功了，多少次失敗了。
  • 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-IPFS@0.44.0的發布,能為我們帶來什麼?
    js-IPFS@0.44.0支持取消請求和更精簡的瀏覽器的數據存儲啦，js-IPFS@0.44.0到底是什麼？給我們帶來了多大的改變呢，就讓我們一起看看吧！可取消的請求用戶應該能夠取消長時間的異步API操作。
  • 鴻蒙輕量級JS核心開發框架!
    JS應用框架模塊組成如下圖所示：目錄JS應用開發框架原始碼在/foundation/ace下，目錄結構如下圖所示：/foundation/ace├── frameworks # 框架代碼│ └──JS應用框架通過一些特性宏來定製不同平臺上參與編譯的功能代碼，該部分特性宏定義在 foundation/ace/frameworks/lite/targets 目錄下頭文件內，目錄結構如下：/foundation/ace/frameworks/lite/targets├── default/
  • 利用js模擬用戶的cookie信息保存
    爬蟲學習文檔順序》並簡單搭建完展示頁面和管理後臺的練習部分例如管理後臺：展示頁面：接下來完成Cookie的實現思路如下圖：創建一個js文件和index.jsp文件jsp文件內容,都是默認實現，主要是為了引入analytics.js編寫analytics.js文件，函數初始結構添加一個CookieUtil工具獲取cookie的函數設置cookie
  • NET Core還是Node.js:你的選擇是什麼?
    全文共2800字，預計學習時長7分鐘本文中筆者想對比是.Net Core和Node.js，這兩個公開可用的著名開發環境可擴展、加速並可授權開發過程。.Net Core和Node.js兩者都具備長處和短處，每個新版本都會更好。
  • 如何利用機器學習和Gatsby.js創建假新聞網站
    gatsby-config.js這個文件是網站的基本配置。它是大多數API設置將被存儲的地方。Gatsby附帶了許多插件，您可以通過運行在終端npm install中輕鬆地安裝它們。下載插件後，可以將其添加到gatsby-config.js中。下面是這個項目的文件。
  • 零基礎html5+div+css+js網頁開發教程第003期 html代碼基本結構
    本節知識開始書寫html網頁結構。本節知識視頻教程以下開始文字講解：一、Html代碼基本結構html代碼就像一個人一樣，可以分成幾個部分。我們先來了解三個節點。根節點：<html>兩個子節點：<head> <body>節點基本結構圖代碼結構圖二、網頁編碼格式包含網頁基本編碼格式的html代碼結構說明：這裡的Charset屬性代表編碼格式設置。
  • 前端技術-Rollup.js模塊打包器
    /index.js -o dist/index_es.js -f es該命令的意思為將文件index.js打包為ES6模塊後保存到dist/index_es.js。方法很簡單，在項目根目錄中建立一個名為rollup.config.js的配置文件。
  • PC端【VideoProc】一款很強悍的多媒體處理軟體
    進入到下載界面，點擊上面的 添加視頻 - 點擊 粘貼連結 & 分析 按鈕。然後選擇 需要下載的清晰度和視頻格式。最後點擊 下載已選的視頻 按鈕。下載地址：https://pan.baidu.com/s/1sTvcCgvG0G5NQHB0eNhyxQhttps://www.lanzous.com/i27lwkh點擊文章底部 閱讀原文 可跳轉到文件下載。
  • 值得選用的十三種優秀React JS框架
    朋友，您是否曾經使用過React.js或React Native來創建用戶界面?它們都是用於開發用戶界面(UI)的流行開源平臺。Facebook於2011年將React.js作為JavaScript的庫進行開發，以滿足跨平臺、動態且高性能的UI需求。
  • Qx和loon配置教程-配置文件法
    對應的Qx配置文件文件位置，使用時複製粘貼來對應位置再調試。選擇配置文件編輯，找到這裡[rewrite_local][rewrite_local]就是本地重寫，本地腳本命令的區域。複製到對應位置。[task_local]0 */3 0-23 * * ? wxdaka.js, tag=微信打卡集合911, enabled=true0 30 0-23 * * ? liwosign.js, tag=雞窩打卡, enabled=true
  • 功能強大的前端動畫庫插件anime.js
    本期介紹一個前端動畫插件anime.js，anime.js 是一款功能強大的 Javascript 動畫庫插件，可以和 CSS3 屬性，SVG，DOM 元素和 JS 對象一起工作，製作出各種高性能，平滑過渡的動畫效果。
  • React vs Angular vs Vue.js——2019 該選誰?(更新版)
    JavaScript 框架在以非常快的速度發展，意味著今天我們有快速版本更新的 Angular、React 和市場上的另一個玩家 Vue.js。我們分析了全世界要求特定框架知識的開發職位，以 Indeed.com 作為數據來源，根據 60,000 多個職位得到了如下分布。
  • 如何使用JavaScript實現前端導入和導出excel文件
    1.2 實現一鍵導入excel文件並生成table表格導入excel文件的功能我們可以用javascript原生的方式實現解析, 比如可以用fileReader這些原生api,但考慮到開發效率和後期的維護, 筆者這裡採用antd的Upload組件和XLSX來實現上傳文件並解析的功能.