HTML学习篇(六) 音频和视频

<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属性,因为它没有可现实的画面,只有控制栏。

更多参考音频视频

 

猜你喜欢

转载自blog.csdn.net/weixin_44247959/article/details/86474048