更快的YouTube嵌入JavaScript

>加快YouTube嵌入使用JavaScript：綜合指南

>

鍵突出顯示：

通過使用JavaScript替換標準YouTube嵌入使用輕量級縮略圖預覽，

大大減少了初始頁面加載時間。
使用html5數據屬性進行自定義的YouTube視頻嵌入以控制自動播放，品牌和控件。
• >通過利用各種YouTube縮略圖質量選項來優化視覺吸引力，而無需犧牲負載速度。
>使用純JavaScript（用於精益，無依賴性方法）或jQuery（對於更簡單的編碼和更廣泛的瀏覽器兼容性）。
>網站速度至關重要。 帶有最小請求的輕量級內容對於積極的用戶體驗至關重要。 但是，視頻對於參與內容至關重要，通常來自YouTube等第三方提供商。 挑戰？ 視頻大大增加了頁面加載時間。 一個嵌入式視頻可以生成多個HTTP請求並消耗大量的帶寬，即使觀眾沒有積極觀看。
• >本文提出了一種緩解此問題的解決方案，靈感來自阿米特·阿加瓦爾（Amit Agarwal）的2013年方法，但通過現代技術增強。 我們將大大減少YouTube視頻的初始負載大小。
>

解決方案：

>核心想法是最初顯示縮略圖預覽，而不是完整的視頻播放器。 僅當用戶點擊播放時，JavaScript將用實際播放器動態替代縮略圖。 這大大減少了初始頁面加載大小。 縮略圖是一個較小的圖像，很快加載。

增強：

這個改進的版本利用了香草JavaScript和jQuery實現。 它還引入了一個新功能：通過HTML5數據屬性自定義YouTube視頻參數的能力。 這提供了對播放器設置的細粒度控制，包括：

：（ 0或1）隱藏或顯示播放器控件。

>

：（ 0或1）刪除YouTube徽標。

• ：（ 0或1）播放後禁用相關的視頻建議。 controls
• ：（ 0或1）隱藏視頻標題和上傳器信息。 modestbranding
：（秒）在特定時間開始播放。
• > rel
：（例如，HD720）設置視頻質量（如果有）。
• showinfo播放視頻時，會自動添加等參數（立即開始播放）和
（在不活動時隱藏控件）。
• start> YouTube縮略圖選項：

• YouTube提供了可通過以下網址訪問的幾個縮略圖大小，例如：https://img.youtube.com/vi/<video-id>/<thumbnail-size>.jpg</thumbnail-size></video-id>（或使用i.ytimg.com>作為較短的替代方案）。 選項包括：

  • default.jpg（120x90）
  • hqdefault.jpg（480x360）
  • mqdefault.jpg（320x180）
  • sddefault.jpg（640x480）
  • （1280x720）maxresdefault.jpg

  實現：

  html：> html設置YouTube視頻ID，尺寸和（（可選的）自定義參數：>

  > css：

  <code class="language-html"><div class="youtube" id="fsrJWUVoXeM" style="width: 500px; height: 281px;"></div>
  <div class="youtube" id="lR4tJr7sMPM" data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720" style="width: 640px; height: 360px;"></div></code>

  > CSS樣式的縮略圖，將其居中並添加一個播放圖標（使用數據URI提高效率）：

  （JavaScript和JQuery實現是簡短的，但在原始文章中可用。）

  <code class="language-css">.youtube { /* ... CSS styles ... */ }
  .youtube .play { /* ... CSS styles ... */ }</code>

  結果和結論： 實施此解決方案可顯著改善頁面加載時間。 現實世界測試顯示HTTP請求和頁面大小的大幅減少，從而導致加載時間更快。 該代碼可在Codepen上獲得實驗和改進。 這種簡單的代碼更改可提高性能，使其成為使用嵌入式YouTube視頻的任何網站的寶貴補充。

以上是更快的YouTube嵌入JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！