如何在 WordPress 中插入視頻

已發表: 2020-11-27

創建有趣且引人入勝的內容是讓訪問者參與其中並想要了解更多關於您和您的產品的關鍵。 之前，我已經提到了一些創建讓你墜入愛河的頁面的技巧，並且我明確提到了包含視覺元素的重要性。

事實上，去年，Zenith 的一項研究預測，到 2021 年，每天的視頻觀看量將增加 100 分鐘，視頻廣告支出將增加 35%。 據思科稱，到 2022 年，80% 的互聯網流量將採用視頻格式。 恐怕所有這些預測都無法滿足當前的大流行。

全球在線視頻觀看
2021 年全球在線視頻觀看和廣告預測。

因此，不用多說將視頻添加到您網站的帖子和頁面的重要性，讓我們看看在 WordPress 中添加視頻是多麼容易，以及最新版本的 Gutenberg 9.2.2 提供了哪些新功能。

複製視頻的 URL

我們很幸運，WordPress 編輯器允許您非常輕鬆地嵌入來自任何平台的視頻。 在瀏覽器中，從視頻所在的平台，可以直接複製其網址。

如何選擇 YouTube 視頻的 URL 的屏幕截圖
選擇並複制您要嵌入的視頻的 URL。

您還可以通過單擊找到的共享按鈕來複製 URL，以共享視頻，您可以使用該按鈕添加其他選項，例如指示視頻的開始時間。

分享 YouTube 視頻
分享 YouTube 視頻，指示從第 1 分鐘開始。

然後，您只需將其直接粘貼到文本塊中，或者您還可以選擇先前選擇要插入的視頻類型的塊。 因此，例如，如果我想在 Matt Mullenweg 出現的那一刻開始嵌入來自 YouTube 的 WordCamp US 2019 – State of the Word 視頻，我將創建一個新的 YouTube 塊並插入 URL https://youtu.be/gS6_xOABTWo?t=2085 （或者網址https://www.youtube.com/watch?v=gS6_xOABTWo&start=2085 ）。

嵌入 YouTube 視頻。
嵌入 YouTube 視頻。

請注意，時間必須以秒為單位。 此外，您還可以根據需要在頁面中對齊視頻。

對齊 YouTube 類型塊的視頻。
對齊 YouTube 視頻類型塊。

您會在帖子中獲得一個新的嵌入式視頻：

但不僅如此，當您添加 YouTube 塊（或其他類型的視頻）時，您還有其他選項可以添加到視頻顯示中，並且取決於播放它的平台。

因此，例如，在 YouTube 的情況下，您擁有的可用選項（通過 URL 中的附加參數）是：

  • 要嵌入具有適合主題的默認寬度和高度的視頻：https: https://www.youtube.com/gS6_xOABTWo
  • 要明確指定寬度和高度： https://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240 ://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240
  • 僅指定寬度： https://www.youtube.com/watch?v=gS6_xOABTWo&w=320 ://www.youtube.com/watch?v=gS6_xOABTWo&w=320
  • 要將播放器向左對齊： https://www.youtube.com/watch?v=gS6_xOABTWo&align=left ://www.youtube.com/watch?v=gS6_xOABTWo&align=left
  • 要將播放器向右對齊： https://www.youtube.com/watch?v=gS6_xOABTWo&align=right ://www.youtube.com/watch?v=gS6_xOABTWo&align=right
  • 要在完成視頻後僅顯示來自同一頻道的相關視頻： https://www.youtube.com/watch?v=gS6_xOABTWo&rel=0 ://www.youtube.com/watch?v=gS6_xOABTWo&rel=0
  • 要指定視頻的開始和結束時間，請添加開始和結束時間： https://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500 ://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500

在您的 WordPress 中上傳和查看您的視頻

有時您可能不想將自己的視頻上傳到第三方平台，而是希望將它們專門放在您的 WordPress 服務器上。 將視頻上傳到您的媒體庫並添加它就像上傳任何其他圖像一樣簡單。 單擊媒體或添加視頻類型塊：

視頻類型塊。
視頻類型塊。

就像添加圖片時一樣，您可以選擇直接上傳視頻、從媒體庫中選擇視頻或插入其 URL。

如何在塊編輯器中添加視頻塊的示意圖
從塊編輯器添加視頻。

然後，在媒體庫上，我們只需要選擇我們想要插入的視頻，我們就會在我們的頁面或帖子上提供它。

WordPress 媒體庫中可用視頻文件的屏幕截圖
所有可嵌入的視頻都將顯示在媒體庫中。

一旦被選中，我們將為所有訪問者提供它。

此外，新版本的古騰堡 9.2.2。 為視頻插入添加了新功能。 特別是，它允許您從編輯菜單添加<track>類型的 HTML 元素。

您肯定已經註意到，如果您下載了視頻，則包含它的文件夾中還包含一個SRT文件。 這些字幕文件不包含在視頻中，但視頻播放器能夠提取並與您正在觀看的視頻同步顯示。 因此， track元素用於指示這些SRT文件的位置和一些附加功能。

插入視頻時，生成的 HTML 類似於：

 <!-- wp:video {"id":15850} --> <figure class="wp-block-video"> <video controls="" src="/my-site.com/.../my-video.mp4"></video></figure> <!-- /wp:video -->

有了這個新版本的 Gutenberg，現在您可以從編輯菜單中將曲目元素添加到視頻中，而無需進行任何 HTML 編輯。 因此，例如，您可以為視頻添加英文字幕，HTML 代碼將包含帶有字幕信息的軌道。

 <video controls="" src="/my-site.com/.../my-video.mp4"> <track src="mi-sitio.com/.../english-captions.srt" label="English" srclang="en"> </video>

可以在軌道上指示的屬性如下：

  • srclang – 曲目文本數據的語言。 它必須是有效的 BCP 47 語言標籤代碼。
  • label – 播放器界面的標題。
  • kind - 如何使用軌道文本。 它可以有以下關鍵字：
    • 字幕
      • 為不懂語言的人設計的視頻內容翻譯字幕（例如，當視頻為英語時，為西班牙語字幕）。
    • 字幕
      • 轉錄視頻中聽到的內容（對話和其他聲音），供聽力有問題的人使用。
    • 說明
      • 為盲人或無法觀看視頻的人準備的視頻內容的文字說明。
    • 章節
      • 章節標題旨在在用戶瀏覽多媒體資源時使用。
    • 元數據
      • 腳本使用的軌道。 對用戶不可見。
  • src – 文本文件的 URL。

我們如何添加這些曲目？ 很簡單，添加一段視頻類型並選擇我們要顯示的視頻後，視頻編輯菜單中會出現一個新選項，即Add Track ，選項為Open Media Library或Upload 。

上傳或從媒體庫中選擇包含曲目文本的文件。
上傳或從媒體庫中選擇包含曲目文本的文件。

將文件上傳到媒體庫後，您就可以選擇它了。

如何從 WordPress 媒體庫中選擇包含要與視頻同步的文本的軌道的屏幕截圖
從媒體庫中選擇包含要與視頻同步的文本的軌道。

您將看到它已經出現在視頻編輯菜單中，您可以編輯軌道的屬性：

編輯軌道的屬性。
選擇文件後，您現在可以編輯軌道的屬性。

單擊編輯按鈕並根據需要修改屬性。 現在，您的視頻中包含的文本軌道將與視頻顯示同步。

古騰堡中如何修改視頻軌道屬性的截圖
根據您的需要修改軌道的屬性。

因此，您不僅可以在媒體庫中擁有自己的視頻，還可以輕鬆包含有關它們的其他信息。

您已經看到，只需複制視頻所在位置的 URL，即可輕鬆包含您在第三方平台上託管的視頻。 但是，如果出於某種原因，您更喜歡將視頻託管在自己的 WordPress 安裝中，那麼使用最新版本的 Gutenberg，您現在可以以舒適的方式展示您的視頻。

照片由 CardMapr 在 Unsplash 上拍攝。