搜索欄(播放器,選項選項

為進度條尋找 bar 和 container。使用播放進度條作為它的酒吧

搜索欄(播放器,選項選

創建此類的實例。

參數:
名字 類型 屬性 描述
播放器 播放器

該職業應該附加的玩家

選項 目的 < 選購配備 >

播放器選項的鍵/值存儲。

延伸

方法

$ (選擇器,上下文選擇→ {元素 | 空}

查找匹配選擇器的單個 DOM 元素。這可以在組件 ContenTel()或其他自定義上下文中。

參數:
名字 類型 屬性 預設 描述
選擇器 細繩

一個有效的 CSS 選擇器,這將被傳遞給查詢選擇器

語境 元素 | 細繩 < 選購配備 >
這個.contentEl()

要在其中查詢的 DOM 元素。也可以是選擇器字符串,在這種情況下,第一個匹配元素將用作上下文。如果缺少這個。內容()被使用。如果這個 .contentel () 不返回任何內容,它會退回到文檔中

傳回:
元素 | 無效的 -

找到的 dom 元素,或 null

覆蓋:
請參閱:

$$ (選擇器,上下文選項→ {節點列表}

查找匹配選擇器的所有 DOM 元素。這可以在組件 ContenTel()或其他自定義上下文中。

參數:
名字 類型 屬性 預設 描述
選擇器 細繩

一個有效的 CSS 選擇器,這將被傳遞給查詢選擇器全部

語境 元素 | 細繩 < 選購配備 >
這個.contentEl()

要在其中查詢的 DOM 元素。也可以是選擇器字符串,在這種情況下,第一個匹配元素將用作上下文。如果缺少這個。內容()被使用。如果這個 .contentel () 不返回任何內容,它會退回到文檔中

傳回:
節點列表 -

找到的 dom 元素列表

覆蓋:
請參閱:

添加孩子(子,選項選,索引選項→ { 組件 }

在目前元件內加入子元件

參數:
名字 類型 屬性 預設 描述
孩子 細繩 | 成分

要添加的子項的名稱或實例。

選項 目的 < 選購配備 >
{}

將傳遞給孩子的孩子的選項的鍵/值存儲。

指數 數字 < 選購配備 >
這個.children_.length

嘗試將子項添加到的索引。

傳回:
成分 -

被添加為一個子組件的組件。使用字符串時,組件將通過此過程創建。

覆蓋:

添加類(類添加)

添加一個 CSS 類名的組件 s 元素。

參數:
名字 類型 描述
添加類 細繩

要添加的 CSS 類名

覆蓋:

模糊()

從此組件中移除焦點

覆蓋:

抽象構建 CSCLASS ()→ {字符串}

構建默認的 DOM 類名。應該被子組件覆蓋。

傳回:
細繩 -

此對象的 DOM 類名稱。

覆蓋:

計算距離(事件)→ {數字}

計算滑塊的距離

參數:
名字 類型 描述
事件 事件目標~事件

導致此函數運行的事件。

傳回:
數字 -

滑塊的當前位置。-position. X 為垂直滑塊 S-位置. Y 為水平滑塊 S

覆蓋:

取消動畫幀(ID)→ {數字}

取消傳遞至元件 #requestAnimationFrame (RAF) 的佇列回呼。

如果您透過元件 #requestAnimationFrame 將 RAF 回呼排入佇列,請使用此函數而非視窗。取消動畫影格。如果你不這樣做,你的處置偵聽器將不會被清理,直到組件 #dispose !

參數:
名字 類型 描述
身份證 數字

要清除的 rAF ID。元件 #requestAnimationFrame 的傳回值

傳回:
數字 -

返回已清除的 rAF ID。

覆蓋:
請參閱:

取消命名動畫幀(姓名)

取消當前命名的動畫幀(如果存在)。

參數:
名字 類型 描述
姓名 細繩

要取消的 requestAnimationFrame 的名稱。

覆蓋:

兒童()→ {數組}

獲取所有子組件的數組

傳回:
大批 -

這些孩子

覆蓋:

清除間隔(有效)→ {數字}

清除獲取通過窗口創建的間隔。設置間隔組件 #setInterval。如果您透過元件 #setInterval 設定整數,請使用此函數,而不是視窗清除間隔。如果你沒有你的處置監聽器將不會被清理,直到組件 #dispose !

參數:
名字 類型 描述
間隔Id 數字

要清除的間隔的 ID。元件 #setInterval視窗的傳回值。設定間隔

傳回:
數字 -

返回已清除的間隔 ID。

覆蓋:
請參閱:

清除 (時間編號) → {數字}

清除獲取通過窗口。設置超時組件 #setTimeout 創建的超時。如果您通過組件 #setTimeout 設置超時,請使用此功能,而不是窗口。如果你沒有你的處置監聽器將不會被清理,直到組件 #dispose !

參數:
名字 類型 描述
超時ID 數字

要清除的超時 ID。元件 #setTimeout視窗。設定逾時的傳回值

傳回:
數字 -

返回已清除的超時 ID。

覆蓋:
請參閱:

內容特爾()→ {元素}

返回組的 DOM 元素。這是孩子們被插入的地方。這通常與元件 #el 中傳回的元素相同

傳回:
元素 -

此元件的內容元素

覆蓋:

創建地台()→ {元素}

創建組的 DOM 元素

傳回:
元素 -

創建的元素。

覆蓋:

目前尺寸標註 (寬度高度) → {數字}

獲取組件元素的計算寬度或高度。

使用窗口。獲取計算風格

參數:
名字 類型 描述
寬度或高度 細繩

包含“寬度”或“高度”的字符串。想要哪個就拿哪個。

傳回:
數字 -

被請求的維度,如果沒有為該維度設置任何內容,則為 0。

覆蓋:

目前尺寸 () → { 元件尺寸標註物件 }

獲取一個對象,該對象包含組件元素的計算寬度和高度值。

使用窗口。獲取計算風格

傳回:
組件~維度對象 -

組件元素的計算尺寸。

覆蓋:

電流()→ {數字}

獲取組件元素的計算高度。

使用窗口。獲取計算風格

傳回:
數字 -

組件元素的計算高度。

覆蓋:

目前寬度()→ {數字}

獲取組件元素的計算寬度。

使用窗口。獲取計算風格

傳回:
數字 -

組件元素的計算寬度。

覆蓋:

尺寸(寬度高度,數字選擇,跳過監聽器選擇→ {數字}

獲取或設置組件元素的寬度或高度。這是共享代碼組件#width組件#height .

須知:

  • 如果數字中的寬度或高度,這將返回帶有“px”後綴的數字。
  • 如果寬度/高度是百分比,這將返回後綴為“%”的百分比
  • 隱藏元素的寬度為 0 ,帶窗口。此函數默認為組件風格。寬度和回落到窗口。獲取計算風格。看到這裡更多的信息
  • 如果您想要元件的計算樣式,請使用元件 #currentWidth和 {元件 #currentHeight
參數:
名字 類型 屬性 描述
寬度或高度 細繩

8 '寬度'或'高度'

數字 | 細繩 < 選購配備 >

8 新維度

跳過聽眾 布爾值 < 選購配備 >

跳過 componentresize 事件觸發

火災:
傳回:
數字 -

獲取時的維度,如果未設置則為 0

覆蓋:

方面(寬度,高度)

同時設置組件元素的寬度和高度。

參數:
名字 類型 描述
寬度 數字 | 細繩

設定元件圖的寬度。

高度 數字 | 細繩

將元件圖設定為的高度。

覆蓋:

禁用()

禁用此滑塊的控件(如果已啟用)

覆蓋:

處置(選項)
component.js , 第 144

處置組和所有子組件。

參數:
名字 類型 描述
選項 目的
性質
名字 類型 描述
原來的El 元素

用於替換播放器元素的元素

火災:
覆蓋:

埃爾()→ {元素}

獲取元的 DOM 元素

傳回:
元素 -

組件的 DOM 元素

覆蓋:

使能夠()

如果禁用此滑塊,則啟用該滑塊的控件

覆蓋:

啟用()→ {布爾}
slider/slider.js , 第五十三

當前是否為此滑塊啟用了控件。

傳回:
布爾值 -

如果啟用控件,則為 true,否則為 false

覆蓋:

啟用觸摸活動()

每當發生觸摸事件時,此函數都會報告用戶活動。這可以被任何希望觸摸事件以另一種方式起作用的子組件關閉。

發生觸摸事件時報告用戶觸摸活動。用戶活動用於確定控件何時顯示/隱藏。鼠標事件很簡單,因為任何鼠標事件都應該顯示控件。因此,我們捕獲冒泡到玩家的鼠標事件並在發生時報告活動。隨著觸摸事件,它並不像觸摸開始 Touchend切換播放器控件那麼容易。所以觸摸事件也不能在玩家層面幫助我們。

異步檢查用戶活動。因此,可能發生的情況是視頻上的點擊事件會關閉控件。接觸端事件會向玩家泡泡。如果它報告用戶活動,它將立即重新打開控件。我們也不希望完全阻止觸摸事件冒泡。此外,touchmove事件和除了點擊以外的任何東西,都不應重新打開控件。

監聽事件:
  • 組件#event:touchstart
  • 組件#event:touchmove
  • 元件 #事件:接觸端
  • 元件 #事件:觸控取消
覆蓋:

重點()

將焦點設置到該組件

覆蓋:

獲取屬性(屬性)→ {串 | 空}

獲取組件元素上的屬性值。

參數:
名字 類型 描述
屬性 細繩

要從中獲取值的屬性的名稱。

傳回:
細繩 | 無效的 -
  • 請求的屬性的值。 - 如果屬性不存在或沒有值,在某些瀏覽器上可以是空字符串 - 如果屬性不存在或沒有值,大多數瀏覽器將返回 null。
覆蓋:
請參閱:

獲取子項(名稱)→ { 組件 | 未定義}

歸還孩子成分與給定的姓名 .

參數:
名字 類型 描述
姓名 細繩

要取得之子元件的名稱。

傳回:
成分 | 不明確的 -

孩子成分與給定的姓名或未定義。

覆蓋:

獲取孩子標識(ID)→ { 組件 | 未定義}

返回具有給定 ID的子組件

參數:
名字 類型 描述
身份證 細繩

要取得之子元件的 ID。

傳回:
成分 | 不明確的 -

孩子成分與給定的ID或未定義。

覆蓋:

獲取後代(... 名稱)→ { 組件 | 未定義}

返回後代組件跟隨給定的後代名稱。例如 ['foo', 'bar', 'baz'] 將嘗試在當前組件上獲取 'foo',在 'foo' 組件上獲取 'bar' 並在 'bar' 組件上獲取 'baz' 並返回 undefined 如果這些都不存在。

參數:
名字 類型 屬性 描述
名字 ...數組。<字符串> | 細繩 < 可重複使用 >

要取得之子元件的名稱。

傳回:
成分 | 不明確的 -

傳人成分跟隨給定的後代名字或未定義。

覆蓋:

獲得百分比()→ {數字}

獲取到目前為止播放的媒體百分比。

傳回:
數字 -

到目前為止播放的媒體百分比(0 到 1)。

獲取進度()→ {數字}

獲取應填充但夾緊和圓角的條形百分比。

傳回:
數字 -

滑塊填充的百分比

覆蓋:

處理動作(事件)

切換播放器的播放狀態 當在搜索欄上使用輸入或空格時調用此方法

參數:
名字 類型 描述
事件 事件目標~事件

導致此函數被調用的 keydown事件

處理點擊(事件)

滑塊上點擊事件的偵聽器,用於防止點擊冒泡到按鈕菜單等父元素。

參數:
名字 類型 描述
事件 目的

導致此對象運行的事件

覆蓋:

手柄向下(事件)

當此 SeekBar 具有焦點並且按下某個鍵時調用。支持以下按鍵:

空格鍵或 Enter 鍵觸發點擊事件主頁鍵移動到時間軸的開始結束鍵移動到時間軸結束數字「0」通過「9」鍵移動到 0%,10%...80%、90%的時間線PageDown鍵向後移動一大步比ArrowDownPageUp鍵向前移動一大步

參數:
名字 類型 描述
事件 事件目標~事件

導致此函數被調用的 keydown事件。

監聽事件:
  • 事件:keydown
覆蓋:

手柄按鍵(事件)

許多元件曾經有 HandleKeyPress方法,因為它聽取了按鍵事件而命名不佳。此方法名稱現在委託手柄向下。這意味著任何調用 HandleKeyPress 的人都不會看到他們的方法調用停止工作。

參數:
名字 類型 描述
事件 事件目標~事件

導致調用此函數的事件。

覆蓋:

抽象手柄語言變化()

處理組件中播放器的語言更改。應該被子組件覆蓋。

覆蓋:

處理鼠標按下(事件)

在搜索欄上按下鼠標

參數:
名字 類型 描述
事件 事件目標~事件

導致此運行的鼠標關閉事件。

監聽事件:
  • 事件:鼠標按下
覆蓋:

手柄鼠標移動(事件,鼠標按下)

在搜索欄上處理鼠標移動

參數:
名字 類型 預設 描述
事件 事件目標~事件

導致此執行的滑鼠移動事件。

鼠標按下 布爾值 假的

這是一個標誌,如果手柄移動被直接調用應該被設置為 true。它允許我們跳過那些在按下鼠標時不應該發生但在常規鼠標移動處理程序中應該發生的事情。默認為假

監聽事件:
  • 事件:鼠標移動
覆蓋:

處理鼠標向上(事件)

在搜索欄上處理鼠標

參數:
名字 類型 描述
事件 事件目標~事件

導致此運行的鼠標向上事件。

監聽事件:
  • 事件:鼠標彈起
覆蓋:

具有類(類檢查)→ {布爾}

檢查組件的元素是否具有 CSS 類名。

參數:
名字 類型 描述
類檢查 細繩

要檢查的 CSS 類名。

傳回:
布爾值 -
  • 如果組件具有類,則為 True。-如果組件沒有類,則為 False
覆蓋:

高度(NUM 選擇,跳過聽眾選擇→ {數字 | 字符串}

根據 CSS 樣式獲取或設置組件的高度。看組件#尺寸了解更多詳細信息。

參數:
名字 類型 屬性 描述
數字 | 細繩 < 選購配備 >

您要設置的高度後綴為“%”、“px”或什麼都不加。

跳過聽眾 布爾值 < 選購配備 >

跳過 componentresize 事件觸發

傳回:
數字 | 細繩 -

獲取時的寬度,沒有寬度則為零。可以是帶有“%”或“px”的後綴字符串。

覆蓋:

隱藏()

隱藏元件的元素,如果它目前正在顯示通過添加 'vjs-隱藏' 類名稱到它。

覆蓋:

代碼()→ {字符串}
component.js , 第 365

獲取此組件的 ID

傳回:
細繩 -

這個的id 成分

覆蓋:

初始化孩子()

根據選項添加和初始化默認子組件 s。

覆蓋:

設置()→ {布爾}

確定該組件是否已被處置。

傳回:
布爾值 -

如果組件已被處置,將是真實的。否則,假的

覆蓋:

本地化(字符串,令牌選擇,默認值選項→ {串}

本地化給定英文字符串的字符串。

如果提供了令牌,它將嘗試對提供的字符串運行簡單的令牌替換。它查找的令牌看起來像 {1},索引被 1 索引到令牌數組中。

如果提供了 defaultValue,它將使用該字符串,如果在提供的語言文件中找不到值。如果您希望具有用於替換令牌的描述性密鑰,但具有簡潔的本地化字符串並且不需要包含 en.json,則此功能非常有用。

目前,它用於進度條計時。

{
  “進度條計時:currentTime={1} duration={2}”:“{1} of {2}”
}

然後像這樣使用它:

this.localize('進度條計時:currentTime={1} duration{2}',
              [this.player_.currentTime(), this.player_.duration()],
              '{1} of {2}');

輸出如下:第二十三點六分之一

參數:
名字 類型 屬性 描述
細繩 細繩

要本地化的字符串和要在語言文件中查找的鍵。

代幣 數組.<字符串> < 選購配備 >

如果當前項目有代幣替換,請在此處提供代幣。

默認值 細繩 < 選購配備 >

默認為字符串。如果查找鍵需要分開,可以是用於令牌替換的默認值。

傳回:
細繩 -

本地化字符串或如果沒有本地化存在英文字符串。

覆蓋:

名稱()→ {字符串}

獲取組件的名稱。名稱會用來參照元件,並在註冊期間設定。

傳回:
細繩 -

元件的名稱

覆蓋:

選項(對象)→ {對象}

選項對象與新選項的深度合併。

注意:當 obj選項都包含其值為對象的屬性時。這兩個屬性使用模塊合併:合併選項

參數:
名字 類型 描述
對象 目的

包含新選項的對象。

傳回:
目的 -

這是一個新的對象。選項 _ obj合併在一起。

覆蓋:

播放器()→ { 播放器 }

返回播放器成分已附加到。

傳回:
播放器 -

零件附加的玩家。

覆蓋:

就緒()→ { 組件 }

將偵聽器綁定到組件的就緒狀態。與事件監聽器不同的是,如果就緒事件已經發生,它會立即觸發函數。

傳回:
成分 -

返回自身;方法可以鏈接。

覆蓋:

移除屬性(屬性)

從「元件」圖元中移除屬性。

參數:
名字 類型 描述
屬性 細繩

要刪除的屬性的名稱。

覆蓋:
請參閱:

刪除孩子(成分)

刪除一個孩子成分由此成分的孩子名單。同時從此元件的圖元中移除子元件的元素。

參數:
名字 類型 描述
成分 成分

孩子成分去除。

覆蓋:

移除類(classToRemove)

從元 s 元素中移除 CSS 類別名稱。

參數:
名字 類型 描述
要刪除的類 細繩

要刪除的 CSS 類名

覆蓋:

請求動畫幀(fn)→ {數字}

排隊要傳遞給 requestAnimationFrame (rAF) 的回調,但有一些額外的好處:

參數:
名字 類型 描述
FN 組件~GenericCallback

將綁定到此組件並在瀏覽器下一次重繪之前執行的函數。

監聽事件:
傳回:
數字 -

返回用於識別超時的 rAF ID。它也可以在元件 #cancelAnimationFrame 中使用,以取消動畫影格回呼。

覆蓋:
請參閱:

請求命名動畫幀(姓名,姓名)

請求一個動畫幀,但只有一個命名的動畫幀會被排隊。在前一個完成之前,永遠不會添加另一個。

參數:
名字 類型 描述
姓名 細繩

給這個 requestAnimationFrame 的名稱

FN 組件~GenericCallback

將綁定到此組件並在瀏覽器下一次重繪之前執行的函數。

覆蓋:

設置屬性(屬性,值)

設置組件元素上的屬性值

參數:
名字 類型 描述
屬性 細繩

要設置的屬性的名稱。

價值 細繩

將屬性設置為的值。

覆蓋:
請參閱:

設置間隔(FN,間隔)→ {數字}

創建一個每 x毫秒運行一次的函數。此功能是圍繞窗口的包裝。設置間隔。不過,有幾個理由改用這個。

  1. 它通過組件 #clearInterval當組件 #dispose 被調用被清除。
  2. 函數回調將是一個組件〜通用回調
參數:
名字 類型 描述
FN 組件~GenericCallback

x秒執行一次的函數。

間隔 數字

x毫秒執行一次指定的函數。

監聽事件:
傳回:
數字 -

返回可用於標識間隔的 id。它也可以在元件 #clearInterval 中使用,以清除間隔。

覆蓋:
請參閱:

設置超時(FN,超時)→ {數字}

建立在 x毫秒逾時後執行的函數。這個函數是圍繞窗口的包裝。設置超時。不過,有幾個理由改用這個:

  1. 它通過組件 #clearTimeout當組件 #dispose 被調用被清除。
  2. 函數回調將變成一個組件〜通用回調

注意:您不能在此函數返回的 ID上使用窗口。這將導致其處理偵聽器無法清理!請改用元件 #clearTimeout件 #dispose。

參數:
名字 類型 描述
FN 組件~GenericCallback

超時後將運行的功能

超時 數字

在執行指定函數之前延遲的超時時間(以毫秒為單位)。

監聽事件:
傳回:
數字 -

返回用於標識超時的超時 ID。它也可以在元件 #clearTimeout 中使用,以清除已設定的逾時。

覆蓋:
請參閱:

展示()

顯示組件的元素,如果它是通過從它刪除「VJS-隱藏」類名隱藏。

覆蓋:

退後()

為僅使用鍵盤的用戶更快地倒帶

向前一步()

對於僅使用鍵盤的用戶,可以更快地快進

切換類(類切換,謂詞選項

在組件的元素中添加或刪除 CSS 類名。

參數:
名字 類型 屬性 描述
類切換 細繩

添加或刪除的類基於 (@link Component#hasClass}

謂詞 布爾 | DOM 〜謂詞 < 選購配備 >

一個 Dom~predicate 函數或一個布爾值

覆蓋:

觸發就緒()

觸發此元件的所有就緒偵聽程

火災:
覆蓋:

更新(事件選擇→ {號}

此函數將播放進度條和可訪問性屬性更新為傳入的任何內容。

參數:
名字 類型 屬性 描述
事件 事件目標~事件 < 選購配備 >

導致執行此操作的時間更新結束事件。

監聽事件:
傳回:
數字 -

當前百分比為 0-1 之間的數字

覆蓋:

用戶搜索 _ (ct)

從用戶的角度來看,防止 liveThreshold 導致搜索看起來好像沒有發生。

參數:
名字 類型 描述
CT 數字

當前時間尋求

垂直(布爾選擇→ {布爾}

獲取/設置滑塊是否水平垂直

參數:
名字 類型 屬性 描述
布爾值 布爾值 < 選購配備 >
  • 如果滑塊是垂直的,則為 true,- false 是水平的
傳回:
布爾值 -
  • 如果滑塊是垂直的,則為 true,並且獲取 - 如果滑塊是水平的,則為 false,並且獲取
覆蓋:

寬度(NUM 選擇,跳過聽眾選擇→ {數字 | 字符串}

根據 CSS 樣式獲取或設置組件的寬度。看組件#尺寸了解更多詳細信息。

參數:
名字 類型 屬性 描述
數字 | 細繩 < 選購配備 >

您要設置的寬度後綴為“%”、“px”或什麼都不加。

跳過聽眾 布爾值 < 選購配備 >

跳過 componentresize 事件觸發

傳回:
數字 | 細繩 -

獲取時的寬度,沒有寬度則為零。可以是帶有“%”或“px”的後綴字符串。

覆蓋:

活動

組件調整大小

調整組件大小時觸發。

類型:
覆蓋:

處置

處置元時觸發。

類型:
特性:
名字 類型 屬性 預設 描述
氣泡 布爾值 < 選購配備 >
假的

設置為 false 以便 dispose 事件不會冒泡

覆蓋:

準備

組件準備就緒時觸發。

類型:
覆蓋:

滑塊活動

當滑塊處於活動狀態時觸發

類型:
覆蓋:

滑塊不活動

當滑塊不再處於活動狀態時觸發。

類型:
覆蓋:

輕敲

點選元時觸發。

類型:
覆蓋: