lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- audio:音频 video：视频 
        1. src:视频路径;
        2. controls:显示控件：
                    属性值 ：controls 
        3. 是否循环播放：
                    属性名：loop;
                    属性值：loop;
        4.视频当前播放的时间：
                    dom.currentTime	
                    指示音频/视频播放的当前时间(以秒计);
        5.playbackRate	
            设置或返回音频/视频播放的速度
            注意：
                设置播放的速度,1--16最大16倍速;
        6.dom.duration	
            返回当前音频/视频的长度（以秒计）
        7.ended	
            返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
        8.muted	
            设置或返回音频/视频是否静音 布尔值
        9.paused
            返回音频/视频是否暂停 布尔值
        10.volume
            设置或返回音频/视频的音量

        方法：
            1.load()	重新加载音频/视频元素
            2.play()	开始播放音频/视频
            3.pause()	暂停当前播放的音频/视频
        事件:
            canplaythrough	音频/视频缓冲完成 当资源加载完毕 再触发这个事件          
            timeupdate	(播放进度改变的时候触发);  正在播放的事件
            ended 当目前的播放列表已结束时 当播放结束的是

    -->
    <audio src="./周杰伦-花海.mp3" controls></audio>
    <button id="btn1">加载</button>
    <button id="btn2">播放</button>
    <button id="btn3">暂停</button>
    <!-- <video src="./222.mp4" controls></video> -->
    <script>
        var audios = document.querySelector("audio");
      var btn1 = document.querySelector("#btn1");
      var btn2 = document.querySelector("#btn2");
      var btn3 = document.querySelector("#btn3");
      audios.addEventListener("canplaythrough",function() {
        console.log("加载完成")
      })
      audios.addEventListener("timeupdate",function() {
        console.log("正在播放")
      })
      audios.addEventListener("ended",function() {
        console.log("播放完成")
      })
      btn1.onclick = function() {
        audios.load();
      }
      btn2.onclick = function() {
        audios.play();
      }
      btn3.onclick = function() {
        audios.pause();
      }
      setInterval(() => {
        // console.log(audios.currentTime);
        // console.log(audios.duration);
        // console.log(audios.ended)
        // console.log(audios.paused)
      }, 1000);
    audios.playbackRate = 2;
    // audios.muted = false;
    audios.volume = 1;
    // console.log(audios.duration);
    </script>
  </body>
</html>