用JavaScript写的简单本地视频播放器

Fmm419

已于 2022-01-26 21:30:35 修改

阅读量1.2w

点赞数

文章标签：音视频 javascript 前端

于 2022-01-26 21:25:44 首次发布

本文链接：https://blog.csdn.net/Fmm419/article/details/122708958

版权

播放器只有音量,暂停/播放,上传播放本地文件几个功能

摘要由CSDN通过智能技术生成

此播放器只有音量,暂停/播放,上传播放本地文件几个功能，

如果出了问题可以留言给我或直接到我的个人中心下载

<!DOCTYPE html>
<html lang='zh'>
<head>
    <meta charset='UTF-8'>
    <title>mm</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
            border:none;
        }
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            color:#fff;
            overflow: hidden;
            font-size:1.5em;
        }
        #wrap{
            position:relative;
            overflow:hidden;
            width:100%;
            background-color:rgb(0, 0, 0);
        }
        /* 标题 */
        h3{
            position:absolute;
            top:-40px;
            left:0;
            width:100%;
            height:30px;
            text-align:center;
            line-height:30px;
            font-family:"楷体";
            color:#fff;
            background:rgba(0,0,0,.3);
            transition:0.5s;
        }
        #wrap:hover h3{
            top:0;
        }
        #video{
            width: 100%;
        }
        #video video{
            height:100%;
            display:block;
            margin:0 auto;
        }
        /* 控制台 */
        .controls-wrap{
            position:absolute;
            bottom:-40px;
            left:0;
            width:100%;
            height:40px;
            background-color:rgba(0, 0, 0, .3);
            transition:0.5s;
        }
        #wrap:hover .controls-wrap{
            bottom:0px;
        }
        #controls{
            display:flex;
            justify-content:space-around;
            align-items: center;
        }
        /* 播放按钮 */
        #controls .play{
            width:40px;
            height:40px;
            background:rgba(0, 0, 0, 0);
        }
        /* 音量 */
        #controls .volume{
            position:relative;
            width:40px;
            height:40px;
        }
        /* 音量按钮 */
        #controls .volume .volume-btn{
            display:block;
            width:40px;
            height:40px;
            background-color:rgb(0, 0, 0, 0);
        }
        /* 音量条 */
        #controls .volume .volume-item{
            display:none;
            position:absolute;
            top:-