資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 Video.js 播放器播放 Vimeo 檔案？
在本文中，我們將學習如何使用 video.js 播放器播放 Vimeo 影片檔案。Video.js 是一款易於使用且非常流行的現代影片播放器，它支援所有最新的影片格式，包括 Vimeo、youtube 等，並可在各種平臺（如桌上型電腦、筆記型電腦等）上使用。
現在，讓我們專注於建立一個能夠播放 Vimeo 檔案的影片播放器，方法是使用“videojs-vimeo”包。此包將幫助我們輕鬆播放 Vimeo 影片檔案。
如何使用 Video.js 播放器播放 Vimeo 檔案？
為了在 video.js 播放器中播放 Vimeo 影片，我們需要在專案中安裝一個名為“videojs-vimeo”的包。安裝該包非常簡單，可以使用 yarn 或節點包管理器來完成。
安裝 video.js Vimeo 包
考慮以下使用 npm 安裝“videojs-vimeo”的命令：
npm install @devmobiliza/videojs-vimeo
如果您使用 yarn 作為首選的包管理器，則可以使用以下命令安裝該包：
yarn add @devmobiliza/videojs-vimeo
您只需在專案目錄的終端中執行上述命令即可安裝該包。現在，要在程式碼中使用它，我們需要在 <script> 標籤中新增包的 dist 檔案的路徑。使用以下程式碼片段新增 video.js Vimeo 包。
<script src="videojs-vimeo/dist/videojs-vimeo.js"></script>
確保正確更新包的路徑，以便在專案中新增 video.js-vimeo。
既然我們已將 vimeo 包包含在專案中，讓我們使用它來建立我們的影片播放器。
.使用 Video.js Vimeo 包播放 Vimeo 影片
為了在我們的 video.js 播放器中播放 vimeo 影片，我們需要建立一個簡單的播放器並在 data-setup 屬性中傳遞一些選項。我們需要在“data-setup”中傳遞的影片選項如下：
在 data-setup 中將 techOrder 選項設定為 vimeo。
將 sources 陣列傳遞給 data-setup 作為引數，其中包含影片 URL 及其 MIME 型別“video/vimeo”。
請考慮以下新增帶有 vimeo 影片檔案的影片元素的程式碼：
HTML 程式碼
<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" fluid="true" poster="https://tutorialspoint.tw/videos/my_video_poster.jpg" data-setup='{"techOrder": ["vimeo"], "sources": [{ "type":"video/vimeo", "src": "https://www.vimeo.com/380886323"}] }' >
如您所見，在程式碼片段中，我們已將技術順序設定為 vimeo 並傳遞了包含 HTML 影片 URL 的 sources 陣列。請注意，sources 標籤包含一個 JSON 物件陣列，其中每個物件都包含我們要播放的影片的型別和 URL。我們可以為多個影片新增多個 JSON 物件。此外，請確保新增影片型別為“video/vimeo”。
注意：我們已刪除了 <source> 標籤，該標籤用於在 <video> 元素中新增影片檔案。相反，我們在 data-setup 選項中添加了 sources 陣列。
因此，包含 video.js vimeo 外掛並在影片播放器中播放 vimeo 影片檔案的完整示例如下所示。
示例
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" fluid="true" poster="https://tutorialspoint.tw/videos/my_video_poster.jpg" data-setup='{"techOrder": ["vimeo"], "sources": [{ "type":"video/vimeo", "src": "https://www.vimeo.com/380886323"}] }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="videojs-vimeo/dist/videojs-vimeo.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
注意：請在 <script> 標籤的“src”屬性中更新 videojs-vimeo.js 檔案的正確路徑。
執行上述程式碼將在您的 Web 瀏覽器中建立一個影片播放器，並且播放的影片將是具有以下 URL 的 HTML vimeo 影片：https://www.vimeo.com/380886323
現在，我們已經建立了一個播放 vimeo 影片的影片播放器，我們還可以設定 vimeo 影片播放器的其他引數，例如顏色、質量、迴圈、自動播放、靜音等。
例如，如果我們需要將播放器的顏色更改為紅色並迴圈播放影片，我們可以透過以下方式實現：
data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://www.vimeo.com/380886323"}] }, "vimeo": { "color": "#ff0000", "loop": "true" }'
使用紅色作為顏色和將影片迴圈設定為 true 的 youtube 影片播放器的完整工作示例如下所示。
示例
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" fluid="true" poster="https://tutorialspoint.tw/videos/my_video_poster.jpg" data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "https://www.vimeo.com/380886323"}] }, "vimeo": { "color": "#ff0000", "loop": "true" }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script src="videojs-vimeo/dist/videojs-vimeo.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
執行上述示例將建立一個顏色已更改的 vimeo 影片播放器，並且影片將迴圈播放。或者，您可以將任何 video.js 選項與 video.js vimeo 包一起使用。
結論
在本文中，我們瞭解瞭如何使用 video.js 播放 vimeo 影片。首先，我們匯入了 video.js vimeo 外掛，該外掛負責在我們的影片播放器中播放 vimeo 影片。之後，我們學習瞭如何更改影片播放器的顏色，然後透過示例學習瞭如何迴圈播放影片。
1K+ 次檢視
