視頻預載入技巧，提高網站速度和用戶體驗

如今，視頻已經成為網站設計的重要組成部分。然而，視頻文件在載入的過程中會增加網站負擔，降低用戶的體驗。為了提高網站速度和用戶體驗，本文將分享一些視頻預載入技巧，幫助你在視頻載入的時候提高用戶體驗和減輕網站負擔。

一、使用視頻預載入器

視頻預載入器可以在用戶播放視頻之前載入視頻文件。這樣，當用戶點擊播放按鈕時，視頻文件已經完全載入好了，因此將會更快地開始播放。

以下是一個使用VideoJS庫實現的視頻預載入器的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Video Preload Demo</title>
  <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/7.15.4/video.js"></script>
</head>
<body>
  <h2>Video Preload Demo</h2>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="video-poster.jpg" data-setup="{}">
    <source src="video.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
</body>
</html>

在上面的代碼中，preload=”auto”屬性會讓瀏覽器在頁面載入時自動載入視頻。

二、延遲載入視頻

延遲載入視頻可以在一定程度上優化網站性能。使用LazyLoad插件可以實現圖片、視頻、音頻等元素的延遲載入。這意味著這些元素將只在頁面滾動到它們時才會載入，因此並不會影響頁面的初始載入時間。

以下是一個使用LazyLoad實現視頻延遲載入的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Video Lazy Loading Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" integrity="sha512-nihW9pa+J+zLlhWcV+YMxCauqHmpTg5zI03MSLPnMVKEXgWWZ33OcESEU2MEdmCgZmaBwJJa68GYWRPNXOBnaQ==" crossorigin="anonymous"></script>
</head>
<body>
  <h2>Video Lazy Loading Demo</h2>
  <video data-src="video.mp4" class="lazyload"></video>
</body>
</html>

在上面的代碼中，lazyload類會告訴LazyLoad插件對視頻進行延遲載入。video元素的data-src屬性指定了要載入的視頻文件的路徑。

三、使用WebP格式的視頻

WebP是一種由Google開發的基於圖片的格式，可以在與JPEG和PNG相比獲得更高的壓縮率。除了圖片，WebP格式也可以用於視頻壓縮。使用WebP格式的視頻可以大大減小視頻文件的大小，從而加快視頻載入的速度。

以下是一個使用WebP格式的視頻的例子：

<!DOCTYPE html>
<html>
<head>
  <title>WebP Video Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.7.0/dist/gsap.min.js"></script>
</head>
<body>
  <h2>WebP Video Demo</h2>
  <video id="my-video" width="640" height="360" poster="video-poster.jpg">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
  </video>
  <script>
    const video = document.getElementById('my-video');
    const source = video.querySelector('source[src$=".webm"]');
    if (WebP) {
      source.src = "video.webp";
      video.addEventListener('loadedmetadata', () => {
        gsap.to(video, {opacity: 1, duration: 0.5});
      });
    } else {
      source.remove();
      gsap.to(video, {opacity: 1, duration: 0.5});
    }
  </script>
</body>
</html>

在上面的代碼中，如果瀏覽器支持WebP，那麼代碼會載入名為video.webp的視頻文件。否則，代碼將移除webm格式的視頻元素，以便載入mp4格式的視頻。

四、使用預覽圖

預覽圖是指在視頻播放之前展示的圖像。使用預覽圖可以讓用戶更加容易地了解視頻內容，從而提高用戶體驗。

以下是一個使用預覽圖的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Video Preview Demo</title>
</head>
<body>
  <h2>Video Preview Demo</h2>
  <div style="position: relative; display: inline-block;">
    <img src="video-preview.jpg" alt="Video Preview" style="display: block; width: 100%; height: auto;">
    <button style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" onclick="playVideo()">Play</button>
    <video id="my-video" width="640" height="360" preload="metadata" src="video.mp4"></video>
  </div>
  <script>
    function playVideo() {
      const video = document.getElementById('my-video');
      video.play();
    }
  </script>
</body>
</html>

在上面的代碼中，video-preview.jpg是預覽圖的路徑。當用戶點擊Play按鈕時，視頻將開始播放。

五、使用自動播放

自動播放是指在頁面載入時自動播放視頻。雖然自動播放可以提高用戶體驗，但也需要考慮到用戶的帶寬和數據流量。如果用戶的網路速度較慢，自動播放可能會導致視頻卡頓，從而降低用戶體驗。因此，我們需要在使用自動播放功能時進行謹慎考慮。

以下是一個使用自動播放的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Autoplay Video Demo</title>
</head>
<body>
  <h2>Autoplay Video Demo</h2>
  <video autoplay playsinline muted loop width="640" height="360" poster="video-poster.jpg">
    <source src="video.mp4" type="video/mp4">
  </video>
</body>
</html>

在上面的代碼中，autoplay、playsinline和muted屬性會讓視頻在頁面載入完畢時自動播放，並且不會有聲音。另外，loop屬性會讓視頻循環播放。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/246719.html