原生JS实现视频播放控件

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

RoddyLD

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

阅读量893

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/RoddyLD/article/details/115449040

版权

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

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"

最低0.47元/天解锁文章

RoddyLD

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现视频播放控件

代码实现结果如下：全部代码如下：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 re
复制链接

扫一扫