lovecoding
/
VIP26


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!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 显示控制面板
            3.loop 循环播放
            4.dom.currentTime 获取当前播放的时间 (以秒计)
            5.playbackRate	
            设置或返回音频/视频播放的速度
            注意：
                1. 设置播放的速度,1--16最大16倍速;
            6.dom.duration 总时长秒数
            7.dom.ended	返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
            8.muted	设置或返回音频/视频是否静音
            9.paused返回音频/视频是否暂停 暂停 true 播放 false
            10.volume设置或返回音频/视频的音量 0~1

        方法：
            1.load()	重新加载音频/视频元素
            2.play()	开始播放音频/视频
            3.pause()	暂停当前播放的音频/视频
        事件：
        canplaythrough	音频/视频缓冲完成 当资源加载完毕 再触发这个事件          
        timeupdate	(播放进度改变的时候触发);  正在播放的事件
        ended	     当目前的播放列表已结束时 当播放结束的是
    -->
    <video src="../222.mp4" controls></video>
    <audio src="../周杰伦-花海.mp3" controls="controls"></audio>
    <button class="btn1">播放</button>
    <button class="btn2">暂停</button>
    <button class="btn3">重新加载</button>
    <script>
        var audio1 = document.querySelector("audio");
        var btn1 = document.querySelector(".btn1");
        var btn2 = document.querySelector(".btn2");
        var btn3 = document.querySelector(".btn3");
        audio1.addEventListener("canplaythrough",function() {
            console.log("加载完成");
        })
        audio1.addEventListener("timeupdate",function() {
            console.log("播放");
        })
        audio1.addEventListener("ended",function() {
            console.log("结束");
        })
        // console.log(audio1);
        // setInterval(function(){
            
        // console.log(audio1.paused)
        //     // console.log(audio1.ended)
        // },1000)
        // audio1.playbackRate =2;
        // audio1.volume = 0.8;
        btn1.onclick = function() {
            audio1.play();
        }
        btn2.onclick = function() {
            audio1.pause();
        }
        btn3.onclick = function() {
            audio1.load();
        }
    </script>
</body>
</html>