前端萌狼原创播放器的控制条

Posted 萌狼工作室

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端萌狼原创播放器的控制条相关的知识，希望对你有一定的参考价值。

绘制的播放器的控制条这部分，不是很完善

点击查看代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 字体图标库 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3159328_nn2imegqd7.css">
    <!-- <link rel="stylesheet" href="./source/css/font-awesome-4.7.0/css/font-awesome.min.css" /> -->
    <script src="./source/js/jquery.min.js"></script>
    <style>
        .controller 
            /* 边距问题 */
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
            /* 大小问题 */
            width: 100%;
            height: auto;
            /* 边框问题 */
            /* border: 1px solid black; */
            background-color: rgb(34, 200, 255, 0.5);
            /* 边框问题 */
            border-radius: 5px;
            /* 其他美化 */
            box-shadow: 1px 1px 1px 1px rgb(19, 141, 255, 0.2);

        

        .bar 
            /* 大小 */
            width: 100%;
            height: 0.5em;
            /* 背景 */
            background-color: rgb(34, 200, 255, 0.5);
            /* 边框问题 */
            border-radius: 5px;
            /* 其他美化 */
            box-shadow: 0px 1px 1px 0px rgb(19, 141, 255, 0.2);
        

        .bar .line 
            width: 45%;
            height: 100%;
            background-color: pink;
            border-radius: 5px;
            box-shadow: 1px 0px 1px 0px rgb(19, 141, 255, 0.2);
        

        /* 控制栏 */
        .basep,
        .morep,
        .timer 
            padding-left: 1em;
            box-sizing: border-box;
            height: 1.5em;
            color:snow;
            line-height: 1.5em;   
            display:table-cell;/*尽可能的让元素垂直居中*/
        

        .basep span 
            /* display: block; */
            font-size: 1.25em;

        

        .timer span 
            font-size: 1em;
            
        
    </style>
</head>

<body>
    <div class="controller">
        <!-- 进度条 -->
        <div class="bar">
            <div class="line"></div>
        </div>
        <!-- 功能区 -->
        <div class="power">
            <!-- 播放按钮 -->
            <div class="basep">
                <span id="state" class="iconfont icon-bofang1"></span>
                <span id="restate" class="iconfont icon-zanting1"></span>
            </div>
            <!-- 时间 -->
            <div class="timer">
                <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
            </div>
            <!-- 功能按钮 -->
            <div class="morep">
            </div>
        </div>
    </div>
    </div>

</body>

</html>

以上是关于前端萌狼原创播放器的控制条的主要内容，如果未能解决你的问题，请参考以下文章

看前端如何通过WebAssembly实现播放器预览能力

网页插入SWF视频，如何带有播放控制按钮、进度条等！

VUE项目实现音乐播放器------- 设计播放进度条 + 播放控制按钮

java js前端请求后台去获得音频流，然后播放音乐，音乐可以控制进度，显示总时长

[MAUI 项目实战] 手势控制音乐播放器：圆形进度条

如何用JS获取audio标签的已播放时长并控制进度条的width