视频和音频

Posted qq2267711589

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了视频和音频相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于视频和音频的主要内容,如果未能解决你的问题,请参考以下文章

ffmpeg图片转视频,图片+音频合成视频每秒一张图

一次用ffmpeg实现图片+音频合成视频的开发

使用ffmpeg从视频文件中提取音频文件视频抽帧和切割视频

mac怎么把视频中的音频提取出来?

Android videoview控件不显示视频,只播放音频

如何实现与视频的共享元素过渡