資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學新增自定義 Video.js 控制元件欄按鈕
Video.js 是一個著名的線上影片播放器 JavaScript 庫，用於在 Web 瀏覽器中為各種影片格式建立影片播放器。它支援所有現代影片格式，例如 YouTube、Vimeo、Flash 等，以及所有常見的影片播放格式，例如 mp4、WebM、Flv 等。除了支援廣泛的格式外，Video.js 還提供了許多功能和靈活性來根據需要自定義影片播放器。
在本教程中，我們將學習如何使用 Video.js 透過建立和新增新的按鈕到影片的控制欄來自定義影片播放器。向影片播放器新增自定義按鈕可以讓你更好地控制它，並且還可以增強使用者體驗。例如，新增一個按鈕來快進或快退 30 秒對於使用者來說非常方便等等。因此，自定義按鈕可能有多種應用。現在，在本教程的後續部分，我們將開始開發我們自己的按鈕並將其新增到影片播放器中。
新增自定義 Video.js 控制元件欄按鈕
在本節中，我們將執行以下操作：
向影片播放器控制元件欄新增按鈕
向按鈕新增各種選項 - 使其更具互動性。
讓我們繼續向影片播放器新增按鈕。
向影片播放器控制元件欄新增按鈕
先決條件 - 假設您知道如何使用 Video.js 庫建立一個基本的影片播放器。
為了向影片播放器控制元件欄新增按鈕，我們將使用 Video.js 公開的各種選項引用，例如 fluid、audioOnlyMode、controlBar。在本篇文章中，我們將特別使用 controlBar 選項。'controlBar' 提供了多種方法，例如 getChild 或 addChild，允許我們在播放器中建立和新增各種元素。
我們將使用 controlBar 類的 addChild 方法來新增我們的按鈕。然後，我們將按鈕新增到 HTML DOM 並將其 innerHTML 設定為 Video.js 提供的圖示。
考慮以下用於向控制元件欄新增按鈕的 JavaScript 程式碼：
// Initializing the video player
var player = videojs('my-video');
// Adding button to the control bar
var myButton = player.controlBar.addChild('button', {}, 0);
// Create our button's DOM Component
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
在上面的程式碼片段中，我們使用 id 為 'my-video' 初始化了我們的 Video.js 播放器到 'player' 變數中。接下來，我們使用 controlBar 選項引用提供的 addChild 方法將按鈕新增到控制元件欄。addChild 方法接受 3 個引數，第一個引數是要新增的子元素，第二個引數是新增的子元素的選項，最後一個引數是控制元件欄上子元素的索引。由於我們將索引設定為 0，因此我們的按鈕將新增到控制元件欄的開頭。addChild 方法返回作為子元素新增的元件。
之後，我們使用了 'myButton.el()'，它負責實際建立按鈕的 DOM 元件。'.el()' 是另一個 controlBar 方法，它將使用 addChild() 建立的元件推送到 HTML DOM。沒有它，我們將無法在控制元件欄中看到我們的按鈕。
最後，我們將按鈕的 innerHTML 設定為一個圖示。我們使用的圖示是 vjs-icon-cancel，它顯示一個叉號圖示作為我們的按鈕。此圖示由 Video.js 官方提供，您可以在以下網址找到所有其他圖示：https://videojs.github.io/font/
示例 1
建立和向控制元件欄新增按鈕的完整示例如下：
<!DOCTYPE html>
<html>
<head>
<title>Adding Custom Video.js Control Bar buttons</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.2.0/video.min.js"></script>
</script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
muted="true"
preload="auto"
poster="https://tutorialspoint.tw/videos/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4">
</video>
<script>
// Initializing the video player
var player = videojs('my-video');
// Adding button to the control bar
var myButton = player.controlBar.addChild('button', {}, 0);
// Create our button's DOM Component
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
</script>
</body>
</html>
在上面的程式碼片段中，我們執行了以下操作：
首先，在 <body> 標籤中，我們建立了一個 <video> 元素，其 class 為 "video.js vjsdefault- skin vjs-big-play-centered"，id 為 'my-video'。此 id 稍後將在 <script> 標籤中用於引用播放器。
我們還添加了一些標準的 HTML 影片選項，例如 controls、muted、autoplay、width、height 等。
在 <source> 標籤內，包含了 mp4 影片的路徑。請確保將影片路徑正確更新為您的影片檔案。
在 <script> 標籤中，我們首先引用了 Video.js 來為 id 為 'my-video' 的影片建立播放器，然後使用 controlBar 方法建立一個按鈕並將其新增到影片播放器的 HTML 中。
執行上述程式碼後，影片將在我們的 Web 瀏覽器中播放，並且您會在控制元件欄中注意到我們會在第一個位置有一個取消或叉號按鈕。因此，我們已成功將按鈕新增到我們的控制元件欄。
現在，如果您單擊該按鈕，您會注意到影片播放器實際上沒有任何反應。原因是我們尚未向自定義按鈕新增任何功能。讓我們透過在本文的下一節中新增一些屬性來使我們的按鈕更具互動性。
向按鈕新增選項
我們可以配置和更改新增到控制元件欄的按鈕的每一個方面，例如更改控制文字、關閉影片播放器、提高影片速度、更改按鈕的位置等。
在本篇文章中，我們將向按鈕新增控制文字和單擊方法。
控制文字是在您將滑鼠懸停在按鈕上時看到的文字。它通常是按鈕的名稱，用於向終端使用者傳達此按鈕的作用。例如，如果您將滑鼠懸停在影片播放器的全屏按鈕上，它會顯示一個小文字“全屏”，這意味著如果您單擊該按鈕，影片將切換到全屏模式。
單擊方法是一個函式，用於處理使用者單擊我們的按鈕時將發生的事情。在本文中，我們將顯示一個帶有我們取消按鈕點選的警報訊息。
讓我們從向按鈕新增控制文字開始。為了新增控制文字，我們將使用按鈕元件上的 'controlText' 選項。請考慮以下程式碼片段：
var myButton = player.controlBar.addChild('button', {}, 0);
// Setting control text for the button hover effect
myButton.controlText("My Cancel Button");
將此程式碼片段新增到示例 1 後，您會觀察到當您將滑鼠懸停在控制元件欄中的取消按鈕上時，它現在會顯示一個小文字“我的取消按鈕”。
現在，讓我們繼續為新建立的按鈕新增單擊功能。為此，我們將使用按鈕 DOM 元素上的 'onClick' 方法。相應的程式碼片段如下所示：
var myButtonDom = myButton.el();
// Setting the control button click function
myButtonDom.onclick = function () { alert('Cancel Button Clicked!')};
在上面的示例中新增上述程式碼片段將在我們的影片播放器中新增單擊函式。您會觀察到，現在當您單擊取消按鈕時，Web 瀏覽器中會顯示一個警報，顯示“取消按鈕已單擊！”。您可以在此函式內新增任何型別的功能，這些功能將在有人單擊我們的按鈕時執行。
示例 2
將上述兩個程式碼片段新增到我們的程式碼示例中將如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Adding Custom Video.js Control Bar buttons</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
muted="true"
preload="auto"
poster="https://tutorialspoint.tw/videos/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video');
// Adding button to the control bar
var myButton = player.controlBar.addChild('button', {}, 0);
// Create our button's DOM Component
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
// Setting control text for the button hover effect
myButton.controlText("My Cancel Button");
// Setting the control button click function
myButtonDom.onclick = function () { alert('Cancel Button Clicked!')};
</script>
</body>
</html>
如果您執行上述示例，您會觀察到影片播放器將在控制元件欄的開頭顯示一個取消按鈕。當您將滑鼠懸停在按鈕上時，將顯示我們的控制文字，即“我的取消按鈕”，並且單擊時會顯示一個警報。
結論
在本教程中，我們學習瞭如何建立一個新的自定義按鈕並使用 Video.js 將其新增到影片播放器的控制元件欄中。我們使用 controlBar 的 addChild 方法建立按鈕元件，然後使用“.el()”方法將按鈕新增到 HTML DOM。新增按鈕後，我們還使用 onClick 方法自定義了控制文字並增強了按鈕的功能。
6000+ 次瀏覽
