第181天：HTML5——视频、音频-优快云博客

本文详细介绍了HTML5中用于多媒体的video和audio标签的使用方法，包括支持的格式、常用属性及事件，并展示了如何利用JavaScript实现自定义播放控件。

一、HTML5新增的video、source标签

1 <video width="320" height="240" controls="controls“ poster="/images/w3school.gif"> 
2       <source src="movie.ogg" type="video/ogg"> 
3       <source src="movie.mp4" type="video/mp4"> 
4       您的浏览器不支持video标签 
5 </video>

二、HTML5支持的视频格式

三、video标签的属性

四、HTML5的音频标签

1 <audio src="好久不见.mp3" autoplay controls>
2          您的浏览器不支持 audio 标签。
3 </audio>

HTML5支持的音频格式 .wav .mp3

五、音频标签的属性

六、浏览器默认播放控件

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4     <script>
 5     window.onload=function  () {
 6          var playbtn=document.getElementById("play");
 7          var video=document.getElementById("video");
 8          playbtn.onclick=function  () {
 9                video.play();
10          }
11     }
12     </script>
13     </head>
14     <body>
15       <video controls=controls  loop =loop poster="1.jpg" id="video">
16         <source src="iceage4.mp4"></source>
17         <source src="iceage4.webm"></source>
18       </video>
19       <input type="button" value="播放" id="play"/>
20       <audio src="fcml.mp3" controls=controls >
21       </audio>
22     </body>
23 </html>