讲师中心 微信公众号

工具推荐

视频效率加速
Laper
Laper

剧本策划到成片协作

剧云
剧云

中文短剧剧本制作平台

updream

一键生成高质量推广成片

AniShort
AniShort

AI短剧协同制作平台

play函数怎么记住播放位置_续播功能实现指南【教程】

阿宇吖_1001

阿宇吖_1001

发布时间:2026-02-10 13:58:36

|

904人浏览过

|

来源于php中文网

原创

play函数不记忆播放位置,需用localStorage在pause/ended时存currentTime、loadedmetadata/canplay后读取并设置,注意Safari限制和多视频key唯一性。

play函数怎么记住播放位置_续播功能实现指南【教程】

play 函数本身不记住播放位置,得自己存

浏览器原生的 play() 函数只是触发播放,它不保存、不读取、也不关心你上次播到哪。所谓“续播”,其实是你主动把 currentTime 存下来,下次播放前再设回去。

常见错误现象:play() 调用后视频从头开始;刷新页面后进度丢失;多个视频共用同一存储 key 导致串位。

  • 必须在用户交互(如点击)后调用 play(),否则多数浏览器会静音拦截或直接拒绝
  • 存位置不能只靠 timeupdate 实时写入 localStorage——太频繁,卡顿且易丢最后几秒
  • 推荐在 pause 事件和 ended 事件里各存一次,兼顾准确性和性能

用 localStorage + currentTime 实现最简续播

这是兼容性最好、代码最少的方案,适用于单个视频页或明确知道 video 元素唯一性的场景。

使用场景:新闻页嵌入单个 <video></video>、内部工具页、无登录态的轻量应用。

  • 存的时候用唯一 key,比如 video-resume-time-123,别直接用 resumeTime
  • 读的时候先检查 localStorage.getItem() 是否为有效数字,避免 NaN 导致播放失败
  • 设置 currentTime 必须在 loadedmetadata 或 canplay 之后,否则可能被忽略

示例关键片段:

const video = document.querySelector('video');
const key = 'video-resume-time-' + video.dataset.id;

video.addEventListener('loadedmetadata', () => {
  const saved = localStorage.getItem(key);
  if (saved && !isNaN(saved)) {
    video.currentTime = parseFloat(saved);
  }
});

video.addEventListener('pause', () => {
  localStorage.setItem(key, video.currentTime.toString());
});

video.addEventListener('ended', () => {
  localStorage.removeItem(key); // 播完清空,避免下次误续
});

多视频/路由跳转时,currentTime 存储容易失效

当页面有多个 <video></video>,或用户从列表页点进详情页再返回,仅靠 DOM 顺序或 data-id 不够稳定——组件重渲染、SSR、服务端生成 ID 不一致都会让 key 对不上。

参数差异:localStorage 是全局域,但 key 命名逻辑若依赖 DOM 状态(比如 document.querySelectorAll('video')[0]),就不可靠。

  • 优先用视频资源 URL 的哈希值做 key,比如 md5(video.src)(可用简单哈希函数替代)
  • 如果视频是动态加载的(如懒加载、分片播放),需确保 src 已赋值再计算 key
  • Vue/React 中,不要在 unmounted 或 useEffect cleanup 里删 localStorage,除非确认用户已看完

Safari 和 iOS WebKit 的特殊限制

不是所有浏览器都允许未播放前设置 currentTime。Safari 尤其严格:如果视频还没触发过播放(哪怕只是 play().catch()),直接设 currentTime 可能无效,且不报错。

性能 / 兼容性影响:iOS 上 loadedmetadata 触发时机不稳定,有时比 canplay 还晚;部分旧版 Safari 甚至要求先 play() 再 pause() 才能设时间点。

  • 稳妥做法:先调一次 play().catch(e => {})(静音、自动暂停),等 canplay 后再设 currentTime 并 pause()
  • 别依赖 seeking 或 seeked 来判断是否设置成功,iOS 下它们可能不触发
  • 测试时务必真机验证,模拟器和桌面 Safari 表现常有偏差
续播看着简单,真正上线后出问题的,八成卡在 Safari 的静音策略、localStorage 的 key 冲突、或者 currentTime 设置时机没对上——这些地方没有银弹,只能一个个 case 对着测。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

相关专题

更多
DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

6541

2024.08.14

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

20

2026.11.12

Go-Zero安装与goctl环境配置教程
Go-Zero安装与goctl环境配置教程

本专题围绕Go-Zero的安装与工具链配置展开,讲清Go版本要求、goctl安装方式、代理镜像、protoc依赖与环境变量设置,说明多版本共存、升级回退与CI流水线安装的做法,并整理安装阶段的常见报错与验证步骤。

0

2026.11.12

Go-Zero零基础入门教程
Go-Zero零基础入门教程

本专题整理Go-Zero的入门知识,从框架定位、环境准备到跑通第一个API服务,讲清目录分层、配置加载、日志与中间件的基本用法,并对比Gin、Kratos的差异,帮助Go开发者建立整体认知,判断它是否适合当前项目。

20

2026.11.12

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

120

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

100

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

80

2026.11.06

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

80

2026.11.05

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

60

2026.11.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn