5.3.1  为播放的视频准备一幅素材图片

5.3.1 为播放的视频准备一幅素材图片

在HTML 5的<video>元素中，属性“poster”表示所选图片URL，如果添加该属性，则在视频文件播放前显示该图片，而不是默认显示视频文件的第一帧。另外添加该属性，还可以避免在播放的视频文件不可用时，出现一片空白区域，这会影响用户体验。

下面通过一个实例讲解为播放的视频准备一幅素材图片的方法。

在本实例的<video>元素中，新增了一个“poster”属性，并选取一幅图片作为该属性的值。当播放视频文件时，在视频播放区域中会首先显示“poster”属性指定的图片。实例文件7.html的具体实现代码如下。

在上述代码中，设置了<video>媒体元素的“poster”属性，该属性是视频元素<video>所独有的属性。利用该属性不仅可以在视频文件开始播放前设置图片，还可以通过视频元素的事件机制，指定在某事件中改变该属性的图片URL。例如，在播放视频的过程中，当用户单击“暂停”或播放完成时，在相应的事件中编写JavaScript代码，通过setAttribute（）方法重置“poster”属性中图片的URL，这样可以根据不同事件动态变换图片的效果。

样式文件css.css的具体实现代码如下。

执行后将用户指定的图片作为待播放视频的封面，如图5-7所示。

图5-7 执行效果