如何使用TailwindCSS和JavaScript构建自定义的HTML5视频播放器

晓风晓浪2024-02-20 15:48

HTML5自带了一个原生视频播放器。它在浏览器中配备了简单的用户界面、功能和一些基本的控件。尽管通过浏览器的默认视频播放器的功能完美运行，但用户界面并不那么美观和时尚，总体上并不令人满意。

因此，大多数现代Web应用程序和平台，如Udemy、Netflix、YouTube和Amazon Prime，不会将默认内置的HTML5视频播放器提供给他们的用户。相反，他们会构建自己定制的版本，具有时尚的用户界面，使其平台更具吸引力和用户友好性。

如果你曾经好奇这些公司和Web平台是如何完成这样的壮举的，那么本文就是为你而写的。

在按照逐步指南进行操作时，您将获得一些实践经验，该指南将教您如何构建和自定义自己的HTML5视频播放器。您将学习如何自定义用户界面、扩展功能，并构建自己的出色的自定义控件和功能。

您还将学习如何仅使用浏览器中提供的原生Video API来构建所有这些功能------无需外部库或工具。

（本文内容参考：java567.com）

先决条件

  • HTML5和CSS的基本知识
  • Tailwind CSS的基本知识
  • JavaScript的基本知识（ES6）
  • 您选择的代码编辑器
  • 支持JavaScript现代功能的浏览器（例如Chrome或Mozilla Firefox）

入门

在本文中，我们将使用Tailwind CSS作为样式工具来构建自定义视频播放器UI。我们还将使用JavaScript来构建控件的功能。

请注意，使用Tailwind CSS是可选的，因为任何样式工具都可以在这里使用，如SCSS、CSS、styled-components等------完全取决于您。

我将本教程分为不同的部分，每个部分都涉及自定义视频播放器功能的特定方面。每个新部分都将在前面的基础上构建，以完成播放器。在本文结束时，您将拥有一个完全功能的HTML5自定义视频播放器。

在本教程中，我们将集中讨论视频播放器的特定功能。这些功能将为您提供构建其他功能的机会和思路。我们将涵盖的功能有：

  • 播放和暂停
  • 快退和快进
  • 静音和取消静音
  • 视频搜索
  • 键盘导航（利用空格键进行播放和暂停，箭头键进行快退和快进）。

我们不会在此处讨论响应式设计，因为我们不会专注于制作视频播放器移动响应式。这种省略应该为您提供挑战和学习机会。

现在，让我们深入了解如何设置开发环境，以便我们可以开始构建。

如何设置开发环境

最初的步骤是设置一个高效的开发环境，以确保平稳的工作流程。我们将使用Vite来实现这一目的。

在继续本节的下一部分之前，请确保您的计算机上已安装了NodeJS和NPM或Yarn，因为它们对于无缝安装工具和设置开发环境是必需的。

如何使用Vite设置项目

要在Vite中创建一个项目，打开您的终端并键入以下命令：

bash 复制代码 
yarn create vite

Vite将指导您配置和选择适合您开发环境的工具。

第一步是选择项目名称------您可以自由选择任何喜欢的名称。在本文中，我将使用"html5-video-player"作为项目名称。

终端运行'yarn create vite'命令后的输出

接下来，选择项目框架。本项目将使用纯JavaScript编写，因此选择"Vanilla"，然后在下一个提示中选择"JavaScript"。

输入项目名称后的终端输出

选择'Vanilla'框架后的终端输出

现在，Vite已成功使用所选工具设置了您的环境。现在是时候安装Vite正常运行所需的依赖项了。按照Vite在CLI中提供的说明操作。

在运行下面的命令之前，如果您的项目名称与我的相同，请确保完全按照以下命令。如果您选择了其他名称，只需将我的项目名称替换为您的名称，然后以相同的方式继续。

bash 复制代码 
cd html5-video-player

此命令将导航到项目目录，您的开发环境将驻留在那里。然后，您可以继续安装依赖项。

bash 复制代码 
yarn

安装完成依赖项后，我们继续下一步，即设置Tailwind CSS作为我们的样式工具。此过程与设置Vite类似，非常简单。

打开您的终端，并执行

以下命令：

bash 复制代码 
yarn add -D tailwindcss postcss autoprefixer

这将安装Tailwind CSS，我们的样式工具，以及PostCSS和Autoprefixer。这些工具将帮助Tailwind CSS在您的项目中有效地运行。

接下来的命令涉及设置Tailwind CSS和PostCSS的配置文件。

再次打开您的本地终端，并键入以下命令：

bash 复制代码 
npx tailwindcss init

创建Tailwind CSS配置文件。

如命令消息中所述，将在项目文件夹的根目录生成一个名为tailwind.config.js的文件。该文件将包含用于样式的配置，包括字体、颜色、插件等设置。有关详细信息，请参阅TailwindCSS文档。

打开您的代码编辑器中生成的Tailwind CSS配置文件，并对其进行以下编辑：

js 复制代码 
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

在这里，我们简单地编辑了content键，以指定TailwindCSS应读取Tailwind CSS类的文件。这个文件恰好是index.html文件，我们将在其中进行主要工作。

接下来，您需要配置PostCSS，它没有像TailwindCSS那样的自动化设置命令。因此，您需要手动创建配置文件。导航到项目的根目录，创建一个名为postcss.config.js的文件。

创建postcss.config.js文件后，只需将提供的代码片段复制并粘贴到文件中。

js 复制代码 
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

接下来，配置您的style.css文件以使用Tailwind CSS默认值。这样可以避免手动设置CSS默认值的繁琐任务。

打开您的代码编辑器中的style.css文件，删除其内容，然后将以下代码片段粘贴到文件中：

css 复制代码 
@tailwind base;
@tailwind components;
@tailwind utilities;

删除不必要的文件和代码

由Vite生成的文件主要用作添加您自己的文件和有效使用打包器的指南。因此，您可以删除大部分文件，因为它们对于此项目是不必要的。

以下是要从项目中删除的文件：

  1. counter.js
  2. javascript.svg

完成后，您可以继续进行本节的下一步，即删除不必要的代码。

打开位于项目根目录的main.js文件，并删除其中的所有代码。

然后，导航到index.html文件，并删除其当前的所有内容。之后，将以下代码片段复制并粘贴到文件中：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>HTML5 Custom Video Player</title>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline text-red-800">Hello world!</h1>
    <script type="module" src="/main.js"></script>
  </body>
</html>

至此，您已经完成了此部分！您的开发环境现在已设置好，可以开始构建您的自定义HTML5视频播放器了。

要确认您的环境是否已正确设置，请检查以下内容：

  1. 项目文件和文件夹应该类似于以下结构：

设置完成的项目：Visual Studio Code显示项目结构。

  1. 打开您的终端并运行以下命令：
bash 复制代码 
yarn dev

这将创建一个开发服务器，您的网页将托管在其中。打开Vite提供的URL。

使用'yarn dev'命令启动Vite开发服务器。

打开链接http://localhost:5173/，您应该看到以下内容：

执行'yarn dev'命令后显示的初始用户界面。

恭喜！您已经成功完成了此部分，设置了您的开发环境，这将使我们能够在构建自定义HTML5视频播放器时有效地工作。

故障排除：如果您发现您的设置不如预期的那样工作，请不要担心。只需删除项目文件夹并重复该过程。您可能错过了一些步骤，或者某些工具可能没有正确安装。此外，请仔细检查您的Tailwind CSS和PostCSS配置文件，确保它们包含如上所示的正确代码。

如何使用Tailwind CSS构建自定义UI

本节涵盖了构建自定义HTML5视频播放器UI所需的所有样式。我们将逐步了解这个过程。

首先，将以下链接标签复制并粘贴到您的HTML头部，放在样式表链接之前：

css 复制代码 
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

这使我们能够使用Materialize CSS图标，在UI中对我们的按钮进行样式设置是必不可少的。

接下来，让我们专注于在我们的标记中为视频元素添加样式。只需将body元素替换为以下提供的代码片段：

html 复制代码 
<body class="bg-indigo-950 p-10">
  <div
    id="container"
    class="w-4/5 h-4/5 mx-auto rounded-lg overflow-hidden relative group"
  >
    <!-- VIDEO -->
    <figure>
      <video class="w-full">
        <source src="/your-video.mp4" />
      </video>
    </figure>
  </div>
  <script type="module" src="/main.js"></script>
</body>

提供的代码片段包括用于视频元素的标记和样式，以及作为整个视频播放器UI容器的外部div。视频元素嵌套在figure元素内。

对于source元素，请指

定要播放的视频的路径。您可以在线查找视频，下载它们，并将它们添加到项目文件夹中的"public"目录中。然后，将source元素的src属性链接到视频文件。您可以在此处找到可下载的免费视频。

接下来，让我们使用您在HTML中链接的Materialize CSS图标来为控件添加样式。将以下代码片段放置在body元素内figure元素之后。

html 复制代码 
<!-- CONTROLS -->
<div
  id="controls"
  class="opacity-0 p-5 absolute bottom-0 left-0 w-full transition-opacity duration-300 ease-linear group-hover:opacity-100"
>
  <!-- PROGRESS BAR -->
  <div id="progress-bar" class="h-1 w-full bg-white cursor-pointer mb-4">
    <div
      id="progress-indicator"
      class="h-full w-9 bg-indigo-800 transition-all duration-500 ease-in-out"
    ></div>
  </div>
  <div class="flex items-center justify-between">
    <div class="flex items-center justify-between">
      <!-- REWIND BUTTON -->
      <button
        id="rewind"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl w-12">replay_10 </i>
      </button>

      <!-- PLAY BUTTON -->
      <button
        id="play-pause"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-5xl inline-block w-12"
          >play_arrow</i
        >
      </button>

      <!-- FAST FORWARD BUTTON -->
      <button
        id="fast-forward"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl w-12">forward_10 </i>
      </button>
    </div>

    <div>
      <!-- VOLUME BUTTON -->
      <button
        id="volume"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl">volume_up</i>
      </button>
    </div>
  </div>
</div>

此代码片段定义了视频播放器的各种功能控件的布局和行为。它首先设置一个容器div（
），其中包含所有控制元素。容器最初是不可见的（opacity-0），当用户悬停在上面时（group-hover:opacity-100）会以平滑的过渡（transition-opacity duration-300 ease-linear）变为可见。

在容器内，有一个用于跟踪视频进度的进度条（
）。它由一个白色背景条（bg-white）和一个颜色为靛蓝色（bg-indigo-800）的可移动指示器（
）组成。进度条是响应式的，允许用户跳转到视频的不同部分。

在进度条下方是用于各种功能的控制按钮。倒带、播放/暂停和快进按钮在一个灵活的容器内（
）。每个按钮（）在悬停时都会略微放大（hover:scale-125）。

  • 倒带按钮（）包含一个图标（replay_10），表示倒带十秒。
  • 播放/暂停按钮（）包含一个图标（play_arrow），在播放和暂停状态之间切换。
  • 快进按钮（）包含一个图标（forward_10），表示快进十秒。

另外，音量按钮（）位于控制按钮右侧。它包含一个音量图标（volume_up）。

总体而言，此代码段将HTML和Tailwind CSS类结合起来，为视频播放器创建了一组功能强大且外观吸引人的控制元素。

最后一步是禁用默认的浏览器功能，我们不希望我们的自定义HTML5视频播放器与浏览器提供的默认样式相冲突或被覆盖。

将以下代码片段复制并粘贴到您的style.css文件中，直接放在Tailwind CSS

类之后：

css 复制代码 
/* DISABLE BROWSER DEFAULTS */
video::-webkit-media-controls {
  display: none !important;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

video::-webkit-media-controls-panel {
  display: none !important;
}

此代码段使用CSS选择器和!important关键字，禁用了所有浏览器默认的视频控件。这样，我们就可以完全控制视频播放器的外观和行为。

现在，我们已经完成了自定义UI的设置。在下一节中，我们将添加JavaScript功能，使我们的播放器可以播放视频并与用户进行交互。

如何实现播放和暂停功能

在本节中，我们将为我们的HTML5视频播放器添加播放和暂停功能。这将使用户能够在单击播放按钮时开始播放视频，然后在再次单击时暂停视频。

首先，让我们回顾一下我们的HTML和CSS。播放和暂停按钮的功能是由play-pause按钮控制的。因此，我们将在该按钮上添加一个事件监听器，以便在用户单击时执行相应的操作。

在我们的JavaScript文件（main.js）中，添加以下代码：

javascript 复制代码 
const video = document.querySelector('video');
const playPauseButton = document.getElementById('play-pause');

function togglePlayPause() {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}

playPauseButton.addEventListener('click', togglePlayPause);

在这段代码中，我们首先获取视频元素和播放/暂停按钮的引用。然后，我们定义了一个名为togglePlayPause的函数，它用于切换视频的播放状态。如果视频当前是暂停状态（video.paused为true），则调用video.play()方法开始播放视频。如果视频当前正在播放，则调用video.pause()方法暂停视频。

最后，我们使用addEventListener方法将togglePlayPause函数附加到playPauseButton按钮的click事件上。这意味着每次用户单击播放/暂停按钮时，都会触发togglePlayPause函数，从而切换视频的播放状态。

现在，如果您在浏览器中加载并运行您的应用程序，您应该能够通过单击播放/暂停按钮来控制视频的播放和暂停。

接下来，我们将添加快退和快进功能，以便用户可以在视频中向前和向后移动固定的时间间隔。

如何实现快退和快进功能

在本节中，我们将为我们的HTML5视频播放器添加快退和快进功能。这将允许用户在视频中向前和向后移动固定的时间间隔，例如10秒。

与播放/暂停按钮一样，快退和快进功能也将在它们各自的按钮上添加事件监听器。当用户单击这些按钮时，视频将向前或向后移动固定的时间量。

在我们的JavaScript文件（main.js）中，添加以下代码：

javascript 复制代码 
const rewindButton = document.getElementById('rewind');
const fastForwardButton = document.getElementById('fast-forward');

function rewind() {
  video.currentTime -= 10;
}

function fastForward() {
  video.currentTime += 10;
}

rewindButton.addEventListener('click', rewind);
fastForwardButton.addEventListener('click', fastForward);

在这段代码中，我们首先获取快退和快进按钮的引用。然后，我们定义了两个函数：rewind和fastForward。这些函数分别用于将视频时间向后和向前移动10秒。

最后，我们使用addEventListener方法将rewind函数附加到rewindButton按钮的click事件上，并将fastForward函数附加到fastForwardButton按钮的click事件上。这意味着每次用户单击这些按钮时，都会触发相应的函数，从而将视频时间向前或向后移动10秒。

现在，您可以在浏览器中加载并运行您的应用程序，然后尝试单击快退和快进按钮，看看视频时间是否会相应地向前或向后移动。

接下来，我们将添加静音和取消静音功能，以便用户可以在视频中启用或禁用声音。

如何实现静音和取消静音功能

在本节中，我们将为我们的HTML5视频播放器添加静音和取消静音功能。这将允许用户在视频中启用或禁用声音。

与播放/暂停按钮和快退/快进按钮一样，静音和取消静音功能也将在它们各自的按钮上添加事件监听器。当用户单击这些按钮时，视频的音频将被静音或取消静音。

在我们的JavaScript文件（main.js）中，添加以下代码：

javascript 复制代码 
const volumeButton = document.getElementById('volume');

function toggleMute() {
  if (video.muted) {
    video.muted = false;
  } else {
    video.muted = true;
  }
}

volumeButton.addEventListener('click', toggleMute);

在这段代码中，我们首先获取静音按钮的引用。然后，我们定义了一个名为toggleMute的函数，它用于切换视频的静音状态。如果视频当前是静音状态（video.muted为true），则将video.muted设置为false以取消静音。如果视频当前没有静音，则将video.muted设置为true以启用静音。

最后，我们使用addEventListener方法将toggleMute函数附加到volumeButton按钮的click事件上。这意味着每次用户单击静音按钮时，都会触发toggleMute函数，从而切换视频的静音状态。

现在，您可以在浏览器中加载并运行您的应用程序，然后尝试单击静音按钮，看看视频的声音是否会被静音或取消静音。

接下来，我们将实现更新进度条的功能，以便用户可以通过进度条跟踪视频的播放进度。

如何根据视频进度更新进度条

在本节中，我们将为我们的HTML5视频播放器实现更新进度条的功能。这将允许用户通过进度条跟踪视频的播放进度，并直观地了解视频的播放状态。

为了实现这个功能，我们首先需要知道视频的当前播放时间以及视频的总播放时间。然后，我们可以计算出视频的播放进度，并相应地更新进度条的宽度。

在我们的JavaScript文件（main.js）中，添加以下代码：

javascript 复制代码 
const progressBar = document.getElementById('progress-bar');
const progressIndicator = document.getElementById('progress-indicator');

function updateProgress() {
  const progress = (video.currentTime / video.duration) * 100;
  progressIndicator.style.width = `${progress}%`;
}

video.addEventListener('timeupdate', updateProgress);

progressBar.addEventListener('click', (event) => {
  const x = event.pageX - progressBar.offsetLeft;
  const clickedPosition = (x * progressBar.offsetWidth) / progressBar.clientWidth;
  video.currentTime = (clickedPosition * video.duration) / 100;
});

在这段代码中，我们首先获取了进度条和进度指示器的引用。然后，我们定义了一个名为updateProgress的函数，它用于更新进度条的宽度，以便反映视频的播放进度。我们使用video元素的currentTime属性和duration属性来计算视频的播放进度，然后将进度指示器的宽度相应地设置为百分比值。

接下来，我们使用video元素的timeupdate事件将updateProgress函数附加到video元素上。timeupdate事件在视频的currentTime属性发生变化时触发，因此我们可以通过它来更新进度条。

最后，我们使用addEventListener方法将一个匿名的箭头函数附加到progressBar元素的click事件上。当用户单击进度条时，会触发该事件。我们首先计算出用户单击的位置相对于进度条的位置，然后将视频的当前播放时间设置为与单击位置相对应的值。

现在，您可以在浏览器中加载并运行您的应用程序，然后尝试单击进度条，看看视频是否会跳转到相应的位置。

您的HTML5视频播放器现在具有基本的播放、暂停、快退、快进、静音和取消静音功能，以及更新进度条的功能。这是一个很好的起点，您可以根据需要添加更多功能，例如全屏模式、播放速度控制等。

在接下来的部分中，我们将继续构建我们的HTML5视频播放器，并为它添加更多功能和样式。

如何添加时间显示功能

在本节中，我们将为我们的HTML5视频播放器添加时间显示功能。这将允许用户随时了解视频的当前播放时间和总播放时间。

为了实现这个功能，我们需要格式化视频的当前播放时间和总播放时间，然后将它们显示在UI上。

在我们的JavaScript文件（main.js）中，添加以下代码：

javascript 复制代码 
const timeElapsed = document.getElementById('time-elapsed');
const duration = document.getElementById('duration');

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = Math.floor(time % 60);

  if (seconds < 10) {
    seconds = `0${seconds}`;
  }

  return `${minutes}:${seconds}`;
}

function updateTime() {
  timeElapsed.textContent = formatTime(video.currentTime);
  duration.textContent = formatTime(video.duration);
}

video.addEventListener('timeupdate', updateTime);

在这段代码中，我们首先获取了显示时间的元素的引用。然后，我们定义了一个名为formatTime的函数，它用于格式化时间，以便将其显示为分:秒的形式。我们使用Math.floor函数来舍去小数部分，并使用模运算符来获取秒数的余数。如果秒数小于10，我们还将其前面添加一个0以确保它始终为两位数。

接下来，我们定义了一个名为updateTime的函数，它用于更新时间显示元素的文本内容。我们使用video元素的currentTime属性和duration属性来获取视频的当前播放时间和总播放时间，并将它们传递给formatTime函数以进行格式化。然后，我们将格式化后的时间设置为相应元素的textContent。

最后，我们使用video元素的timeupdate事件将updateTime函数附加到video元素上。这意味着每次视频的currentTime属性发生变化时，都会触发updateTime函数，从而更新时间显示元素的文本内容。

现在，您可以在浏览器中加载并运行您的应用程序，然后播放视频，看看时间显示是否正确更新。

如何添加全屏功能

在本节中，我们将为我们的HTML5视频播放器添加全屏功能。这将允许用户在单击全屏按钮时将视频播放器切换到全屏模式，并在单击退出全屏按钮时将其切换回正常模式。

为了实现这个功能，我们将使用浏览器的Fullscreen API。Fullscreen API是HTML5提供的一组API，用于控制元素的全屏显示状态。

在我们的JavaScript文件（main.js）中，添加以下代码：

javascript 复制代码 
const fullScreenButton = document.getElementById('full-screen');

function toggleFullScreen() {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

fullScreenButton.addEventListener('click', toggleFullScreen);

在这段代码中，我们首先获取了全屏按钮的引用。然后，我们定义了一个名为toggleFullScreen的函数，它用于切换视频播放器的全屏状态。如果当前不处于全屏状态（!document.fullscreenElement为true），则调用video元素的requestFullscreen方法将视频播放器切换到全屏模式。如果当前处于全屏状态，则调用document的exitFullscreen方法将视频播放器切换回正常模式。

最后，我们使用addEventListener方法将toggleFullScreen函数附加到fullScreenButton按钮的click事件

上。这意味着每次用户单击全屏按钮时，都会触发toggleFullScreen函数，从而切换视频播放器的全屏状态。

现在，您可以在浏览器中加载并运行您的应用程序，然后尝试单击全屏按钮，看看视频播放器是否会切换到全屏模式。再次单击按钮时，播放器应该会切换回正常模式。

您的HTML5视频播放器现在具有全屏功能，用户可以在需要时将其切换到全屏模式。

总结

在本教程中，我们创建了一个定制的HTML5视频播放器，并为其添加了一系列功能和样式。我们从创建基本的HTML结构和CSS样式开始，然后使用JavaScript实现了播放、暂停、快退、快进、静音、取消静音、更新进度条、显示时间和全屏功能。

虽然这个视频播放器具有基本的功能，但您可以根据需要对其进行定制和扩展。例如，您可以添加播放速度控制、字幕支持、画中画模式等功能，以提供更好的用户体验。

我希望这个教程对您有所帮助！如果您有任何疑问，请随时询问。祝您编程愉快！

（本文内容参考：java567.com）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  />
  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
  />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
  />
  <link rel="stylesheet" href="style.css" />
  <title>Custom HTML5 Video Player</title>
</head>
<body class="bg-gray-900 text-white flex items-center justify-center h-screen">
  <!-- VIDEO PLAYER -->
  <div class="relative">
    <video
      id="video"
      class="w-full"
      src="your-video-path.mp4"
      preload="metadata"
    ></video>

    <!-- CONTROLS -->
    <div
      id="controls"
      class="opacity-0 p-5 absolute bottom-0 left-0 w-full transition-opacity duration-300 ease-linear group-hover:opacity-100"
    >
      <!-- PROGRESS BAR -->
      <div id="progress-bar" class="h-1 w-full bg-white cursor-pointer mb-4">
        <div
          id="progress-indicator"
          class="h-full w-9 bg-indigo-800 transition-all duration-500 ease-in-out"
        ></div>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center justify-between">
          <!-- REWIND BUTTON -->
          <button
            id="rewind"
            class="transition-all duration-100 ease-linear hover:scale-125"
          >
            <i class="material-icons text-white text-3xl w-12">replay_10 </i>
          </button>

          <!-- PLAY BUTTON -->
          <button
            id="play-pause"
            class="transition-all duration-100 ease-linear hover:scale-125"
          >
            <i class="material-icons text-white text-5xl inline-block w-12"
              >play_arrow</i
            >
          </button>

          <!-- FAST FORWARD BUTTON -->
          <button
            id="fast-forward"
            class="transition-all duration-100 ease-linear hover:scale-125"
          >
            <i class="material-icons text-white text-3xl w-12">forward_10 </i>
          </button>
        </div>

        <div>
          <!-- VOLUME BUTTON -->
          <button
            id="volume"
            class="transition-all duration-100 ease-linear hover:scale-125"
          >
            <i class="material-icons text-white text-3xl">volume_up</i>
          </button>
        </div>
      </div>
    </div>

    <!-- TIME DISPLAY -->
    <div
      id="time-display"
      class="opacity-0 absolute top-0 right-0 m-4 p-2 bg-gray-800 rounded-lg transition-opacity duration-300 ease-linear group-hover:opacity-100"
    >
      <span id="time-elapsed">0:00</span> / <span id="duration">0:00</span>
    </div>

    <!-- FULL SCREEN BUTTON -->
    <button
      id="full-screen"
      class="absolute bottom-0 right-0 m-4 p-2 bg-gray-800 rounded-lg transition-opacity duration-300 ease-linear group-hover:opacity-100"
    >
      <i class="material-icons text-white text-3xl">fullscreen</i>
    </button>
  </div>

  <script src="main.js"></script>
</body>
</html>
css 复制代码 
/* style.css */

/* DISABLE BROWSER DEFAULTS */
video::-webkit-media-controls {
  display: none !important;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

video::-webkit-media-controls-panel {
  display: none !important;
}
相关推荐
1-1=011 分钟前
Vue 3 模板语
前端·javascript·vue.js
风卿29 分钟前
看着AI写代码太孤独了，来欣赏星云吧：一个DSH 装饰插件
前端·javascript
牧艺38 分钟前
弹层不用再手算坐标了：CSS Anchor Positioning 从原理到可上线
前端·javascript·css
愚坤2 小时前
前端真有意思，JS还能独立做项目？
前端·javascript·github
李纲明3 小时前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐？getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
乐橙开放平台3 小时前
海康和大华摄像头能统一管理吗？可以通过 GB28181 或视频融合平台接入
网络·后端·物联网·音视频
FungLeo4 小时前
成为全栈·Vue 管理后台篇·用 fetch 建一层可控的请求内核
前端·javascript·vue.js·http·fetch·formdata·接口封装
用户84298142418105 小时前
ByteJS，让重要的 JavaScript 以字节码运行。
javascript
FungLeo6 小时前
成为全栈·Vue 管理后台篇·Vue Router如何守住多角色后台边界
前端·javascript·vue.js·rbac·vue router·路由守卫·前端权限
FungLeo7 小时前
成为全栈·Vue管理后台篇·仪表盘不是几张卡片：组合统计接口与角色视图
前端·javascript·vue.js·rbac·仪表盘·管理后台·tanstack query
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04几个好用的ip纯净度检测网站05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新06昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战07GitHub 镜像站点08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09苹果iPA游戏软件资源下载网站10Dify：一站式AI应用开发平台全解析与Windows部署指南