jquery实现--自定义视频播放器

最新推荐文章于 2025-05-09 16:37:25 发布

原创

最新推荐文章于 2025-05-09 16:37:25 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

本文将介绍如何利用jQuery来创建一个功能丰富的自定义视频播放器。通过结合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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div class="vContainer">
        <video id="myVideo">
            <!-- <source src="https://www.youtube.com/watch?v=iOznP_eVSi0"> -->
            <source src="./video/1.mp4" type="video/mp4">
        </video>
        <div class="caption">我自己的播放器</div>
        <div class="control">
            <div class="top">
                <div class="progress">
                    <span class="timeBar"></span>
                </div>
                <div class="time">
                    <span id="currentTime">00:00</span>
                    <span>/</span>
                    <span id="duration">00:00</span>
                </div>
            </div>
            <div class="bottom">
                <div class="button play" id="playBtn"></div>
                <div class="button stop" id="stopBtn"></div>
                <div class="button text selected" id="speed1Btn">x1</div>
                <div class="button text" id="speed3Btn">x3</div>
                <div class="volume">
                    <span class="volumeBar"></span>
                </div>
                <div class="button sound" id="soundBtn">