滑塊(播放器,選項選擇 )

滑塊的基本功能。可以是垂直的也可以是水平的。例如,視頻上的音量條或搜索條是一個滑塊。

新的滑塊(播放器,選項選擇 )

創建此類的實例

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

播放器這個類應該附加到。

選項 目的 <可選>

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

延伸

方法

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

查找與 a 匹配的單個 DOM 元素選擇器 .這可以在成分內容El()或另一個自定義上下文。

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

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

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

要在其中查詢的 DOM 元素。也可以是選擇器字符串,在這種情況下,第一個匹配元素將用作上下文。如果丟失這個.contentEl()習慣了。如果這個.contentEl()它什麼都不返回文檔 .

傳回:
元素 | 無效的 -

找到的 dom 元素,或 null

覆蓋:
請參閱:

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

查找所有匹配 a 的 DOM 元素選擇器 .這可以在成分內容El()或另一個自定義上下文。

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

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

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

要在其中查詢的 DOM 元素。也可以是選擇器字符串,在這種情況下,第一個匹配元素將用作上下文。如果丟失這個.contentEl()習慣了。如果這個.contentEl()它什麼都不返回文檔 .

傳回:
節點列表 -

找到的 dom 元素列表

覆蓋:
請參閱:

添加孩子(孩子,選項選擇, 指數選擇 )→ { 成分 }

添加一個孩子成分在當前成分 .

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

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

選項 目的 <可選>
{}

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

指數 數字 <可選>
這個.children_.length

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

傳回:
成分 -

成分作為一個孩子被添加。當使用字符串時成分將由此過程創建。

覆蓋:

添加類(類添加)

將 CSS 類名添加到成分元素。

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

要添加的 CSS 類名

覆蓋:

模糊()

從此組件中移除焦點

覆蓋:

抽象的構建CSS類()→ {字符串}

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

傳回:
細繩 -

此對象的 DOM 類名稱。

覆蓋:

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

計算滑塊的距離

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

導致此函數運行的事件。

傳回:
數字 -

滑塊的當前位置。 - position.x 垂直滑塊 s - position.y 水平滑塊

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

取消傳遞給的排隊回調組件#requestAnimationFrame (rAF)。

如果您通過排隊 rAF 回調組件#requestAnimationFrame , 使用此函數代替window.cancelAnimationFrame .如果你不這樣做,你的處置偵聽器將不會被清理直到組件#dispose

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

要清除的 rAF ID。的返回值組件#requestAnimationFrame .

傳回:
數字 -

返回已清除的 rAF ID。

覆蓋:
請參閱:

取消命名動畫幀(姓名)

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

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

要取消的 requestAnimationFrame 的名稱。

覆蓋:

孩子們()→ {數組}

獲取所有子組件的數組

傳回:
大批 -

這些孩子

覆蓋:

清除間隔(intervalId)→ {數字}

清除通過創建的間隔窗口.setInterval或者組件#setInterval .如果您通過以下方式設置間隔組件#setInterval使用此功能而不是window.clearInterval .如果你不這樣做,你的處置偵聽器將不會被清理,直到組件#dispose

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

要清除的間隔的 ID。的返回值組件#setInterval或者窗口.setInterval .

傳回:
數字 -

返回已清除的間隔 ID。

覆蓋:
請參閱:

清除超時(timeoutId)→ {數字}

清除通過創建的超時窗口.setTimeout或者組件#setTimeout .如果您通過以下方式設置超時組件#setTimeout使用此功能而不是window.clear超時 .如果你不這樣做,你的處置偵聽器將不會被清理,直到組件#dispose

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

要清除的超時 ID。的返回值組件#setTimeout或者窗口.setTimeout .

傳回:
數字 -

返回已清除的超時 ID。

覆蓋:
請參閱:

內容El ()→ {元素}

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

傳回:
元素 -

這個的內容元素成分 .

覆蓋:

創建El (類型,道具選擇, 屬性選擇 )→ {元素}

創建滑塊 s DOM 元素。

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

要創建的元素類型。

道具 目的 <可選>
{}

對象形式的屬性列表。

屬性 目的 <可選>
{}

對象形式的屬性列表。

傳回:
元素 -

被創建的元素。

覆蓋:

當前維度(寬度或高度)→ {數字}

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

用途window.getComputedStyle .

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

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

傳回:
數字 -

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

覆蓋:

當前維度()→ { 組件~維度對象 }

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

用途window.getComputedStyle .

傳回:
組件~維度對象 -

組件元素的計算尺寸。

覆蓋:

當前高度()→ {數字}

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

用途window.getComputedStyle .

傳回:
數字 -

組件元素的計算高度。

覆蓋:

當前寬度()→ {數字}

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

用途window.getComputedStyle .

傳回:
數字 -

組件元素的計算寬度。

覆蓋:

方面(寬度或高度,數字選擇 , 跳過聽眾選擇 )→ {數字}

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

須知:

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

8 '寬度'或'高度'

數字 | 細繩 <可選>

8 新維度

跳過聽眾 布爾值 <可選>

跳過 componentresize 事件觸發

火災:
傳回:
數字 -

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

覆蓋:

方面(寬度,高度)

設置寬度和高度成分同時元素。

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

設置的寬度成分 s 元素到。

高度 數字 | 細繩

設置的高度成分 s 元素到。

覆蓋:

禁用()

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

處置(選項)

處置的成分和所有子組件。

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

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

火災:
覆蓋:

埃爾()→ {元素}

得到成分 DOM 元素

傳回:
元素 -

這個的 DOM 元素成分 .

覆蓋:

使能夠()

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

啟用()→ {布爾值}

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

傳回:
布爾值 -

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

啟用觸摸活動()

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

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

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

監聽事件:
  • 組件#event:touchstart
  • 組件#event:touchmove
  • 組件#event:touchend
  • 組件#event:touchcancel
覆蓋:

重點()

將焦點設置到該組件

覆蓋:

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

獲取屬性的值成分元素。

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

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

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

得到孩子(姓名)→ { 成分 |未定義}

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

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

孩子的名字成分要得到。

傳回:
成分 | 不明確的 -

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

覆蓋:

通過 Id 獲取孩子(ID)→ { 成分 |未定義}

歸還孩子成分與給定的ID .

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

孩子的id 成分要得到。

傳回:
成分 | 不明確的 -

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

覆蓋:

得到後代(……名字)→ { 成分 |未定義}

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

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

孩子的名字成分要得到。

傳回:
成分 | 不明確的 -

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

覆蓋:

獲取進度()→ {數字}

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

傳回:
數字 -

滑塊填充的百分比

處理點擊(事件)

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

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

導致此對象運行的事件

handleKeyDown (事件)

處理一個按鍵事件發生在滑塊 .監視左、右、上和下箭頭鍵。只有當滑塊有焦點時才會調用此函數。看滑塊#handleFocus和滑塊#handleBlur .

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

按鍵導致此函數運行的事件。

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

處理KeyPress (事件)

許多組件曾經有一個處理KeyPress方法,這個名字不好命名,因為它聽了一個按鍵事件。此方法名稱現在委託給handleKeyDown .這意味著任何人打電話處理KeyPress不會看到他們的方法調用停止工作。

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

導致調用此函數的事件。

覆蓋:

抽象的處理語言變化()

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

覆蓋:

處理鼠標按下(事件)

處理鼠標按下或者觸摸啟動上的事件滑塊 .

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

鼠標按下或者觸摸啟動觸發此功能的事件

火災:
監聽事件:
  • 事件:鼠標按下
  • 事件:touchstart

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

處理鼠標移動 , 觸摸移動, 和鼠標按下這方面的事件滑塊 .這鼠標移動觸摸移動事件只會在鼠標按下觸摸啟動 .這是因為滑塊#handleMouseDown滑塊#handleMouseUp .

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

鼠標按下 , 鼠標移動 , 觸摸啟動, 或者觸摸移動觸發此功能的事件

鼠標按下 布爾值

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

監聽事件:
  • 事件:鼠標移動
  • 事件:觸摸移動

處理鼠標向上(事件)

處理鼠標彈起或者觸摸端上的事件滑塊 .

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

鼠標彈起或者觸摸端觸發此功能的事件。

火災:
監聽事件:
  • 事件:touchend
  • 事件:鼠標彈起

有類(classToCheck)→ {布爾值}

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

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

要檢查的 CSS 類名。

傳回:
布爾值 -
  • 如果成分有課。 - 如果是假的成分沒有類`
覆蓋:

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

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

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

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

跳過聽眾 布爾值 <可選>

跳過 componentresize 事件觸發

傳回:
數字 | 細繩 -

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

覆蓋:

隱藏()

隱藏成分 s 元素,如果它當前通過向其添加“vjs-hidden”類名來顯示。

覆蓋:

ID ()→ {字符串}

得到這個成分編號

傳回:
細繩 -

這個的id 成分

覆蓋:

初始化孩子()

添加並初始化默認子項成分基於選項。

覆蓋:

已處置()→ {布爾值}

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

傳回:
布爾值 -

如果該組件已被處置,將真的 .否則,錯誤的 .

覆蓋:

本地化(字符串,標記選擇, 默認值選擇 )→ {字符串}

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

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

如果一個默認值提供,它將使用它細繩,如果在提供的語言文件中找不到值。如果您想要一個用於令牌替換的描述性密鑰但具有簡潔的本地化字符串並且不需要en.json被包括。

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

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

然後像這樣使用它:

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

輸出如下:24:56 的 01:23 .

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

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

代幣 數組.<字符串> <可選>

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

默認值 細繩 <可選>

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

傳回:
細繩 -

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

覆蓋:

姓名()→ {字符串}

得到成分的名字。該名稱用於引用成分並在註冊時設置。

傳回:
細繩 -

這個的名字成分 .

覆蓋:

選項(對象)→ {對象}

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

注意:當兩個對象選項包含其值為對象的屬性。這兩個屬性使用 module:mergeOptions 合併

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

包含新選項的對象。

傳回:
目的 -

一個新的對象這個.options_對象融合在一起。

覆蓋:

玩家()→ { 播放器 }

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

傳回:
播放器 -

這名球員成分已附加到。

覆蓋:

準備好()→ { 成分 }

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

傳回:
成分 -

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

覆蓋:

移除屬性(屬性)

從中刪除一個屬性成分元素。

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

要刪除的屬性的名稱。

覆蓋:
請參閱:

刪除孩子(成分)

刪除一個孩子成分由此成分的孩子名單。還刪除了孩子成分來自這個的元素成分元素。

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

孩子成分去除。

覆蓋:

移除類(classToRemove)

從中刪除 CSS 類名成分元素。

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

要刪除的 CSS 類名

覆蓋:

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

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

  • 回退到不支持 rAF 的瀏覽器組件#setTimeout .

  • 回調變成了組件~GenericCallback(即綁定到組件)。

  • 如果組件在調用之前被釋放,rAF 回調的自動取消將被處理。

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

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

監聽事件:
傳回:
數字 -

返回用於識別超時的 rAF ID。它也可以用於組件#cancelAnimationFrame取消動畫幀回調。

覆蓋:
請參閱:

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

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

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

給這個 requestAnimationFrame 的名稱

FN 組件~GenericCallback

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

覆蓋:

設置屬性(屬性,值)

設置屬性的值成分的元素

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

要設置的屬性的名稱。

價值 細繩

將屬性設置為的值。

覆蓋:
請參閱:

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

創建一個函數,每隔X毫秒。這個函數是一個包裝器窗口.setInterval .不過,有幾個理由改用這個。

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

每次運行的函數X秒。

間隔 數字

每隔一段時間執行指定的函數X毫秒。

監聽事件:
傳回:
數字 -

返回可用於標識間隔的 id。它也可以用於組件#clearInterval清除間隔。

覆蓋:
請參閱:

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

創建一個在一個函數之後運行的函數X毫秒超時。這個函數是一個包裝器窗口.setTimeout .不過,有幾個理由改用這個:

  1. 它通過清除組件#clearTimeout什麼時候組件#dispose被調用。
  2. 函數回調將變成組件~GenericCallback

注意:你不能使用window.clearTimeout在這個函數返回的 id 上。這將導致其處理偵聽器無法清理!請用組件#clearTimeout或者組件#dispose反而。

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

之後將運行的函數暫停 .

超時 數字

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

監聽事件:
傳回:
數字 -

返回用於標識超時的超時 ID。它也可以用於組件#clearTimeout清除設置的超時。

覆蓋:
請參閱:

展示()

顯示成分 s 元素(如果通過從中刪除“vjs-hidden”類名來隱藏它)。

覆蓋:

切換類(classToToggle, 謂詞選擇 )

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

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

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

謂詞 布爾值 | dom~謂詞 <可選>

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

覆蓋:

觸發就緒()

為此觸發所有準備好的監聽器成分 .

火災:
覆蓋:

更新()→ {數字}

更新進度條滑塊 .

傳回:
數字 -

進度條表示為 0 到 1 之間的數字的進度百分比。

垂直的(布爾選擇 )→ {布爾值}

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

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

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

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

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

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

跳過聽眾 布爾值 <可選>

跳過 componentresize 事件觸發

傳回:
數字 | 細繩 -

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

覆蓋:

活動

組件調整大小

調整組件大小時觸發。

類型:
覆蓋:

處置

當一個成分被處置。

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

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

覆蓋:

準備

當一個成分準備好了。

類型:
覆蓋:

滑塊活動

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

類型:

滑塊不活動

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

類型:

輕敲

當一個成分被竊聽。

類型:
覆蓋: