当前位置：网站首页>多媒体元素，音频、视频

多媒体元素，音频、视频

2022-06-26 02:49:00 【小菜鸟码住】 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多媒体元素</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #music{
            position: fixed;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <!-- 行内元素/块级元素 -->
    <img id="music" src="img/musicBtn.png" alt="">
    <div>
        <audio id="aud" autoplay src="img/img/2.ogg" loop></audio>
        <button id="btn">暂停</button>
    </div>
    <video autoplay src="img/img/1.ogg" controls></video>
    <script>
        var btn = document.getElementById('btn');
        var aud = document.getElementById('aud');
        var music = document.getElementById('music');
        music.onclick = function(){
            if(aud.paused){
                aud.play();
                this.src = 'img/musicBtn.png';
            }else{
                aud.pause();
                this.src = 'img/musicBtnOff.png';
            }
        }
           var flag = true;//设置一个标志；
           btn.onclick = function(){
               if(flag){
                   aud.pause();
                   btn.innerHTML = '开始';
               }else{
                   aud.play();
                   btn.innerHTML = '暂停';
               }
               flag = !flag;
           }
    </script>
</body>
</html>

在这里插入图片描述

原网站

版权声明
本文为[小菜鸟码住]所创，转载请带上原文链接，感谢
https://blog.csdn.net/hfyldx/article/details/102234223

边栏推荐

猜你喜欢

随机推荐