当前位置：网站首页>Multimedia elements, audio, video

Multimedia elements, audio, video

2022-06-26 03:22:00 【Small vegetable bird yard live】 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Multimedia elements </title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #music{
            position: fixed;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <!--  Inline elements / Block-level elements  -->
    <img id="music" src="img/musicBtn.png" alt="">
    <div>
        <audio id="aud" autoplay src="img/img/2.ogg" loop></audio>
        <button id="btn"> Pause </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;// Set a flag ;
           btn.onclick = function(){
               if(flag){
                   aud.pause();
                   btn.innerHTML = ' Start ';
               }else{
                   aud.play();
                   btn.innerHTML = ' Pause ';
               }
               flag = !flag;
           }
    </script>
</body>
</html>

Insert picture description here

原网站

版权声明
本文为[Small vegetable bird yard live]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/177/202206260249288965.html

边栏推荐

猜你喜欢

随机推荐