<video>标签
在HTML5中,使用video标签来显示视频:
<video src="myVideo.mp4" controls>
<p>您的浏览器不支持H5视频。 请点击 <a href="myVideo.mp4">视频链接</a> 。</p>
</video>
可以看到,跟img标签类似,在video标签中使用src属性来指定视频路径(mp4或webm格式),其中controls属性表示视频的下边控制栏,p标签定义了浏览器不支持H5视频情况下显示的备选文本。
但是,由于不同浏览器对于视频格式支持力度不一,可能需要准备多种格式类型来应对多浏览器兼容的问题,因此可以使用以下方式:
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<p>您的浏览器不支持H5视频。 请点击 <a href="myVideo.mp4">视频链接</a> 。</p>
</video>
其中,只有Firefox和Chrome支持WebM,IE和Safari不支持,需要以mp4格式为先,使用source标签来包含src属性指定对应格式的视频文件,然后加上type属性指定对应格式类型。
与img类似的,width和height属性可以控制视频默认大小:
<video controls width="960" height="540">
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<p>您的浏览器不支持H5视频。 请点击 <a href="myVideo.mp4">视频链接</a> 。</p>
</video>
<audio>标签
audio标签几乎跟video标签一样的使用方式,代表网页的H5音频文件:
<audio controls>
<source src="myAudio.mp3" type="audio/mp3">
<source src="myAudio.ogg" type="audio/ogg">
<p>您的浏览器不支持H5音频。 请点击 <a href="myAudio.mp3">音频链接</a> 。</p>
</audio>
audio不支持widht和height属性,因为它没有可现实的画面,只有控制栏。