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".........完整代码请登录后点击上方下载按钮下载查看