資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 Video.js 播放器播放 YouTube 影片？
在本教程中，我們將學習如何使用 video.js 播放器播放 YouTube 影片。Video.js 是一款非常流行的現代 Web 影片播放器，它支援所有最新的影片格式，包括 YouTube、Vimeo 等。
現在，我們將瞭解如何使用 'videojs-youtube' 包在 video.js 庫中播放 YouTube 影片。
要在 video.js 播放器中播放 YouTube 影片，我們需要在專案中安裝一個名為 'videojs-youtube' 的包。安裝該包非常簡單，可以使用 bower 或 node 包管理器完成。
安裝 video.js YouTube
使用以下命令使用 npm 安裝 'videojs-youtube'：
npm install videojs-youtube
如果您使用 bower 作為包管理器，則可以使用以下命令安裝 'videojs-youtube'：
bower install videojs-youtube
在專案終端執行以上命令將安裝該包，我們可以透過匯入 'dist/Youtube.min.js' 檔案來開始使用它。請考慮以下程式碼片段，用於在專案中新增 video.js YouTube 包。
<script src="../dist/Youtube.min.js"></script>
正確設定檔案路徑非常重要，才能保證包正常工作。
現在我們已經將包新增到專案並匯入了，讓我們學習如何實際使用它播放 YouTube 影片。
使用 Video.js YouTube 包播放 YouTube 影片
要播放 YouTube 影片，我們需要對 video 元素標籤的 data-setup 屬性進行一些更改。
首先，我們需要將 data-setup 中的 techOrder 選項設定為 'youtube'。其次，我們必須傳遞 sources 陣列，其中包含影片 URL 及其 mime 型別 'video/youtube' 作為 data-setup 引數。
請考慮以下程式碼，用於將 YouTube 影片新增到 video 元素：
<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls preload="auto" fluid="true" poster="https://tutorialspoint.tw/videos/sample.png" data-setup='{"techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }' >
如您所見，在程式碼片段中，我們已將技術順序設定為 YouTube 並傳遞了 sources 陣列。
請注意，sources 標籤是陣列型別，包含 JSON 物件陣列，其中每個物件都具有我們想要播放的影片的型別和 URL。我們可以為多個影片新增多個 JSON 物件。另外，請確保影片型別為 'video/youtube'。
注意 - 我們已刪除了 <source> 標籤，並將其新增到 data-setup 屬性中。
示例 1
包含 video.js YouTube 外掛並在影片播放器中播放 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" controls preload="auto" fluid="true" poster="https://tutorialspoint.tw/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojsyoutube/2.6.1/Youtube.min.js"></script> var player = videojs('my-video'); </script> </body> </html>
注意 - 請在 <script> 標籤中更新 youtube.min.js 檔案的正確路徑。
執行以上程式碼將在您的 Web 瀏覽器中建立一個影片播放器，播放的影片將是 Tutorialspoint YouTube 影片，其 URL 為：https://www.youtube.com/watch?v=xjS6SftYQaQ
您會注意到我們的影片播放器具有 video.js 預設控制元件。如果您想更改 YouTube 控制元件，則需要在 data-setup 屬性中傳遞另一個選項，稱為 'ytControls'。由於 controls 是 video.js 中的關鍵字，因此預設情況下稱為 'ytControls'。
示例 2
在以上示例中新增 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" controls preload="auto" fluid="true" poster="https://tutorialspoint.tw/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] },"youtube": { "ytControls": 2 }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojsyoutube/2.6.1/Youtube.min.js"></script><script> var player = videojs('my-video'); </script> </body> </html>
如果您執行以上程式碼，則會在我們的影片播放器上顯示 YouTube 控制元件，而不是預設的 video.js 控制元件。
現在，我們建立了一個播放 YouTube 影片的影片播放器，並將控制元件更改為 YouTube 控制元件。您還可以使用 'customVars' 引數在影片播放器上設定其他引數。
例如，如果我們需要將播放器的視窗模式設定為透明，我們可以這樣做：
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }, "youtube": { "ytControls": 2, "customVars": { "wmode": "transparent"} }'
使用 'ytControls' 和 'customVars' 的 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-theme-sea" controls preload="auto" fluid="true" poster="https://tutorialspoint.tw/videos/sample.png" data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=dYaX2xjB9y4"}] }, "youtube": { "ytControls": 2, "customVars": { "wmode": "transparent"} }' > </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>
執行以上示例將建立一個具有 YouTube 控制元件且視窗模式設定為透明的 YouTube 影片播放器。您可以將任何 video.js 選項與 video.js YouTube 包一起使用。
結論
在本教程中，我們瞭解瞭如何使用 video.js 播放 YouTube 影片。首先，我們匯入了 video.js YouTube 外掛，該外掛負責在我們的影片播放器中播放 YouTube 影片。之後，我們藉助示例學習瞭如何顯示 YouTube 控制元件而不是預設的 video.js 控制元件。
6000+ 次瀏覽
