HTML5视频标签 video 的 poster 属性

video-poster.png HTML5视频标签 video 的 poster 属性 HTML笔记

<video> 标签定义视频，比如电影片段或其他视频流，可以放置视频资源，并添加视频控件。

支持的浏览器：

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。

注：Internet Explorer 8 以及更早的版本不支持 <video> 标签。

简单的HTML5视频：

视频加载失败时会显示标签内的文字。

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

poster ：带有预览图（海报图片）的视频

poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

如果未设置该属性，则使用视频的第一帧来代替。

代码如下：

<video controls poster="/images/w3h5.gif">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

所有主流浏览器都支持 poster 属性。

注：Internet Explorer 8 以及更早的版本不支持 <video> 标签。

语法：

<video poster="URL">

属性值 URL ：

规定图像文件的 URL。

可能的值：

绝对 URL - 指向另一个网站（比如 href="http://www.example.com/poster.jpg"）

相对 URL - 指向网站内的文件（href="poster.jpg"）