HTML中的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>    
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

注意：<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>