資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 video.js 播放器中隱藏播放進度條？
在本教程中，我們將學習如何使用 video.js 隱藏影片播放器的播放進度條。Video.js 允許您為各種影片格式（如 mp4、WebM 和 FLV）以及現代影片播放格式（如 YouTube、Vimeo、Flash 等）建立影片播放器。Video.js 由於其廣泛的外掛支援以及對各種裝置（如桌上型電腦、移動裝置等）的支援，被廣泛應用於許多網站。
在本教程中，我們將透過停用或隱藏影片播放器的控制欄來定製我們的影片播放器。隱藏影片播放器的播放進度條可以確保終端使用者無法跳過影片，必須觀看整個影片。當您試圖播放廣告影片時，這將非常有用。讓我們繼續本教程的下一部分，學習如何實現這一點。
隱藏 video.js 播放器中的播放進度條
為了隱藏 video.js 播放器的播放進度條，我們將使用 video.js 提供的 “progressControl” 選項引用。此選項引用具有多種方法，例如 disable() 或 hide()，分別用於停用和隱藏進度條。
“progressControl” 屬性可以用多種方式使用。在本教程中，我們將主要關注以下三種方法：
使用 “progressControl” 選項引用停用播放進度條
使用 “progressControl” 選項引用隱藏播放進度條
透過移除進度控制欄的顯示屬性來隱藏播放進度條
讓我們快速瀏覽一下每種方法
使用 “progressControl” 選項引用停用播放進度條
前提條件 - 假設您知道如何使用 video.js 庫建立一個基本的影片播放器。
我們可以使用影片播放器初始化時 progressControl 選項引用的 disable 方法完全停用 video.js 播放器的播放進度條。
例如，如果您有一個 ID 為 my-video-player 的 Video.js 播放器，您可以這樣停用播放器的播放進度條：
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Disabling the progress control from the control bar
player.controlBar.progressControl.disable();
</script>
正如您在上面的程式碼片段中看到的，我們使用了 “controlBar.progressControl” 選項引用，它負責處理 progressBar 方法。我們使用了此選項引用的 'disable()' 方法來確保停用影片播放器的播放進度條。
請注意，此方法將停用播放進度條，而不是隱藏它。使用者將看到播放進度條，但無法與其互動。
示例 1
隱藏 video.js 播放器播放進度條的完整示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
preload="true"
muted="true"
autoplay="true"
width=580
height=350
data-setup='{}'
>
<source
src=" https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
</body>
</html>
如何在 video.js 播放器中隱藏播放進度條？
首先，我們使用 video.js 的 CDN URL 匯入與 video.js 相關的必要的 JS 和 CSS 檔案。
接下來，我們在 <body> 部分內為我們的影片播放器建立了一個 <video> 元素，其中包含各種類，例如 'video.js vjs-default-skin vjs-big-play-centered' 和 'my-video-player' 作為影片 'id'。
我們還為 <video> 元素使用了一些標準的 HTML 影片選項，例如 muted 和 poster，並且使用了 fluid 屬性來使影片播放器具有響應性。
接下來，我們為 ID 為 'my-video-player' 的影片元素初始化了一個影片播放器。
在示例的 <script> 部分中，我們在影片播放器初始化時使用了帶有 disable 方法的 'controlBar.progressControl' 選項引用來停用播放進度條。
當上述程式碼在 Web 瀏覽器中執行時，您會注意到影片播放器將具有播放進度條，但您無法與其互動或更改影片播放頭的 位置。
使用上述選項引用，您可以停用影片播放器的播放進度條。現在讓我們繼續本教程的下一部分，看看如何從影片播放器控制元件中隱藏或移除進度條。
使用 “progressControl” 選項引用隱藏播放進度條
為了隱藏影片播放器的播放進度條，我們還可以使用 “progressControl” 選項引用的另一種方法。就像我們在上面的示例中使用 disable 方法一樣，我們也可以使用 hide 方法。hide 方法將隱藏影片控制元件中的播放進度條。
請考慮以下示例，該示例使用 'progressControl' 欄的 hide 方法隱藏 video.js 播放器的進度條：
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
在上面的程式碼片段中，我們使用了 controlBar.progressControl 選項引用，它負責處理 progressBar 方法。我們使用了此選項引用的 'hide()' 方法來確保隱藏影片播放器的播放進度條。
示例 2
隱藏 video.js 播放器播放進度條的完整示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
preload="true"
muted="true"
autoplay="true"
width=580
height=350
data-setup='{}'
>
<source
src=" https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
</body>
</html>
正如您在上面的示例中看到的，我們透過在影片播放器引用上使用 'controlBar.progressControl.hide()' 方法來更改影片播放器控制欄的可見性。
當上述程式碼在 Web 瀏覽器中執行時，您會注意到影片播放器的控制欄將被隱藏。
現在，讓我們繼續本教程的後續部分，介紹隱藏播放進度條的最終方法。
透過移除進度控制欄顯示屬性來隱藏播放進度條
在本教程的這一部分中，我們將學習如何透過更改樣式屬性來隱藏影片播放器的播放進度條。
我們可以使用 'progressControl' 方法上的 'el().style.display' 屬性來更改播放進度條的顯示。將其值設定為 none 將更改播放進度條的顯示屬性，並且播放進度條將被隱藏。這也可以使用 CSS 屬性完成，但出於本教程的目的，我們將重點關注動態實現這一點。
請考慮以下更改播放進度條的顯示以將其從 video.js 播放器中隱藏的程式碼片段。
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Setting the display style of progress bar to none
player.controlBar.progressControl.el().style.display = 'none';
</script>
正如您在上面的程式碼片段中看到的，我們將 contolBar progressControl 方法的 “style.display” 屬性設定為 none。這將確保隱藏影片播放器的播放進度條。
示例 3
在完整的示例中使用上面的程式碼片段來隱藏 video.js 播放器的播放進度條將如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
preload="true"
muted="true"
autoplay="true"
width=580
height=350
data-setup='{}'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Setting the display style of progress bar to none
player.controlBar.progressControl.el().style.display = 'none';
</script>
</body>
</html>
在上面的示例中，我們透過將 'player.controlBar.progressControl.el().style.display' 的值設定為 none 來隱藏 video.js 播放器中的播放進度條。
當上述程式碼在 Web 瀏覽器中執行時，建立的影片播放器將沒有播放進度條。
因此，這些是在 video.js 播放器中隱藏或停用播放進度條的三種方法。
結論
在本教程中，我們瞭解瞭如何在 video.js 播放器中隱藏播放進度條。我們透過使用 video.js 提供的控制欄和進度控制選項引用的各種方法實現了這一點。我們藉助三個完全可執行的示例，展示了實現此目標的三種方法。
4K+ 次瀏覽
