HTML <video> 标签
文章 3732 0 0 0
发布时间:2018年08月31日

实例

<video>标签定义视频,比如电影片段或其他视频流。
HTML 4.01 与 HTML 5 之间的差异
<video> 标签是 HTML 5 的新标签。

提示和注释

提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

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

HTML<video>autoplay 属性

设置为自动播放的 video 元素:

<video controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

autoplay定义和用法

autoplay 属性规定一旦视频就绪马上开始播放。
如果设置了该属性,视频将自动播放。
HTML <video> controls 属性

带有浏览器默认控件的 video 元素:

<video controls="controls" controls="controls">  
    <source src="movie.ogg" type="video/ogg" />  
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

controls定义和用法

controls 属性规定浏览器应该为视频提供播放控件。
如果设置了该属性,则规定不存在作者设置的脚本控件。
浏览器控件应该包括:
播放
暂停
定位
音量
全屏切换
字幕(如果可用)
音轨(如果可用)

HTML <video> height 属性

具有指定高度和宽度的视频:

<video width="320" height="240" controls="controls">  
    <source src="movie.ogg" type="video/ogg" />  
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

height定义和用法

height 属性指定视频播放器的高度。
提示:规定视频的高度和宽度是一个好习惯。如果设置这些属性,在页面加载时会为视频预留出空间。如果没有设置这些属性,那么浏览器就无法预先确定视频的尺寸,这样就无法为视频保留合适的空间。结果是,在页面加载的过程中,其布局也会产生变化。
提示:请勿通过 height 和 width 属性来缩放视频!通过 height 和 width 属性来缩小视频,只会迫使用户下载原始的视频(即使在页面上它看起来较小)。正确的方法是在网页上使用该视频前,使用软件对视频进行压缩。

HTML <video> loop 属性

设置为循环播放的 video 元素:

<video controls="controls" loop="loop">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

loop定义和用法

loop 属性规定当视频结束后将重新开始播放。
如果设置该属性,则视频将循环播放。
HTML <video> muted 属性

被静音的视频:

<video controls muted>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

muted定义和用法

muted 属性属于逻辑属性。
当设置该属性后,它规定视频的音频输出应该被静音。
HTML <video> poster 属性

带有预览图(海报图片)的视频播放器:

<video controls poster="/images/w3school.gif">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

poster定义和用法

poster 属性规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
如果未设置该属性,则使用视频的第一帧来代替。
HTML <video> preload 属性
设置为预加载的 video 元素:

<video controls="controls" preload="auto">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

preload定义和用法

preload 属性规定是否在页面加载后载入视频。
如果设置了 autoplay 属性,则忽略该属性。
HTML <video> src 属性

一个视频播放器:

<video controls="controls" src="movie.ogg">
Your browser does not support the video tag.

src定义和用法

src 属性规定要播放的视频的 URL。
也可以使用 <source> 标签 来设置视频。
HTML <video> width 属性
具有指定高度和宽度的视频:

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

定义和用法

width 属性指定视频播放器的宽度。
提示:规定视频的高度和宽度是一个好习惯。如果设置这些属性,在页面加载时会为视频预留出空间。如果没有设置这些属性,那么浏览器就无法预先确定视频的尺寸,这样就无法为视频保留合适的空间。结果是,在页面加载的过程中,其布局也会产生变化。
提示:请勿通过 height 和 width 属性来缩放视频!通过 height 和 width 属性来缩小视频,只会迫使用户下载原始的视频(即使在页面上它看起来较小)。正确的方法是在网页上使用该视频前,使用软件对视频进行压缩。

评论专区
Q群
Q群
Q群
反馈
纠错