資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學Video.js 播放器方法/選項參考
在本教程中，我們將學習 Video.js 的一些基本選項參考。選項參考就像設定一樣，用於控制或修改影片播放器的行為。
這些選項既可以是 HTML5 選項（如自動播放、重新載入等），也可以是 Video.js 特定的設定。我們將逐一檢視這些選項。
標準 HTML5 <video> 元素選項
標準 HTML5 <video> 元素選項是標準設定，適用於 <video> 標籤和 <video-js> 標籤。藉助這些選項，您可以更改影片播放器的高度、寬度、控制元件等。
讓我們討論一些最常見的標準 HTML5 影片選項：
自動播放 (Autoplay)
用法 - 屬性 - HTML 頁面載入後，影片將立即開始播放。
型別 - 布林值
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video autoplay muted src="https://tutorialspoint.tw/videos/myVideo.mp4"> </video> <video-js autoplay muted src="https://tutorialspoint.tw/videos/myVideo.mp4" data-setup='{}'> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
在上例中，您可以看到使用自動播放屬性的兩種方法：使用 <video> 元素標籤和使用 <video-js> 標籤。
注意 - 請確保影片的 src 屬性指向您的影片檔案路徑。
控制元件 (Controls)
用法 - "controls" 屬性允許您在影片播放器上新增按鈕或控制元件，例如播放和暫停。如果沒有 controls 屬性，則只能使用 autoplay 屬性播放影片。
型別 - 布林值
<video controls src="https://tutorialspoint.tw/videos/myVideo.mp4"></video>
<video-js controls src="https://tutorialspoint.tw/videos/myVideo.mp4" data-setup='{}'></video-js>
在上例程式碼中，controls 屬性已新增到 <video> 和 <video-js> 標籤。
高度和寬度 (Height and Width)
用法 - 正如名稱所示，height 和 width 標籤分別允許您更改影片播放器的高度和寬度。
型別 - 字串或數字
<video controls width="320" height="240" src="myVideo.mp4"></video>
<video-js controls width="320" height="240" src="myVideo.mp4" datasetup='{}'></video-js>
正如您在上例中看到的，我們已將兩個影片元素的高度設定為 240 畫素，寬度設定為 320 畫素。
因此，這些是一些常用且最常用的標準 HTML 影片元素選項。在下一節中，我們將瞭解一些 Video.js 特定的設定。
Video.js 元素特定選項
Video.js 特定選項僅適用於 <video-js> 標籤，而不適用於標準 <video> 標籤。除非指定，否則每個設定的預設值為 *undefined*。
讓我們看看一些 Video.js 元素特定的選項：
縱橫比 (aspectRatio)
用法 - 此選項使影片播放器更流暢，aspectRatio 引數的值用於動態計算播放器的大小。aspectRatio 的值應為兩個用冒號分隔的數字的比率。例如："21:9"
型別 - 字串
<video-js aspectRatio="21:9" src="myVideo.mp4" data-setup='{}'></video-js>
在上例中，aspectRatio 已設定為 21:9。除此之外，還可以使用類 "vjs-21-9" 來實現相同的效果。
<video-js class="vjs-21-9" src="myVideo.mp4" data-setup='{}'></video-js>
僅音訊模式 (audioOnlyMode)
用法 - 設定為 true 時，所有播放器元件（除控制欄外）都將隱藏，以及僅影片所需的控制欄元件。
型別 - 布林值 (true/false)
<video-js aspectRatio="21:9" audioOnlyMode="true" src="myVideo.mp4" datasetup='{}'></video-js>
在上例程式碼中，audioOnlyMode 屬性已設定為 true。這將隱藏影片的所有影片播放器元件。
流暢 (Fluid)
用法 - 要使影片播放器流暢，此選項應設定為 true。它將縮放影片播放器大小以適應影片的內部縱橫比或指定的比率。
型別 - 布林值
<video-js aspectRatio="21:9" fluid="true" src="myVideo.mp4" datasetup='{}'></video-js>
在上例中，影片播放器大小將縮放以適應給定的縱橫比，即 21:9。如果沒有提供縱橫比，則 fluid 屬性將設定為影片的固有比率。
播放速率 (playbackRates)
用法 - playbackRates 允許您顯示控制元件，讓使用者控制影片的播放速度。播放速率的值必須是一個嚴格大於 1 的陣列。播放值“1”表示常規速度，“2”表示影片速度的兩倍，依此類推。播放速率從下到上顯示。
型別 - 陣列
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js controls id="myVideo" data-setup='{"playbackRates": [0.5, 1,1.5, 2, 3]}'> <source src="https://tutorialspoint.tw/videos/video1.mp4/sample720.mp4" > </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
在此程式碼片段中，我們已將播放速率新增到 data-setup 中的影片播放器選項。因此，播放速度控制器將顯示 0.5、1、1.5、2 和 3 作為播放速率。
使用者操作 (userActions)
用法 - userActions 具有多種功能，可以更改使用者與影片播放器互動的方式。
型別 - 物件
userAction.click - 這是一個布林值或函式型別選項，用於控制使用者單擊播放器的行為。如果此選項的值設定為 false，則不允許使用者在暫停和播放之間切換。
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js autoplay muted aspectRatio="21:9" fluid="true" id="myVideo"data-setup='{}'> <source src="https://tutorialspoint.tw/videos/sample480.mp4" type="video/mp4"></source> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> videojs("myVideo", {"userActions": {"click": false }});</script> </body> </html>
在上例程式碼片段中，使用了 userActions.click，並將其值設定為 id 為“myVideo”的影片播放器的值。
如果“userActions.click”的值設定為 undefined 或 true，則啟用單擊和播放/暫停切換。
userAction.doubleClick - doubleClick 也是一個布林值和函式型別選項，用於控制影片上的雙擊操作。
如果此選項的值設定為 false，則設定不允許雙擊影片。如果其值為 true 或 undefined，則允許雙擊，並且它將切換全屏模式。還可以使用單擊處理程式函式覆蓋預設的全屏切換操作。
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js controls autoplay muted aspectRatio="21:9" fluid="true" id="myVideo" data-setup='{}'> <source src="https://tutorialspoint.tw/videos/sample480.mp4" type="video/mp4"></source> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> videojs("myVideo", {"userActions": {"doubleClick": true }}); </script> </body> </html>
在上例程式碼中，對於 id 為“myVideo”的影片播放器，“userActions.doubleClick”已設定為 true。它將啟用影片上的雙擊，並將影片設定為全屏模式。
結論
在本教程中，我們學習了 Video.js 庫的一些方法參考或選項參考。我們瞭解了一些標準的 HTML5 選項，這些選項同時適用於 <video> 和 <video-js>。之後，我們看到了一些 Video.js 特定的設定，這些設定僅適用於 <video-js> 標籤，並允許您進一步控制影片播放器的行為和操作。
931 次瀏覽
