首页课程HTML Fun ClassHTML5 Video element

HTML5 Video element

目录列表

<video> 元素

<video> 标签定义视频,比如电影片段或其他视频流。

目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。

如需在 HTML5 中显示视频,你需要使用以下代码:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

<video> 元素与 <audio> 元素一样,支持多个 <source> 元素,<source> 元素可以链接不同的视频文件,浏览器将使用第一个可识别的格式。<video> 元素也可以在 <video> 标签之间放置文本内容,这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。


在空格处填写正确的标签,完成显示视频

 <video controls>

      <source ="movie.mp4" type="video/mp4" />

      <source src="movie.ogg" ="video/ogg" />

      您的浏览器不支持 Video 标签。

 </video>


&lt;video&gt; 的属性

<video> 元素提供了播放、暂停和音量控件来控制视频,同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸。

<video> 元素和 <audio> 元素一样,都有 controls,autoplay 和 loop 属性。

在此例子中,视频播放结束后会重新开始播放:

<video controls autoplay loop>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">您的浏览器不支持 video 标签。</video>



拖拉排序代码,创建一个有效的视频标签,首先尝试播放mp4文件。

  • 您的浏览器不支持 video 标签。
  • <source src="movie.mp4" type="video/mp4">
  • <source src="movie.ogg" type="video/ogg">
  • <video controls>
  • </video>