视频

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

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

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

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

$$tip

注意 <video> 元素内还包括了一段文本内容，如果浏览器不支持 <video> 元素则会忽略，并显示内部的文本元素提示。

$$

视频的宽高

我们可以通过 width 和 height 属性控制视频的宽高，单位是像素。比如以下将宽高都设置成了 200 个像素。

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

$$

$$tip

• 如果同时设置宽高，则作为元素的实际尺寸。
• 如果仅设置宽或高，则另一边会依据视频原比例适应长度，最终元素与视频的宽高比一致。
• 如果不设置宽高，则元素的尺寸为视频的宽高。 $$

自动播放

设置属性 autoplay 可以让视频自动播放。

$$warning

很多时候仅设置 autoplay 并不能让视频自动播放，这是浏览器为了避免自动播放的广告打扰用户而做出的限制。

如果要让视频自动播放，必须同时设置 autoplay 和 muted （静音）。

$$

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

$$demo <div style="height:256px"> <video src="https://qiniu.3yya.com/cartoon.mp4" controls autoplay muted> <p>你的浏览器不支持视频。</p> </video> </div> $$

视频封面

poster 属性可以设置视频的封面，如果不设置则截取视频的内容作为封面。

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

$$demo

<video src="https://qiniu.3yya.com/cartoon.mp4" width="400" height="240" poster="https://3yya.com/wukong.jpg" controls

<p>你的浏览器不支持视频。</p>

</video>

$$

$$tip

设置封面时记得设置视频的宽高，不然视频未播放时会显示封面图片的宽高，视频播放后又是自身视频的宽高。

$$

属性

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