自定义video标签进度条

最新推荐文章于 2024-08-05 11:03:57 发布

dengzhuanhu2252

最新推荐文章于 2024-08-05 11:03:57 发布

阅读量1.1k

点赞数

原文链接：http://www.cnblogs.com/stone-it/p/7347877.html

版权

本文介绍如何自定义HTML5 video元素的进度条，通过CSS和JavaScript实现播放器界面的个性化设计，包括进度条的颜色、样式以及交互功能的增强。

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

<!doctype html>
<html>
    <head>  
        <meta charset="utf-8">
        <title>短视频</title>
        <style lang="en">
            html, body{
                font-family: "微软雅黑";
                margin: 0;
                padding: 0;
            }
            div, video{
                padding: 0;
                margin: 0;
            }
            #videoBox{
                width: 100vw;
                height: 100vh;
                position: relative;
            }
            #videoBox video{
                width: 100%;
                height: 100%;
            }
            #videoBox .controls{
                width: 100%;
                height: 60px;
                position: absolute;
                bottom: 0;
                left: 0;
            }
            #videoBox .controls .bg{