資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 video.js 播放器中初始靜音影片？
在本教程中，我們將學習如何在 video.js 播放器中初始靜音影片。
在本教程中，我們不會使用像“muted”這樣的標準 HTML 標籤（這些標籤可用於影片元素），而是將使用 video.js 特定的方法。因此，讓我們繼續本教程的後續部分，瞭解如何僅使用 video.js 在影片播放器中初始靜音影片。
為了靜音 video.js 播放器的影片，我們將使用 video.js 提供的“muted”方法和“volume”方法。我們可以使用此方法透過多種過程來靜音我們的影片播放器。我們將主要關注以下內容：
在“data-setup”屬性中更改“muted”方法
使用 Video.js 動態靜音我們的影片播放器。
使用“volume”方法靜音我們的影片
讓我們深入瞭解每種方法：
在“data-setup”屬性中更改“muted”方法
“muted”方法接受布林值作為引數，顧名思義，它可以靜音或取消靜音影片播放器的音量。
為了預設初始靜音影片播放器，我們必須在“data-setup”屬性中將“muted”方法的值設定為 true。請考慮以下程式碼片段以實現相同的效果。
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
preload="true"
fluid="true"
width=580
height=350
data-setup='{ "muted": true }'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
上面的程式碼片段為我們的 <video> 元素將“data-setup”屬性中的“muted”選項設定為 true：
注意：由於 data-setup 屬性接受 JSON 物件，請確保您在 data-setup 屬性中傳遞有效的 JSON 字串，否則程式碼將無法正常執行。
示例 1
使用 video.js 初始靜音影片播放器的完整示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Mute Video by Default</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"
autoplay="true"
preload="true"
fluid="true"
width=580
height=350
data-setup='{ "muted": true }'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
let player = videojs('my-video-player');
</script>
</body>
</html>
在上面的程式碼中，我們實現了以下內容：
首先，我們在 HTML 程式碼的 <head> 部分中使用了免費的 CDN URL 來匯入 video.js 的必需 CSS 和 JS 檔案。
接下來，我們在 <body> 部分內為我們的影片播放器建立了一個 <video> 元素，它具有各種類，例如“video.js vjs-default-skin vjs-big-play-centered”和“my-video-player”作為影片“id”。
我們還對 <video> 元素使用了一些標準的 HTML 影片選項，如 controls 和 poster，並且 fluid 屬性用於使影片播放器響應式。請注意，我們沒有使用標準的 HTML“muted”屬性。
相反，我們使用 video.js 在 <video> 標籤的“data-setup”屬性中將“muted”屬性設定為 true。
當我們在 Web 瀏覽器中執行上述示例時，將建立一個影片播放器，該播放器最初將處於靜音狀態。
現在我們已經瞭解瞭如何使用 video.js 在初始化時靜音影片，讓我們學習如何使用 JavaScript 動態實現相同的功能。
使用 Video.js 動態靜音我們的影片播放器
在本教程的這一部分中，我們將瞭解如何使用 JavaScript 為使用 video.js 建立的影片播放器動態靜音影片播放器。
為了初始靜音影片，我們需要在 JavaScript 中建立一個 JSON 物件，該物件將“muted”鍵作為 false（布林值），然後在初始化影片播放器時將其傳遞給我們的影片播放器引用。
請考慮以下程式碼片段，以使用 JavaScript 動態靜音影片播放器。
<script>
// Muting Video Player using video options
let videoOptions = { "muted": true };
// Video Player Initialization
let player = videojs('my-video-player', videoOptions);
</script>
在上面的程式碼片段中，我們透過將“muted”屬性設定為 true 來靜音 video.js 播放器中的影片，然後將其傳遞給我們的影片播放器引用的初始化，該引用具有“my-video-player”作為 id。
示例 2
在完整示例中使用上述程式碼片段將如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Mute Video by Default</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"
autoplay="true"
preload="true"
fluid="true"
width=580
height=350
data-setup='{ "muted": true }'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Muting Video Player using video options
let videoOptions = { "muted": true };
// Video Player Initialization
let player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
執行上述示例將在我們的 Web 瀏覽器中建立一個影片播放器，並且影片將預設處於靜音狀態，就像前面的示例一樣。
因此，這是在 video.js 播放器中初始靜音影片的第二種方法。現在讓我們繼續下一節，在下一節中我們將學習如何使用 volume 方法來靜音影片。
使用“volume”方法靜音我們的影片
在本節中，我們將使用影片播放器引用可用的“volume”方法。“volume”方法將數值作為輸入引數。此值是最初在影片播放器上設定的音量百分比。
我們將為影片播放器引用將音量百分比值設定為 0。請考慮以下程式碼片段以實現相同的效果：
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Setting the volume of video player
player.volume(0);
</script>
在上面的程式碼中，我們初始化了影片播放器，然後將初始音量設定為 0，因此我們的影片播放器將預設處於靜音狀態。
示例 3
在完整示例中新增上述程式碼片段將如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Mute Video by Default</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"
autoplay="true"
preload="true"
fluid="true"
width=580
height=350
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Setting the volume of video player
player.volume(0);
</script>
</body>
</html>
在上面的完整示例中，我們使用 volume 方法將預設音量設定為“0”。如果我們將此值設定為 50，則我們的影片播放器最初將以 50% 的音量開始。
執行此示例將在 Web 瀏覽器中建立一個影片播放器，該播放器將預設處於靜音狀態。
因此，這些是使用 video.js 靜音影片播放器的三種方法，我們可以根據我們的用例使用上述任何一種方法。
結論
在本教程中，我們瞭解瞭如何在不使用標準 HTML“muted”屬性的情況下初始靜音 video.js 播放器中的影片。我們查看了使用 video.js 實現相同目標的三種方法，例如使用“volume”和“muted”video.js 選項引用。我們還為每種方法提供了一個完全有效的示例。
1K+ 次觀看
