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

这篇具有很好参考价值的文章主要介绍了如何使用TailwindCSS和JavaScript构建自定义的HTML5视频播放器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

(本文内容参考:java567.com)文章来源地址https://www.toymoban.com/news/detail-834003.html

先决条件

  • 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生成的文件主要用作添加您自己的文件和有效使用打包器的指南。因此,您可以删除大部分文件,因为它们对于此项目是不必要的。

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

  1. counter.js
  2. 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 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. 打开您的终端并运行以下命令:
yarn dev

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

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

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

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

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

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

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

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

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

<link
  href="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"
  >
    <!-- 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元素之后。

<!-- 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

类之后:

/* 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/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>
/* 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;
}

到了这里,关于如何使用TailwindCSS和JavaScript构建自定义的HTML5视频播放器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 推荐前 6 名 JavaScript 和 HTML5 游戏引擎

    推荐:使用 NSDT场景编辑器 助你快速搭建3D应用场景 事实是,自从引入JavaScript WebGL API以来,现代浏览器具有直观的功能,使它们能够渲染更复杂和复杂的2D和3D图形,而无需依赖第三方插件。 你可以用纯粹的JavaScript开始你的网页游戏开发之旅,如果你是初学者,这可能是最

    2024年02月11日
    浏览(46)
  • [HTML]Web前端开发技术26(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 数据类型 数据类型-字符型 数据类型-数值型 数据类型-布尔型 数据类型-其它类型 变量 转义字符 运算

    2024年02月20日
    浏览(64)
  • HTML5 Canvas与JavaScript携手绘制动态星空背景

    目录 一、程序代码 二、代码原理 三、运行效果 这段代码通过 HTML5 的 canvas 元素和 JavaScript 实现了一个星空背景效果。首先,它在页面加载时创建了一个全屏大小的画布,并使用 JavaScript 生成了多个具有不同运动轨道的星星对象。每颗星星都具有随机的半径、位置、运动速度

    2024年02月20日
    浏览(49)
  • HTML5:构建现代、交互式的Web应用

    HTML5作为最新版本的HTML标准,引入了许多令人兴奋的特性和改进,使Web开发更加灵活和强大。本篇博客将围绕HTML5的核心功能展开,包括语义化标签、多媒体支持、表单增强、Canvas绘图、地理定位、本地存储等方面。我们将通过详细的代码示例和实用的技巧,帮助你全面掌握

    2024年02月12日
    浏览(44)
  • 如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器

    WebCenter 中的 HTML5 3D Collada Viewer(自 14.1 以来新增)要求在浏览器中启用 WebGL。较旧的浏览器可能不支持此功能,或者要求用户首先显式启用此功能。本页介绍如何为所有主要浏览器启用此功能。WebGL 3D 查看器 本文是以下超级用户文章的摘要:如何在浏览器中启用 WebGL? 在尝

    2024年02月10日
    浏览(49)
  • 基于html5+javascript技术开发的房贷利率计算器

    房贷计算器是一款专为购房者设计的实用工具应用,其主要功能是帮助用户详细计算房贷的还款金额、利息以及还款计划等。通过这款软件,用户可以更加便捷地了解到自己的还款情况和计划,从而更好地规划自己的财务。下面将对房贷计算器进行详细的介绍。 房贷计算器体

    2024年02月08日
    浏览(44)
  • 基于 HTML5 WebGL 构建智能数字化城市 3D 全景

    前言 自 2011 年我国城镇化率首次突破 50% 以来,《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一,并提出到 2020 年,建成一批特色鲜明的智慧城市。截至现今,全国 95% 的副省级以上城市、76% 的地级以上城市,总计约 500 多个城市提出或在建智慧城市。

    2024年02月21日
    浏览(56)
  • [HTML]Web前端开发技术16(HTML5、CSS3、JavaScript )表格课后练习网页标题:域标签的使用网页标题:美家装饰联系我们网页标题:登录界面网页标题问卷调查——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 表格课后练习 网页标题:域标签的使用 网页标题:美家装饰联系我们 网页标题:登录界面 网页标题

    2024年01月24日
    浏览(44)
  • JavaScript 练手小技巧:HTML5 的 dialog 标签制作对话框

    对话框,在应用中常常用来做 信息提示、特定操作 (如,登录、删除信息等)。 以前创建对话框,需要用 div 标签去模拟,或者使用一些框架、插件,如 artDialog 、 boostrap 等,去创建 对话框 。 如:使用 div 标签去模拟对话框  特定的功能还需要自己编写 JavaScript 代码,详见

    2024年01月20日
    浏览(37)
  • 用HTML5和JavaScript实现黑客帝国风格的字符雨效果

    目录 一、程序代码 二、代码原理 三、运行效果 这段代码实现了一个基于 HTML5 和 JavaScript 的字符雨效果,类似于电影《黑客帝国》中的场景。下面是对代码的解析: 在 HTML 部分: canvas  标签用于绘制字符雨效果。 通过内联样式和 id 属性设置画布的背景色和标识符为 \\\"canv

    2024年02月19日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包