Video and Audio

1. Audio Audio

audio common attributes and methods

play () playback, PAUSE () pause

volume adjusted volume, provided that from 0-1 , 0 is equivalent to muting, a volume that is a hundred percent

muted mute, to true to mute, false no mute

currentTime, get and set the current playing what position

onplay play event

onpause pause event

Case:

 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 () ==  " Play " ) {
 44 is                  a1.play ()
 45                  btn.innerHTML = " pause " 
46 is              } the else {
 47                  a1.pause ()
 48                  btn.innerHTML = " Play " 
49              }
 50          }
 51 is  
52 is          var interTime = null 
53 is  
54 is          a1.onplay = function (E) {
 55             the console.log (E)
 56 is  
57 is              interTime = the setInterval ( function () {
 58                  // get the current time 
59                  var currentTime = a1.currentTime
 60                  // get the current time percentage of 
61 is                  var NUM = the parseInt ((currentTime / a1.duration ) 100 *) 
62 is                  the console.log (NUM)
 63 is                  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 is              // When paused, clearing event interTime 
72              the clearInterval (interTime)
 73 is          }
 74  
75          Next. the onclick = function () {
 76              a1.src = " IMG / joy.mp3 " 
77              a1.play ()
 78         }
79 
80     </script>
81 </body>
82 </html>

2. Video video