原生JS实现视频播放控件

最新推荐文章于 2023-09-06 10:20:19 发布

RoddyLD

最新推荐文章于 2023-09-06 10:20:19 发布

阅读量970

点赞数 2

文章标签： html5

本文链接：https://blog.youkuaiyun.com/RoddyLD/article/details/115449040

版权

这篇博客详细介绍了如何利用原生JavaScript实现一个视频播放控件，包括HTML结构、CSS样式以及JavaScript交互功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码实现结果如下：
在这里插入图片描述
全部代码如下：

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="video_player">
        <video src="cherryMV.mp4">你的浏览器不支持播放该视频</video>
        <div class="menu">
            <div class="play">播放</div>
            <div class="time">00:00/00:00</div>
            <!-- 进度条 -->
            <div class="progress_var">
                <!-- 已播放的进度 -->
                <div></div>
                <!-- 播放的标记点 -->
                <i></i>
                <!-- 音量 -->
            </div>
            <div class="volume">
                <div id="v_down">音量-</div>
                <div id="v_up">音量+</div>
            </div>
            <!-- 倍速 -->
            <div id="speed">
                <select id="speed_choose">
                    <option value="0.5">0.5倍</option>
                    <option value="1.0" selected>1.0倍

最低0.47元/天解锁文章