如何使用TailwindCSS和JavaScript构建自定义的HTML5视频播放器
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中创建一个项目，打开您的终端并键入以下命令：
yarn create vite
Vite将指导您配置和选择适合您开发环境的工具。
第一步是选择项目名称——您可以自由选择任何喜欢的名称。在本文中，我将使用"html5-video-player"作为项目名称。
终端运行’yarn create vite’命令后的输出
接下来，选择项目框架。本项目将使用纯JavaScript编写，因此选择"Vanilla"，然后在下一个提示中选择"JavaScript"。
输入项目名称后的终端输出
选择’Vanilla’框架后的终端输出
现在，Vite已成功使用所选工具设置了您的环境。现在是时候安装Vite正常运行所需的依赖项了。按照Vite在CLI中提供的说明操作。
在运行下面的命令之前，如果您的项目名称与我的相同，请确保完全按照以下命令。如果您选择了其他名称，只需将我的项目名称替换为您的名称，然后以相同的方式继续。
cd html5-video-player
此命令将导航到项目目录，您的开发环境将驻留在那里。然后，您可以继续安装依赖项。
yarn
安装完成依赖项后，我们继续下一步，即设置Tailwind CSS作为我们的样式工具。此过程与设置Vite类似，非常简单。
打开您的终端，并执行
以下命令：
yarn add -D tailwindcss postcss autoprefixer
这将安装Tailwind CSS，我们的样式工具，以及PostCSS和Autoprefixer。这些工具将帮助Tailwind CSS在您的项目中有效地运行。
接下来的命令涉及设置Tailwind CSS和PostCSS的配置文件。
再次打开您的本地终端，并键入以下命令：
npx tailwindcss init
创建Tailwind CSS配置文件。
如命令消息中所述，将在项目文件夹的根目录生成一个名为tailwind.config.js的文件。该文件将包含用于样式的配置，包括字体、颜色、插件等设置。有关详细信息，请参阅TailwindCSS文档。
打开您的代码编辑器中生成的Tailwind CSS配置文件，并对其进行以下编辑：
/** @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文件后，只需将提供的代码片段复制并粘贴到文件中。
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
接下来，配置您的style.css文件以使用Tailwind CSS默认值。这样可以避免手动设置CSS默认值的繁琐任务。
打开您的代码编辑器中的style.css文件，删除其内容，然后将以下代码片段粘贴到文件中：
@tailwind base;
@tailwind components;
@tailwind utilities;
删除不必要的文件和代码
由Vite生成的文件主要用作添加您自己的文件和有效使用打包器的指南。因此，您可以删除大部分文件，因为它们对于此项目是不必要的。
以下是要从项目中删除的文件：
- counter.js
- javascript.svg
完成后，您可以继续进行本节的下一步，即删除不必要的代码。
打开位于项目根目录的main.js文件，并删除其中的所有代码。
然后，导航到index.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 Playertitle>
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视频播放器了。
要确认您的环境是否已正确设置，请检查以下内容：
- 项目文件和文件夹应该类似于以下结构：
设置完成的项目：Visual Studio Code显示项目结构。
- 打开您的终端并运行以下命令：
yarn dev
这将创建一个开发服务器，您的网页将托管在其中。打开Vite提供的URL。
使用’yarn dev’命令启动Vite开发服务器。
打开链接http://localhost:5173/，您应该看到以下内容：
执行’yarn dev’命令后显示的初始用户界面。
恭喜！您已经成功完成了此部分，设置了您的开发环境，这将使我们能够在构建自定义HTML5视频播放器时有效地工作。
故障排除：如果您发现您的设置不如预期的那样工作，请不要担心。只需删除项目文件夹并重复该过程。您可能错过了一些步骤，或者某些工具可能没有正确安装。此外，请仔细检查您的Tailwind CSS和PostCSS配置文件，确保它们包含如上所示的正确代码。
如何使用Tailwind CSS构建自定义UI
本节涵盖了构建自定义HTML5视频播放器UI所需的所有样式。我们将逐步了解这个过程。
首先，将以下链接标签复制并粘贴到您的HTML头部，放在样式表链接之前：
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
这使我们能够使用Materialize CSS图标，在UI中对我们的按钮进行样式设置是必不可少的。
接下来，让我们专注于在我们的标记中为视频元素添加样式。只需将body元素替换为以下提供的代码片段：
<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"
>
<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元素之后。
<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"
>
<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">
<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>
<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_arrowi
>
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>
<button
id="volume"
class="transition-all duration-100 ease-linear hover:scale-125"
>
<i class="material-icons text-white text-3xl">volume_upi>
button>
div>
div>
div>
此代码片段定义了视频播放器的各种功能控件的布局和行为。它首先设置一个容器div（
在容器内，有一个用于跟踪视频进度的进度条（
在进度条下方是用于各种功能的控制按钮。倒带、播放/暂停和快进按钮在一个灵活的容器内（
- 倒带按钮（）包含一个图标（replay_10），表示倒带十秒。
- 播放/暂停按钮（）包含一个图标（play_arrow），在播放和暂停状态之间切换。
- 快进按钮（）包含一个图标（forward_10），表示快进十秒。
另外，音量按钮（）位于控制按钮右侧。它包含一个音量图标（volume_up）。
总体而言，此代码段将HTML和Tailwind CSS类结合起来，为视频播放器创建了一组功能强大且外观吸引人的控制元素。
最后一步是禁用默认的浏览器功能，我们不希望我们的自定义HTML5视频播放器与浏览器提供的默认样式相冲突或被覆盖。
将以下代码片段复制并粘贴到您的style.css文件中，直接放在Tailwind 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）中，添加以下代码：
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）中，添加以下代码：
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）中，添加以下代码：
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）中，添加以下代码：
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）中，添加以下代码：
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）中，添加以下代码：
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）
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/[email protected]/dist/tailwind.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Custom HTML5 Video Playertitle>
head>
<body class="bg-gray-900 text-white flex items-center justify-center h-screen">
<div class="relative">
<video
id="video"
class="w-full"
src="your-video-path.mp4"
preload="metadata"
>video>
<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"
>
<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">
<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>
<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_arrowi
>
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>
<button
id="volume"
class="transition-all duration-100 ease-linear hover:scale-125"
>
<i class="material-icons text-white text-3xl">volume_upi>
button>
div>
div>
div>
<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:00span> / <span id="duration">0:00span>
div>
<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">fullscreeni>
button>
div>
<script src="main.js">script>
body>
html>
/* 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;
}