使用 HTML、CSS 和 JavaScript 构建自定义视频播放器

在本文中，我们将一起探索如何使用 HTML、CSS 和 JavaScript 来实现一个自定义视频播放器。我们将利用 HTML 来搭建项目的基础结构，使用 CSS 进行界面设计，并通过 JavaScript 为其赋予所需的各种功能。

最终输出预览：

让我们先来看一下最终的成品是什么样子的：

!Screenshot-2023-10-20-170418

视频播放器的前置知识

在开始之前，我们需要对以下技术有基本的了解：

• HTML
• CSS
• JavaScript

构建视频播放器的思路

• HTML 结构搭建：首先，使用 HTML 创建项目的基本骨架。这包括创建各种
  标签，添加播放/暂停、快进/快退、静音等控制按钮以及音量滑块。此外，还需要创建一个带有视频源的
• CSS 样式设计：利用类（class）和元素选择器，通过 CSS 为我们搭建好的结构添加样式，使其美观。
• JavaScript 功能实现：

– 为每一个按钮（如播放

取消静音、音量控制）添加相应的交互逻辑。

– 添加鼠标移入/移出时显示或隐藏控制栏的功能。

示例：

让我们在相应的文件中编写以下代码：

• script.js: 该文件实现了自定义视频播放器的所有核心功能。
• style.css: 该文件包含了自定义视频播放器的所有样式代码。
• index.html: 该文件包含了视频播放器的基础结构。

HTML


“

<meta name="viewport"

content="width=device-width,

initial-scale=1.0">

<link rel="stylesheet"

href=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<link rel="stylesheet"

href="style.css">

`

            CSS

    `

/ Style.css /

• {

margin: 0;

padding: 0;

}

body {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

flex-direction: column;

border: none;

}

.gfg {

padding-bottom: 10px;

display: flex;

justify-content: space-around;

flex-direction: column;

font-size: 24px;

font-weight: 600;

color: #01940b;

align-items: center;

}

.video-container {

max-width: 500px;

max-height: 300px;

position: relative;

border: 1px;

border-style: ridge;

margin: 0 auto;

background-color: black;

}

#video-thumbnail {

position: absolute;

width: 100%;

height: 100%;

object-fit: cover;

cursor: pointer;

}

#video,

img {

width: 100%;

height: 100%;

}

.controls {

position: absolute;

bottom: 0px;

left: 0;

right: