video,audio currentTime 失效无作用注意点 currentTime修改时间失败解决方法

在尝试为video元素实现进度拖动效果时,遇到currentTime属性失效的问题。问题源于使用JQuery时,元素选择返回的是数组对象,而非单个元素。解决方法是确保方法应用于单个元素上,正确设置和使用currentTime属性来改变音频/视频的播放位置。

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

video,audio currentTime 失效无作用 注意点

自己试着写video的控制台,在写拖动进度效果踩坑;
有引用Jquery,所以获取元素定义元素时都用的$("element")&&$element
currentTime方法 是添加在video||audio单个元素上的.。

而JQ中$("element")&&$element获取的是数组对象,
嗝儿 基础知识 不能大意啊
js代码

video.currentTime=200;
console.log($video)
console.log($("#video"));

控制台输出
在这里插入图片描述

currentTime 定义和用法:
currentTime 属性设置或返回音频/视频播放的当前位置(以秒计)。
当设置该属性时,播放会跳跃到指定的位置。

设置 currentTime 属性:( 以秒为单位 )

audio|video.currentTime="seconds"

返回 currentTime 属性:

audio|video.currentTime
### HTML5 Video 标签在移动端设置或获取播放时间 对于HTML5 `video`标签,在移动端通过JavaScript操作视频的当前播放位置是一个常见的需求。这可以通过访问和修改`currentTime`属性来实现。 #### 设置视频当前播放时间 为了确保兼容性和用户体验,特别是在移动设备上,推荐的做法是在特定事件触发后再调整`currentTime`。例如: - 对于iOS平台,当检测到浏览器环境为iPhone或iPad时,可以在`canplay`事件发生后立即设定`currentTime`[^3]。 ```javascript const myPlayer = document.getElementById("player"); if (navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) { myPlayer.addEventListener("canplay", () => { myPlayer.currentTime = desiredTime; }); } ``` - 而针对Android设备,则可能更有效的是利用`timeupdate`事件监听器,并仅首次更新`currentTime`以防止重复执行。 ```javascript let setTimeFlag = true; if (!/iPhone|iPod|iPad/.test(navigator.userAgent) && /android/i.test(navigator.userAgent)) { myPlayer.addEventListener("timeupdate", () => { if (setTimeFlag) { myPlayer.currentTime = desiredTime; setTimeFlag = false; } }); } ``` 上述代码片段展示了根据不同操作系统采取不同策略的方法,从而更好地处理跨平台差异带来的挑战。 #### 获取视频当前播放时间 无论在哪种平台上,都可以直接读取`currentTime`属性来获得当前正在播放的位置。此过程相对简单得多,因为不需要考虑太多关于何时何地去查询该值的问题。 ```javascript const currentTime = myPlayer.currentTime; console.log(`The current playback position is ${currentTime} seconds.`); ``` 值得注意的是,在某些情况下,比如刚加载完资源但还未开始自动播放之前,可能会得到不准确的结果;因此最好是在媒体已经准备好之后再尝试读取这些信息。 另外,考虑到部分手机浏览器默认不允许静默播放(即没有用户交互的情况下启动音频/视频),所以在实际开发过程中还需注意相关政策限制以及相应的解决方案[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值