js实现视频的播放、暂停、静音、加速、减速、快进、后退、拖动进度条改变音量、显示视频进度

最新推荐文章于 2024-06-01 11:07:33 发布

php的绯闻女友

最新推荐文章于 2024-06-01 11:07:33 发布

阅读量7.1k

点赞数 5

分类专栏：前端文章标签： html js javascript

本文链接：https://blog.csdn.net/Moxi099/article/details/115250570

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

话不多说，直接上代码

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background-color: white;
            width: 50px;
            height: 30px;
        }
    </style>
</head>

<body>
    <figure style="text-align: center">
        <figcaption style="margin: 10px">DIY视频播放器</figcaption>
        <video id="video" src="fun.mp4" style="width: 500px;">
        <span>您的浏览器不支持video标签，请换个浏览器试一下吧</span>
    </video>
        <div>
            <progress id="progress" value="0" max="100" style="width: 450px"></progress>
            <span id="curTime">00:00</span>/<span id="totalTime">00:00</span>
        </div>
        <div>
            <button id="btn_play" onclick="playV()">播放</button>
            <button id="btn_pause" onclick="pauseV()">暂停</button>
            <button id="btn_muted" onclick="mutedV()">静音</button>
            <button id="btn_fullScreen" onclick="fullScreen()">全屏</button>
            <input type="range" value='1' nae="range" id="btn_volume" min="0" max="1" step='0.1' onmousedown="volumeV()">
            <span id="volumee">100</span>
            <div style="display: inline;position: relative;">
                <button id="btn_go" onclick="goV()">加速</button>
                <ul id="goUl" style="list-style:none;display: none;position: absolute;left: -40px;top:-140px;">
                    <li>1</li>
                    <li>1.5</li>
                    <li>1.75</li>
                    <li>2</li>
                </ul>
            </div>

            <button id="btn_back" onclick="backV()">减速</button>
            <button id="go_five" onclick="goFiveV()">快进5s</button>
            <button id="back_five" onclick="backFiveV()">后退5s</button>
        </div>
    </figure>
    <script type="text/javascript">
        var ele = document.getElementById("video");
        //播放
        function playV() {
            ele.play();
        }

        //暂停
        function pauseV() {
            ele.pause();
        }

        //静音  点击第一次静音再点击关闭静音
        function mutedV() {
            if (ele.muted === true) {
                ele.muted = false;
            } else {
                ele.muted = true;
            }
        }

        //全屏
        function fullScreen() {
            if (ele.mozRequestFullScreen) {
                ele.mozRequestFullScreen(); //火狐浏览器
            } else if (ele.webkitRequestFullscreen) {
                ele.webkitRequestFullscreen(); //谷歌浏览器
            } else if (ele.oRequestFullscreen) {
                ele.oRequestFullscreen(); //opera浏览器
            } else if (ele.msRequestFullscreen) {
                ele.msRequestFullscreen(); //ie浏览器
            } else if (ele.requestFullscreen) {
                ele.requestFullscreen();
            }
        }

        //加速
        function goV() {
            var goUl = document.getElementById("goUl");
            if (goUl.style.display === "inline") {
                goUl.style.display = "none";
            } else {
                goUl.style.display = "inline";
            }

            goUl.onclick = function() {
                var li = document.getElementsByTagName("li");
                for (var i = 0; i < li.length; i++) {
                    (function(x) {
                        li[x].onclick = function() {
                            ele.play(); //调速时直接播放
                            ele.playbackRate = li[x].innerHTML;
                        }
                    })(i);
                }
            }
        }

        //减速
        function backV() {
            ele.play();
            ele.playbackRate = 0.5;
        }

        //快进5秒
        function goFiveV() {
            ele.play();
            ele.currentTime = ele.currentTime + 5;
        }

        //后退5秒
        function backFiveV() {
            if (ele.currentTime != 0) {
                ele.currentTime = ele.currentTime - 5;
            }
        }

        //改变音量
        function volumeV() {
            var btn = document.getElementById("btn_volume");
            var volumee = document.getElementById("volumee");
            btn.onmousemove = function() {
                video.volume = this.value;
                volumee.innerHTML = this.value * 100;
            }
        }

        //获取视频总时间  在视频加载完成后触发该函数
        ele.onloadedmetadata = function() {
            var totalTime = document.getElementById("totalTime");
            var allTime = ele.duration;
            var m = Math.floor(allTime % 3600 / 60);
            var s = Math.floor(allTime % 60);
            m = m >= 10 ? m : '0' + m;
            s = s >= 10 ? s : '0' + s;
            totalTime.innerHTML = m + ':' + s;
        }

        //视频播放位置发生改变时触发该函数
        ele.ontimeupdate = function() {
            var progress = document.getElementById("progress");
            var curTime = document.getElementById("curTime");
            progress.value = 100 * ele.currentTime / ele.duration; ///this.totaltime;
            var time = ele.currentTime;
            var m = Math.floor(time % 3600 / 60);
            var s = Math.floor(time % 60);
            m = m >= 10 ? m : '0' + m;
            s = s >= 10 ? s : '0' + s;
            curTime.innerHTML = m + ':' + s;
        }
    </script>
</body>

</html>

效果：

如果有什么更好的方法，欢迎交流

php的绯闻女友

关注

5
点赞
踩
46

收藏

觉得还不错? 一键收藏
1
评论
js实现视频的播放、暂停、静音、加速、减速、快进、后退、拖动进度条改变音量、显示视频进度

话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> li { background-color: white; width: 50px; height: 3
复制链接

扫一扫

专栏目录