<head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" /> <style type="text/css"> .camera { color: red; font-size: 42px; } </style> </head> <body> <!--声频--> <audio controls="controls" autoplay="autoplay"> <source src="south Mountain.mp3" type="audio/mp3"></source> <source src="horse.ogg" type="audio/ogg"></source> </audio> <input type="button" name="" id="speed" value="加速" /> <br /> <!--视频--> <video controls="controls" width="400"> <source src="demo.mp4" type="video/mp4"></source> </video> <div class="camera"> <i class="fa fa-camera-retro"></i> <i class="fa fa-free-code-camp"></i> </div> <input type="button" name="" id="play" value="播放" /> <input type="button" name="" id="stop" value="暂停" /> </body> <script type="text/javascript"> var oVideo = document.querySelector("video"); var oAudio = document.querySelector("audio"); console.dir(oVideo); var oSpeed = document.getElementById("speed"); var oPlay = document.getElementById("play"); var oStop = document.getElementById("stop"); //倍速播放 oSpeed.onclick = function() { console.dir(oAudio); oAudio.playbackRate = 3; } //视频播放 oPlay.onclick = function() { oVideo.play(); } //暂停 oStop.onclick = function() { oVideo.pause(); } oVideo.onplay = function() { console.log(this.currentTime); } oVideo.ontimeupdate = function() { console.log(this.currentTime); } </script>