首页 > 其他 > 详细

视频和音频

时间:2019-06-01 18:47:40      阅读:46      评论:0      收藏:0      [点我收藏+]

1.音频Audio

 

audio常用的属性和方法

 

play()播放、pause()暂停

 

volume调节音量,设置的值是从0-10就相当于静音,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-10就相当于静音,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>

 

视频和音频

原文:https://www.cnblogs.com/qq2267711589/p/10960487.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!