古騰堡編輯器教程：如何使用WordPress視訊區塊

WordPress視訊區塊使您可以輕鬆地將視訊上傳和新增到您的頁面和文章。它為您提供了大量控制大小和功能的選項。使用此區塊新增視訊使內容看起來更專業和可取。幸運的是，視訊區塊易於使用。

在本教程中，我們將探索視訊區塊。我們還將看到它的設定和選項，檢視有關如何使用它的一些提示和最佳實踐，以及常見問題。

如何將視訊區塊新增至文章或頁面

要將視訊區塊新增到您的內容中，首先，將游標放在您希望區塊出現的位置，然後選擇插入器工具。接下來，將開啟一個搜尋框，您可以在其中搜尋區塊或滾動檢視選項。搜尋視訊並在結果中顯示時選擇它。

如果您願意，可以在要放置區塊的位置鍵入/video並按 Enter 鍵或從選項中選擇它。

視訊區塊將放置在內容區域內。插入媒體的工作方式與圖片區塊相同。上傳視訊、從庫中選擇視訊或插入要顯示的視訊的URL。如果URL來自YouTube等來源，則該區塊將轉換為該型別的區塊。在您上傳視訊之前，選項很少。

視訊播放器包括所有基本播放選項，包括播放/暫停按鈕、進度條、音訊、全屏以及下載和畫中畫按鈕。畫中畫將視訊放置在右下角，以便在使用者滾動瀏覽網站時可以播放。您可以在視訊下方放置標題。

視訊區塊設定和選項

選項和設定包括工具欄和側邊欄。在上傳視訊之前，您不會看到所有這些設定。

視訊區塊工具欄

單擊視訊區塊內的任意位置以檢視工具。在您在此區塊下新增區塊區域之前，某些工具可能不會顯示。讓我們詳細看看每個設定。

視訊更改區塊或樣式

選擇視訊播放圖示會開啟一個下拉框，您可以在其中將區塊轉換為其他型別的區塊。此示例顯示封面。

• 組合– 這會將區塊新增到組中，以便您可以將它們作為單個區塊進行調整。
• 欄目– 這會將區塊放置在列中。
• 媒體和文字– 這會在媒體旁邊新增文字，建立兩列。
• 封面– 這會在視訊上放置一個標題。您可以將標題從段落區塊更改為其他型別的文字區塊或按鈕。
• 檔案– 這會將視訊更改為帶有標題的按鈕，允許使用者下載視訊而不是從網站播放。

視訊區塊拖動工具

用滑鼠抓住拖動工具將其移動到內容中的任何位置。將出現一條藍線，指示在您四處拖動區塊時將放置該區塊的位置。

然後視訊區塊將被放置在其新位置。

視訊區塊移動

使用向上和向下箭頭將視訊區塊移動一個內容部分。

視訊區塊對齊方式

對齊選項包括左、中、右、寬幅和全幅。左右對齊將下一個區塊中的文字環繞在視訊周圍。我已將此示例設定為右對齊。

這是寬幅。它佔據了大部分螢幕。

視訊區塊文字軌道

文字軌道在視訊播放時顯示字幕。它們的格式為WebVTT（Web視訊文字軌道）.vtt檔案。檔案從媒體庫載入。

上傳 .vtt 檔案後，您將看到編輯曲目的選項。新增標籤，選擇語言，然後選擇曲目型別。

標籤是使用者在檢視可用軌道時將看到的文字軌道的標題。

源語言是文字軌道的語言。

種類是指將顯示的軌道型別。選項包括：

• 字幕– 對話的翻譯。
• 說明文字– 對話、音效、音樂等的轉錄。
• 內容描述– 描述正在發生的事情的文字。
• 章節– 用於導航的章節標題。
• 後設資料– 供JavaScript使用的資料。

然後將字幕新增到使用者可以選擇的播放器選項中。

視訊區塊替換

這使您可以用不同的視訊替換視訊。

視訊區塊選項

選項包括隱藏更多設定、複製、複製、在之前或之後插入、移動到、作為HTML編輯、新增至可重用區塊、組合和刪除區塊。

以下是選項的作用：

• 隱藏更多設定– 這會隱藏右側邊欄，消除干擾並擴充套件您的工作空間。
• 複製– 這會將視訊區塊複製到剪貼簿，以便您可以將其貼上到內容中的任何位置。
• 建立副本– 這會在原始區塊下新增區塊的副本。
• 在區塊前插入– 這會在此區塊上方新增一個區塊區域，以便您可以放置​​另一個區塊。
• 在區塊後插入– 這會在此區塊下方新增一個區塊區域，您可以在其中放置另一個區塊。
• 移動至– 這使您可以向上或向下移動區塊。它是通過使用箭頭鍵在您想要區塊的位置放置一條藍線並按Enter來移動的。
• 作為HTML編輯 – 這僅顯示此區塊的HTML，其他區塊保持正常。
• 新增至可重用區塊– 將區塊新增到您的可重用區塊中，以便您可以在其他頁面或文章上重用它。
• 組合– 這會將區塊新增到組中，以便您可以將所有區塊作為一個單元進行調整。
• 刪除區塊– 這將刪除區塊。

視訊區塊字幕選項

標題也有一組選項。單擊標題區域內的任意位置會開啟一個帶有粗體、斜體和連結選項的小工具欄。它還包括格式化選項。選項包括：

• 內聯程式碼
• 內嵌圖片
• 鍵盤輸入
• 刪除線
• 下標
• 上標
• 文字顏色

每個都會影響您突出顯示的文字。

視訊區塊設定

視訊區塊的設定包括視訊和高階。讓我們看看兩者。

視訊設定

視訊設定可讓您控制播放器的工作方式。選項包括：

• 自動播放– 當頁面載入時自動播放視訊。
• 迴圈– 連續迴圈播放視訊。
• 靜音– 使音訊靜音。
• 回放控制– 隱藏或顯示播放器控制元件。當控制元件隱藏時，使用者將無法控制視訊。必須啟用自動播放。
• 內聯播放 – 在元素的播放區域內播放視訊。
• 預載入– 設定載入頁面時下載的視訊量。選擇自動（整個視訊）、後設資料（僅基本資訊）或無（不自動下載任何內容）。
• 海報影象– 可讓您用特色影象替換視訊第一幀的螢幕截圖。除非您停用它們，否則它仍會顯示播放器控制元件。我在上面的例子中新增了一個新影象。

高階

高階視訊設定包括HTML錨點和其他CSS類。

• HTML錨點– 允許您指定用作此特定區塊的自定義URL的文字。
• 附加CSS類– 提供一個欄位來新增要用於此區塊的任何CSS類。

有效使用視訊區塊的提示和最佳實踐

如果您要嵌入來自YouTube或Vimeo等來源的視訊，請使用它們的區塊而不是視訊區塊。

壓縮視訊並減少其大小和載入時間。

使用線上字幕生成器或類似應用程式建立 .vtt 軌道。

如果您想提高頁面速度，請將預載入設定為無。自動下載的數量會影響您的頁面載入速度。

使用左右寬度選項在視訊周圍放置文字，使其在視覺上看起來很有趣。使用寬和全寬選項來強調視訊。

不要使用視訊影象的第一幀，而是建立您想要點選的特色影象。

關於視訊區塊的常見問題

這個區塊的目的是什麼？

此區塊使您可以輕鬆地在您的網站上託管視訊，並讓您控制播放器的工作方式。

視訊區塊和視訊嵌入區塊有什麼區別？

來自YouTube和Vimeo等來源的嵌入視訊無法讓您控制播放器的功能。

使用此區塊的最佳方法是什麼？

使用迴圈自動播放並刪除產品演示和簡短教程剪輯的播放器控制元件。對於較長的視訊，請禁用自動播放並保持啟用控制元件。

小結

這就是我們對WordPress視訊區塊的看法。我喜歡它提供的控制水平。左右對齊特別適合周圍的內容，寬寬度是吸引人們注意視訊的好方法。新增海報圖片可以吸引使用者的注意力。此區塊是產品演示、教程、音樂等的絕佳選擇。