如何使用 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 控制元件。