视频

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

$$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> 元素则会忽略,并显示内部的文本元素提示。

$$

视频的宽高

我们可以通过 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>

$$

自动播放

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

$$warning

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

如果要让视频自动播放,必须同时设置 autoplaymuted (静音)。

$$

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