山海科技发展网

08月09日科技常识:HTML的poster属性怎么用

导读 摘要 今天小编跟大家讲解下有关HTML的poster属性怎么用 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML的poster属性...
摘要 今天小编跟大家讲解下有关HTML的poster属性怎么用 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML的poster属性怎么用

今天小编跟大家讲解下有关HTML的poster属性怎么用 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML的poster属性怎么用 的相关资料,希望小伙伴们看了有所帮助。

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

来源:爱蒂网