当前位置: 代码迷 >> 综合 >> HTML video 标签
  详细解决方案

HTML video 标签

热度:76   发布时间:2023-12-25 22:20:06.0

HTML <video> 标签

定义和用法

<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 属性规定一旦视频就绪马上开始播放。

如果设置了该属性,视频将自动播放。

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 属性规定浏览器应该为视频提供播放控件。

如果设置了该属性,则规定不存在作者设置的脚本控件。

浏览器控件应该包括:

播放

暂停

定位

音量

全屏切换

字幕(如果可用)

音轨(如果可用)

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 和 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 属性规定当视频结束后将重新开始播放。

如果设置该属性,则视频将循环播放。

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 属性属于逻辑属性。

当设置该属性后,它规定视频的音频输出应该被静音。

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 属性规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

如果未设置该属性,则使用视频的第一帧来代替。

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 属性规定是否在页面加载后载入视频。

如果设置了 autoplay 属性,则忽略该属性。

HTML <video> src 属性

一个视频播放器:

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

定义和用法

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 属性来缩小视频,只会迫使用户下载原始的视频(即使在页面上它看起来较小)。正确的方法是在网页上使用该视频前,使用软件对视频进行压缩。

  相关解决方案