資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 Video.js 播放器中設定影片海報
在本教程中，我們將學習如何為使用 video.js 建立的影片播放器設定海報影像。Video.js 是一個非常流行且知名的開源 HTML 影片播放器框架。它支援許多影片格式，從標準影片格式（如 mp4、WebM、Flv 等）到其他現代影片播放格式（如 YouTube、Vimeo、twitch 等）。Video.js 如此廣泛地被接受，因為它在建立影片播放器時提供了靈活性和自定義選項以及支援。
在本教程中，我們將透過為影片新增海報影像來改變影片播放器的外觀。海報影像是在網頁載入且終端使用者尚未播放影片時顯示的影像檔案。海報影像非常有用，因為它可以展示影片的內容，也可以作為影片的縮圖，從而吸引終端使用者播放影片。因此，影片海報影像有很多用途。現在讓我們繼續本文的下一部分，瞭解如何使用 video.js 為影片新增海報影像。
在 Video.js 播放器中設定影片海報
為了在影片播放器上顯示海報影像，我們將使用 video.js 提供的“poster”選項方法。此方法接受影像路徑作為值，並顯示作為影片海報傳遞的影像。此選項支援 png、jpg 等廣泛接受的影像格式的源影像。
“poster”屬性可以透過兩種不同的方法使用。
使用帶有 <video> 標籤的“data-setup”
使用 js 動態設定海報
讓我們快速瞭解這兩種方法。
使用“data-setup”屬性設定海報
先決條件 - 假設您知道如何使用 video.js 庫建立基本的影片播放器。
要將影片海報影像新增到我們的影片中，我們需要在 <video> 標籤的“data-setup”屬性中傳遞帶有影像檔案路徑的“poster”選項。請考慮以下程式碼片段以實現相同的功能。
<video
id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
preload="auto"
width="560"
height="340"
data-setup='{ "poster": "assets/sample.png" }'
>
在上面的程式碼片段中，我們在 <video> 元素的“datasetup”屬性中添加了一個 PNG 影像檔案作為海報。請確保影像檔案的源路徑根據您的本地目錄正確。
示例 1
帶有海報影像的完整影片播放器示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Video Poster Image Tutorial</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"
muted="true"
preload="auto"
width="560"
height="340"
data-setup='{ "poster":
"https://tutorialspoint.tw/videos/sample.png" }'
>
<source
src="https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
var player = videojs('my-video');
</script>
</body>
</html>
在上面的程式碼中，我們做了以下操作：
首先，我們使用 CDN URL 在 <head> 標籤中匯入了 video.js CSS 和 JS 檔案。
接下來，在 <body> 標籤內，我們建立了一個 <video> 元素，其類為“video.js vjs-default-skin vjs-big-play-centered”，且“id”為“my-video”。我們在下面的 <script> 標籤中使用了此 id 來引用播放器。一些標準的 HTML 影片選項（如 controls、muted、width 和 height）也包含在 <video> 標籤中。
在 <video> 標籤的“data-setup”屬性中，我們傳遞了要顯示在影片上的海報影像。
如果我們執行上述程式碼，它將建立一個影片播放器，該播放器將顯示我們在“data-setup”屬性中傳遞的海報影像。播放影片後，海報影像將不會顯示。它僅在點選影片的播放按鈕或影片未播放之前顯示。因此，請確保此類影片的“autoplay”屬性設定為 False。
現在我們已經瞭解瞭如何在 video.js 播放器中為影片設定海報影像，我們可以繼續瞭解使用 JavaScript 動態呼叫海報影像方法的第二種方法。
使用 JavaScript 和影片選項動態設定海報
在本教程的這一部分中，我們將看到如何使用 JavaScript 動態設定海報影像。此方法相對於先前方法的優勢在於，所有操作都在 HTML 程式碼的 JavaScript (<script> 標籤) 部分處理，這使程式碼更易於閱讀和管理。此外，使用此方法可以更好地控制影片播放器。
要在 JavaScript 中為我們的影片播放器顯示海報影像，首先，我們需要建立一個包含帶有影像檔案源路徑的 poster 屬性的 JS 物件，然後將其傳遞給 video.js 播放器引用。
請考慮以下程式碼片段，以使用 JavaScript 為我們的影片播放器動態新增海報。
<script>
// Setting up poster image with video options
let videoOptions = {
"poster": "assets/sample.png"
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
在上面的程式碼片段中，我們添加了帶有示例 PNG 檔案路徑的海報影像，並將其傳遞到影片播放器引用的初始化中，該引用在其中具有“myvideo”的 id。
示例 2
將上述程式碼片段新增到完整示例中將使程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Video Poster Image Tutorial</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"
muted="true"
preload="auto"
width="560"
height="340"
data-setup='{}'
>
<source
src=" https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Setting up poster image with video options
let videoOptions = {
"poster": " https://tutorialspoint.tw/videos/sample.png"
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
</body>
</html>
如果您仔細觀察上面的示例，我們會發現我們從 <video> 標籤的“data-setup”屬性中刪除了 poster 影像選項。相反，我們在 <script> 標籤中動態地將示例 PNG 影像作為海報新增到我們的影片中。
但是，當您在 Web 瀏覽器中執行上述程式碼時，將建立與上述示例相同的影片播放器。它將具有相同的海報影像，並且此海報影像僅在影片播放之前顯示。
因此，我們可以使用上述任何方法使用 video.js 建立帶有海報影像的影片播放器。
此外，video.js 還允許您使用 <style> 標籤中的“.vjs-poster”類來控制海報影像的 CSS。例如：如果您想將海報影像的背景大小設定為 100%，以便它填充整個影片並且沒有黑色區域，則可以使用 <head> 標籤中的以下程式碼來實現。
<!-- CSS for Poster Image -->
<style>
.vjs-poster{
background-size: 100% !important;
}
</style>
在我們的示例中使用上述程式碼將使顯示影像為 100%。因此，您可以對“.vjs-poster”類上的任何 CSS 影像屬性進行自定義。
示例 3
將 CSS 新增到上述示例中將使示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Speed Up/Down Video Tutorial</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>
<!-- CSS for Poster Image -->
<style>
.vjs-poster{
background-size: 100% !important;
}
</style>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
preload="auto"
width="560"
height="340"
data-setup='{}'
>
<source
src=" https://tutorialspoint.tw/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Setting up poster image with video options
let videoOptions = {
"poster": "https://tutorialspoint.tw/videos/sample.png"
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
</body>
</html>
執行上述程式碼將建立一個帶有海報影像的影片播放器，該海報影像已填充以覆蓋螢幕的 100%。
結論
在本教程中，我們瞭解瞭如何為使用 video.js 播放器建立的影片設定海報影像。我們使用兩種方法將海報影像新增到影片中，然後瞭解瞭如何在幾個示例的幫助下使用“.vjs-poster”類更改顯示影像的 CSS。
5K+ 閱讀量
