• 首页课程HTML趣味课堂HTML5 Video元素

    HTML5 Video元素

    目录列表

    <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>


    <video> 的属性

    <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>

    PHP中文网