html5 video视频进度条的实现

最新推荐文章于 2024-06-13 19:47:20 发布

呆子小木心

最新推荐文章于 2024-06-13 19:47:20 发布

阅读量5.8k

点赞数 6

分类专栏： JS html css 文章标签： js html css

本文链接：https://blog.csdn.net/cc6_66/article/details/110133973

版权

JS 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

5 篇文章 1 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

html5 video视频进度条的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.css">
    
    <!-- <script src="./jquery-3.5.1.js"></script> -->
    <script>
        // jQuery实现
        // $(function(){
        //     var video = $("video")[0];
        //     $("button").click(function(){
        //         if($(this).text()==="播放"){
        //             video.play();
        //         }

        //         if($(this).text()==="暂停"){
        //              video.pause();
        //         }

        //         if($(this).text()==="前进"){
        //             video.currentTime += 5;
        //         }

        //         if($(this).text()==="后退"){
        //             video.currentTime -= 5;
        //         }
        //     })
        // })
        
        // 原生js实现
          window.onload = function(){
            // 视频
              var video = document.getElementsByTagName("video")[0];
              var progressTimer = document.querySelector('.progress_timer');
              var durationTimer = document.querySelector('.duration_timer');
              var progress = document.querySelector('.progress');
            //   console.log(video);
            let {totalT,presentT} = {totalT:0,presentT:0}
            //获取视频总时间
            video.addEventListener('canplay',function(){
                totalT = this.duration;
                var videoDuration = formatTime(totalT);
                durationTimer.innerHTML = videoDuration;
            })
            //获取视频当前播放的时间
            video.addEventListener('timeupdate',function(){
                presentT = this.currentTime;
                var videoCurrent = formatTime(presentT);
                progressTimer.innerHTML = videoCurrent;
                // 进度条
                var percent = presentT/totalT*100;
                progress.style.width = percent+'%';
            })
            function formatTime(t){
                var h = parseInt(t/3600);
                h = h<10?'0'+h:h;
                var m = parseInt(t%3600/60);
                m = m<10?'0'+m:m;
                var s = parseInt(t%60);
                s = s<10?'0'+s:s;
                return h+':'+m+':'+s;
            }
            // console.log(video.currentTime);
            // 播放
              document.getElementById("one").onclick = function(){
                      video.play();
              }
            // 暂停
              document.getElementById("two").onclick = function(){
                  video.pause();
              }
            // 快进
              document.getElementById("three").onclick = function(){
                  video.currentTime += 1/25;
                  console.log(video.currentTime);
              }
            // 后退
              document.getElementById("four").onclick = function(){
                  video.currentTime -= 1/25; 
              }

             // 音频
              var audio = document.getElementsByTagName("audio")[0];
              console.log(audio);
            //   播放
              document.getElementById("five").onclick = function(){
                audio.play();
              }
            // 暂停
              document.getElementById("six").onclick = function(){
                  audio.pause();
              }
            // 快进
              document.getElementById("seven").onclick = function(){
                  audio.currentTime += 5;
              }
            // 后退
              document.getElementById("eight").onclick = function(){
                  audio.currentTime -= 5; 
              }
          }
    </script>
</head>
<body>
    <div class="wrap">
        <div class="content">
            <div class="player">
                <video src="./mv/1.mp4"></video>
                <div class="control">
                    <div>
                        <span class="progress"></span>
                    </div>
                    <div class="timer">
                        <span class="progress_timer">00:00:00</span>/
                        <span class="duration_timer">00:00:00</span>
                    </div>
                </div>
            </div>
        </div>
        <button id="one">播放</button>
        <button id="two">暂停</button>
        <button id="three">快进</button>
        <button id="four">后退</button>
    </div>      

    
    
    <audio src="./mv/周杰伦 - 青花瓷.mp3" controls></audio>
    <br>
    <button id="five">播放</button>
    <button id="six">暂停</button>
    <button id="seven">快进</button>
    <button id="eight">后退</button>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
}
.player{
    width: 720px;
    height: 400px;
    margin: 0 auto;
    position: relative;

}
.player video{
    width: 500px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}
.player .control{
    position: absolute;
    background: rgb(33, 177, 221);
    width: 600px;
    height: 40px;
    border-radius: 5px;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
}
.player .control div{
    display: inline-block;
    line-height: 40px;
    margin-left: 15px;
    font-size: 18px;
    color: rgb(15, 14, 14);
}
.player .control .play_pause,.player .control .expand{
    color: rgb(255,255,0);
}
.player .control div:nth-child(1){
    width: 460px;
    height: 10px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 5px;
    overflow: hidden;
}
.player .control .progress{
    display: block;
    width: 0%;
    height: 10px;
    background: #fff;
}
.player .control .timer{
    font-size: 12px;
}
#one,#two,#three,#four{
    position: relative;
    left: 200px;
    margin: 20px;
}

呆子小木心

关注

6
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
html5 video视频进度条的实现

html5 video视频进度条的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频</title> <link rel="stylesheet"
复制链接

扫一扫

专栏目录