播放器隐藏点击按钮实现播放

最新推荐文章于 2024-06-14 16:04:17 发布

Y_MO_W

最新推荐文章于 2024-06-14 16:04:17 发布

阅读量1.5k

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/Y_MO_W/article/details/106957793

版权

本文介绍了一种在网页中实现点击播放的方法，通过隐藏播放器按钮，利用CSS和HTML创建样式，然后结合JavaScript处理点击事件来启动播放功能。主要涉及的技术包括CSS、HTML和JavaScript。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击播放

分析：一般页面不会出现播放器，都是嵌套的图片背景等，那么要如何实现好看的播放事件呢，我们可以写一个按钮，把播放器隐藏起来，点击按钮时开始播放，用js来实现点击事件，代码如下：

css+html部分

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            height: 10px;
            width: 400px;
            background: #666;
            margin: 100px;
            overflow: hidden;
            border-radius: 5px;
        }

        .progress {
            border-radius: 5px;
            background: red;
            width: 0%;
            height: 100%;
        }

        .play_btn {
            width: 100px;
            height: 100px;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            background: orangered;
            color: #fff;
            line-height: 100px;
            border-radius: 50%;
            box-shadow: 2px 2px 5px #ccc;
        }
    </style>
</head>

<body>
    <audio id="player" src="./mp3/demo.mp3"></audio>
    <div class="play_btn">播放</div>
    <div id="time"></div>
    <div class="container">
        <div class="progress"></div>
    </div>

js公共部分放在一个文件夹里：

let _ = {
    repairZero(num) {
        num = num.toString()
        return num[1] ? num : ('0' + num)
    },
    makeStr() {
        let code = Array.prototype.shift.call(arguments)
        return Array.prototype.join.call(arguments, code)
    },
    convertSec2Str(total) {
        let min = _.repairZero(Math.floor(total / 60))
        let sec = _.repairZero(Math.floor(total % 60))
        return _.makeStr(':', min, sec)
    }
}

其余部分用的时候引入一下

<script src="/simba.js"></script>
 <script>
 function $(selector) {
            return document.querySelector(selector)
        }

        let progress = $('.progress')
        let player = $('#player')


        $('.play_btn').onclick = function () {
            if (this.innerHTML === '播放') {
                player.play()
                this.innerHTML = '暂停'
            } else {
                player.pause()
                this.innerHTML = '播放'
            }
        }

        let timer = setInterval(() => {//获取播放器的时间和播放的时间
            let str = _.convertSec2Str(player.currentTime) + "/" + _.convertSec2Str(player.duration)
            $('#time').innerHTML = str
            progress.style.width = (player.currentTime * 100 / player.duration) + '%'
        }, 500);