HTML <video> poster 属性 详解
HTML基础 2022-06-02 12:09:50小码哥的IT人生shichen
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>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" poster="/i/w3school_logo_black.gif" controls>
<source src="/i/movie.mp4" type="video/mp4">
<source src="/i/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 poster 属性。
注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。
定义和用法
poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
如果未设置该属性，则使用视频的第一帧来代替。
HTML 4.01 与 HTML 5 之间的差异
poster 属性是 HTML 5 中的新属性。
语法
<video poster="URL">
属性值
| 值 | 描述 |
|---|---|
| URL |
规定图像文件的 URL。 可能的值：
|
