html 的 poster 属性主要应用在 < video > 元素中, 用于在视频下载或用户单击播放按钮时显示图像; 如果未设置此图像, 则会将第一帧视频作为海报图像.
HTML poster 属性
语法:
<video poster="URL">
属性值: 它包含一个值 URL, 用于指定源图像的链接. 下面列出了两种类型的 URL 链接:
● 绝对 URL: 它指向另一个网页.
● 相对 URL: 它指向同一网页的其他文件.
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- </head>
- <body>
- <h3>
- 没有设置 poster 属性
- </h3>
- <video width="400" height="200" controls>
- <source src="http://img.php.cn/ueditor/php/upload/video/20190327/1553657855333112.mp4"
- type="video/mp4">
- <source src="http://img.php.cn/ueditor/php/upload/video/20190327/1553657855333112.ogg"
- type="video/ogg">
- </video>
- <h3>
- 没有设置 poster 属性
- </h3>
- <video width="400" height="200" controls poster="https://img.php.cn/upload/article/000/000/006/5d2bed9f2e789818.jpg">
- <source src="http://img.php.cn/ueditor/php/upload/video/20190327/1553657855333112.mp4"
- type="video/mp4">
- <source src="http://img.php.cn/ueditor/php/upload/video/20190327/1553657855333112.ogg"
- type="video/ogg">
- </video>
- </body>
- </HTML>
效果图:
浏览器支持
● Google Chrome 4.0
● Internet Explorer 9.0
● Firefox 3.5
● Apple Safari 4.0
● Opera 10.5
来源: http://www.css88.com/qa/html5/10434.html