html5 poster没作用,HTML Video poster用法及代码示例

本文详细介绍了如何在JavaScript中使用`videoObject.poster`属性来设置或获取视频的海报图片。通过示例展示了如何在不同浏览器中更改视频预览图,并提供了一个函数来实现实时更新。重点在于海报属性在视频加载前的展示作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

“视频海报”属性用于设置或返回视频的海报属性的值。海报属性专门用于在下载视频时或直到用户按下播放按钮之前显示图像。如果不包括海报选项,则显示视频的第一帧。

用法:

返回海报属性:

videoObject.poster

设置海报属性:

videoObject.poster = URL

属性值

URL:用于指定图像文件的URL。

以下示例程序旨在说明视频海报属性:

例:更改视频的海报图像。

DOM Video poster Property

GeeksforGeeks

Video Poster Property

width="360"

height="240"

poster="gfg_200X200.png"

controls>

type="video/mp4">

type="video/ogg">

To change the poster image,

double click the "Change Poster" button.

type="button">Change Poster

function My_Video() {

document.getElementById(

"Test_Video").poster = "Unknown.png";

}

输出:

单击按钮之前::

aa395103c3c5e90596632fb699b9bf8c.png

单击按钮后:

374bd056fac65a606ca09efaf74f62fe.png

支持的浏览器:

苹果Safari

IE浏览器

Firefox

谷歌浏览器

Opera

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值