js模拟video视频播放控制栏播放暂停按钮效果代码-html代码-BFW代码库

js模拟video视频播放控制栏播放暂停按钮效果代码

代码语言：html

所属分类：多媒体

代码描述：js模拟video视频播放控制栏播放暂停按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        div {
            position: relative;
        }
        video {
            width: 500px;
            height: 400px;
            background: black;
        }
        #btn {
            position: absolute;
            left: 10px;
            bottom: 20px;
        }
        progress {
            position: absolute;
            bottom: 26px;
            left: 70px;
            width: 168px;
            height: 10px;
            background-color: #d7d7d7;

        }
        /* chrome  显示进度条当前的值的背景颜色 */
        progress::-webkit-progress-value {
            background: #fff;
        }
        b {
            display: none;
            width: 30px;
            height: 20px;
            position: absolute;
            bottom: 45px;
            left: 140px;
            background: #9c8b8b;
            border-radius: 3px;
            font-size: 12px;
            font-weight: 700;
            text-align: center;

        }
    </style>
</head>
<body>
    <div>
        <video id="video" src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4"></video><br>
        <input type="button" value="Play" id="btn">
        <progress id="progress" value="50"></progress>
        <b id="show"></b>
    </div>
    <script>
        window.onload = function() {
            //等页面加载完后进度条的最大值等于视频的时间值
            pro.max = parseInt(video.duration);

        }

        var video = document.getElementById("video");
        var pro = document.getElementById("progress");
        var btn = document.getElementById("btn");
        var show = document.getElementById("show");
        // 获取进度条的设置样式的宽度
        var WIDTH = parseInt(getComputedStyle(pro).width);
        btn.addEventListener("click", play, false); //绑定按钮事件
        // 点击进度条,设置视频的进度
        .........完整代码请登录后点击上方下载按钮下载查看