audio和video元素

前面的话

　　HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是<audio>和<video>，且不被IE8-浏览器支持

 　  以视频文件举例，它包含了音频轨道、视频轨道和其他一些元数据(封面、标题、子标题、字幕等)

HTML元素

　　使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素的情况下显示

<audio>

autoplay         自动播放
controls         显示控件
loop             循环播放
preload          音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
src              要播放的音频的URL        

<audio controls autoplay loop muted src="song.mp3"> 
  <source src="song.mp3" type="audio/mp3" />
</audio>    

　　[注意]<audio>元素不支持播放wma格式的文件

　　<演示框>点击下列相应属性值可进行演示

 

<video>

autoplay            自动播放
controls            显示控件
height         　　　播放器高度
width         　　　 播放器宽度
loop                循环播放
preload             视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
preload="none"     //当页面加载后不载入视频
preload="auto"     //当页面加载后载入整个视频
preload="meta"     //当页面加载后只载入元数据
src                 要播放的视频的URL
poster        　　　 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像    

<video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>

　　<演示框>点击下列相应属性值可进行演示

 

<source>

　　为<video>和<audio>提供媒介资源

media     规定媒体资源的类型(没有浏览器支持)
src     　规定媒体文件的URL
type      规定媒体资源的MIME类型

　　常用类型

　　　　视频 [1]video/ogg [2]video/mp4 [3]video/webm

　　　　音频 [1]audio/ogg [2]audio/mpeg

　　使用<audio>和<video>至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素的情况下显示

<video src="#">
    video player not available.
</video>

<audio src="#">
    audio player not available.
</audio>

　　因为并非所有浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定src属性，而是使用一个或多个<source>元素

<video>
    <source src="video.webm" type="video/webm; codecs='vp8,vorbis'">
    <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'">
    <source src="video.mp4">
    video player not available.
</video>

<audio>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mp3">
    audio player not available.
</audio>

 　　因为并非所有浏览器都支持<audio>和<video>标签，所以更好的解决办法是有备选内容

<audio controls="controls" height="100" width="100">
    <source src="song.mp3" type="audio/mp3" />
    <embed height="100" width="100" src="song.mp3" />
</audio>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.mp4" width="320" height="240" />
  </object>
</video>

 

<track>

　　<track>元素被当作媒体元素—<audio>和<video>的子元素来使用。它允许指定计时字幕（或者基于事件的数据），例如自动处理字幕