如何让VIDEO tag取消缓存

本文介绍了一个关于HTML5 video标签在浏览器中遇到的缓存问题及其解决方案。当video的src属性动态更新时,旧的视频源可能因为缓存而无法被替换。通过在视频源URL后添加随机参数(例如时间戳),可以有效地避免这一问题。

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

video的src是动态生成的。所以会有一个bug,更新了video的src的赋值,依然是播放之前的那个地址。

问题:video缓存
解决:给video的src地址加上?t=random参数。
random是动态值。如php的time()等都可以。

参考:
http://stackoverflow.com/questions/10699857/video-tag-html5-cache-in-firefox-and-opera
### HTML `video` 标签属性详解 #### 基本定义与用途 在HTML中,`<video>`标签用于向网页添加视频内容。此标签仅支持基本的媒体文件嵌入功能,还提供了丰富的自定义选项以增强用户体验和适应同的应用场景[^2]。 #### 主要属性介绍 ##### 1. `src` 指定了待播放视频资源的位置路径。这是最基础也是最重要的一个属性,决定了实际加载并呈现给用户的多媒体内容来源[^3]。 ##### 2. `poster` 设定了一张图片作为视频未开始前或暂停状态下的预览图。这有助于提升页面美观度,在某些场景下也能起到提示作用。 ##### 3. `preload` 指示浏览器如何预先下载视频数据。可选值有三个:"none"(提前加载),"metadata"(仅载入元数据), 和 "auto"(尽可能多地缓存)[^4]。 ##### 4. `autoplay` 如果存在该布尔型属性,则表示允许自动播放视频;反之则需由用户手动触发启动操作[^4]。 ##### 5. `loop` 同样为布尔类型参数,用来规定是否循环播放当前视频片段。一旦设置即意味着影片会在每次结束后立即重新开始播放。 ##### 6. `controls` 提供内置的标准控制器界面供访客交互使用,比如播放/暂停按钮、进度条等。这对于确保跨平台兼容性和易用性至关重要。 ##### 7. `controlsList` 进一步细化了对默认控件行为的具体配置,例如通过指定`nodownload`阻止右键菜单里的保存链接项出现,从而保护版权材料的安全性[^1]。 ##### 8. `width` 和 `height` 分别定义了渲染区域内视频画面的实际宽度和高度尺寸单位,默认会按照原始比例缩放显示。 ```html <!-- 示例代码 --> <video src="example.mp4" poster="preview.jpg" preload="metadata" autoplay loop controls controlslist="nodownload"> Your browser does not support the video tag. </video> ``` 上述示例展示了如何综合运用多个常用属性来创建一个具有特定表现形式和服务逻辑的在线视频播放实例。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值