1. HTML 基础

  2. 常用的元素

  3. 工具与规范

视频

视频同样是网站上不可或缺的元素,下面是一个动画的视频。

$$demo

<video src="https://qiniu.3yya.com/cartoon.mp4" controls><p>你的浏览器不支持视频。</p> </video>

$$

使用 <video> 元素便能创建一个元素, src 属性为视频的地址,通常我们还会带上 controls 属性,它表示视频的控制界面。

<video src="https://qiniu.3yya.com/cartoon.mp4" controls>
    <p>你的浏览器不支持视频。</p>
</video>

注意 <video> 元素内还包括了一段文本内容,这些内容会在浏览器不支持 <video> 元素时显示。

视频的宽高

我们可以通过 widthheight 属性控制视频的宽高,单位是像素。比如以下将宽高都设置成了 400 个像素。

<video src="https://qiniu.3yya.com/cartoon.mp4" width="200" height="200" controls>
    <p>你的浏览器不支持视频。</p>
</video>

以下是效果。

$$demo

<video src="https://qiniu.3yya.com/cartoon.mp4" width="200" height="200" controls> <p>你的浏览器不支持视频。</p> </video>

$$

属性

属性名 描述
controls 视频显示控制界面。
width 视频的宽度,单位是像素。
height 视频的高度,单位是像素。
autoplay 视频自动播放。
muted 视频默认静音。
poster 视频的封面,如果不设置则截取视频内容。
preload 缓冲选项。<ul><li>none: 不缓冲。(默认值)</li><li> auto: 页面加载后缓冲媒体文件。</li><li> metadata: 仅缓冲文件的元数据。</li></ul>