zoukankan html css js c++ java

视频和音频

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