實現視頻音頻基本功能
阿新 • • 發佈：2018-10-14
spa javascrip href doc camera .get 暫停 col title
<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>
實現視頻音頻基本功能