lovecoding
/
W260426


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <!-- 音频标签 -->
     <!-- controls 控制条属性 如果没有当前属性页面无法显示播放器 -->
    <audio src="./media/song.mp3" ></audio> 
    <button id="btnPlay">播放</button>
    <button id="btnPause">暂停</button>
    <button id="btnVolume">
        调整音量
    </button>

    <!-- 视频标签 -->
     <!-- controls 控制条属性 如果没有当前属性页面无法显示播放器 -->
    <video src="./media/media.mp4" ></video>

    <script>
        // 获取元素
        var audio = document.querySelector("audio");
        var btnPlay = document.querySelector("#btnPlay");
        var btnPause = document.querySelector("#btnPause");
        var btnVolume = document.querySelector("#btnVolume");
        var video = document.querySelector("video");
        // 播放 play()
        btnPlay.onclick = function(){
            // audio.play();
            video.play();
        }
        // 暂停 pause()
        btnPause.onclick = function(){
            // audio.pause();
            video.pause();
        }
        // 调整音量
        btnVolume.onclick = function(){
            // audio.volume = 0.1;
            video.volume = 0.1;
        }
        
    </script>
</body>
</html>