视频和音频
Posted qq2267711589
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了视频和音频相关的知识，希望对你有一定的参考价值。
1.音频Audio
audio常用的属性和方法
play()播放、pause()暂停
volume调节音量，设置的值是从0-1，0就相当于静音，1就是百分百的音量
muted设置静音，true就静音，false不静音
currentTime,获取和设置当前播放到什么位置
onplay播放的事件
onpause暂停事件
案例：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .jdt 8 width: 800px; 9 height: 20px; 10 background-color: #ccc; 11 margin: 0 auto; 12 13 .jd 14 width: 1px; 15 height: 18px; 16 background-color: red; 17 18 19 </style> 20 </head> 21 <body> 22 23 <audio src="img/wyf.mp3" class="a1"></audio> 24 <div class="btn"> 25 播放 26 </div> 27 28 <div class="next">下一曲</div> 29 30 <div class="jdt"> 31 <div class="jd">0%</div> 32 </div> 33 34 <script type="application/javascript"> 35 var a1=document.querySelector(".a1") 36 var btn=document.querySelector(".btn") 37 var next=document.querySelector(".next") 38 var jd=document.querySelector(".jd") 39 40 btn.onclick=function(e) 41 console.log(e) 42 43 if(btn.innerHTML.trim() == "播放") 44 a1.play() 45 btn.innerHTML="暂停" 46 else 47 a1.pause() 48 btn.innerHTML="播放" 49 50 51 52 var interTime=null 53 54 a1.onplay=function(e) 55 console.log(e) 56 57 interTime=setInterval(function() 58 //获取当前时间 59 var currentTime=a1.currentTime 60 //获取当前时间所占百分比 61 var num = parseInt((currentTime/a1.duration)*100) 62 console.log(num) 63 var width=800*num/100 64 jd.style.width=width+"px" 65 jd.innerHTML=num+"%" 66 ,1000) 67 68 69 70 a1.onpause=function() 71 //当暂停时，清除interTime事件 72 clearInterval(interTime) 73 74 75 next.onclick=function() 76 a1.src="img/joy.mp3" 77 a1.play() 78 79 80 </script> 81 </body> 82 </html>
2.视频video
audio常用的属性和方法
play()播放、pause()暂停
volume调节音量，设置的值是从0-1，0就相当于静音，1就是百分百的音量
muted设置静音，true就静音，false不静音
currentTime,获取和设置当前播放到什么位置
onplay播放的事件
onpause暂停事件
案例：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <video src="img/3.mkv" controls="controls" poster="img.12347.jpg" class="video"></video> 10 11 <div class="playbtn"> 12 播放 13 </div> 14 15 <script type="application/javascript"> 16 17 var v1=document.querySelector(".video") 18 var pb=document.querySelector(".playbtn") 19 20 pb.onclick=function(e) 21 console.log(e) 22 23 if(pb.innerHTML.trim() == "播放") 24 v1.play() 25 pb.innerHTML="暂停" 26 else 27 v1.pause() 28 pb.innerHTML="播放" 29 30 31 32 </script> 33 34 </body> 35 </html>
以上是关于视频和音频的主要内容，如果未能解决你的问题，请参考以下文章