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

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

<video> 标签

  在 HTML5 中,使用 video 标签来显示视频:

<video src="myVideo.mp4" controls>
  <p>您的浏览器不支持H5视频。 请点击 <a href="myVideo.mp4">视频链接</a> 。</p> 
</video>

%E5%9B%BE%E7%89%87

  可以看到,跟 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>

%E5%9B%BE%E7%89%87

  audio 不支持 widht 和 height 属性,因为音频没有可显示的画面,只有控制栏。

  更多参考音频视频

上一篇: HTML学习篇(五) 图片
下一篇: HTML学习篇(七) 表格

2赞