关于Chrome下的video文件currentTime无效问题

最新推荐文章于 2024-08-12 17:13:49 发布
最新推荐文章于 2024-08-12 17:13:49 发布
阅读量3.3k 收藏
点赞数
分类专栏： 服务器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33281069/article/details/84205173
版权

前段时间查到的bug：记录关于Chrome下video文件设置的currentTime没有效果，这里有详细的解释和解决方案
https://stackoverflow.com/questions/53053444/cant-seek-through-video-from-rails-active-storage-with-rails-webpacker-react-fr/53242215#53242215

其实就是，Chrome浏览器中video文件的src需要http/https才能够正确运行，否则无法正确设置currentTime，视频文件很有可能会一设置就跳到头重新播放。

P.S: 如果video文件没有下载到currentTime的时候，但是强行跳转到设置的currentTime，也无法正确运行

video，audio currentTime 失效无作用注意点 currentTime修改时间失败解决方法
王敬辉的博客
10-11 4220
video，audio currentTime 失效无作用 注意点 自己试着写video的控制台，在写拖动进度效果踩坑； 有引用Jquery，所以获取元素定义元素时都用的$("element")&&$element currentTime方法 是添加在video||audio单个元素上的.。 而JQ中$("element")&&$element获取的是数组对象， ...
h5中video详解和其它新标签，css自定义常量
snow_small的博客
05-31 5262
一、直播的工作原理1、直播的流程2、视频的格式和兼容性，flv：b站使用的，hls：苹果使用的3、直播协议（mp4适合点播（就是重播）比如爱奇艺。。。）（1）HLS协议：先发放M3U8文件，这个文件有很多索引，指向不同的片段ts，根据ts片段的时长，浏览器会自动更新M3U8文件对应hls类型的视频，以.ts结尾video解析M3U8文件（索引文件），解析成一个个片段，会有延迟（2）RTMP协议：建...
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
09-28
Video对象是HTML5中新增的一个对象，支持多种不同格式的视频在线播放，功能比较强大，Video对象可以通过ontimeupdate事件来报告当前的播放进度，下面为大家介绍下Video对象ontimeupdate事件的问题，感兴趣的朋友可以参考下哈
谷歌浏览器中设置控件video的currentTime无效
qq_42858057的博客
04-21 1917
在网页中实现视频课程功能，重点是要能够保存用户的观看进度。比如，用户观看一个视频，这个视频看到2秒，这时用户离开此页面，下次打开这个视频，这个视频就要从2秒开始播放。
audio.currentTime 和video.currentTime 失效的问题
花神的博客
07-19 1万+
最近在做移动端的项目时遇到，audio和video中的媒体文件的currentTime失效进而无法快进。 复现方法： 使用chrome在本地局域网如： http://192.168.1.104:8020/index.html打开 或者 在公司的服务器上打开页面时会出现这种情况但直接双击index.html打开和localhost下面打开是可以快进的，使用火狐和IE任何时候都是表现正常的这种情况很有
关于html5 video currentTime 在chrome浏览器下设定失败问题解决
热门推荐
紫涩的博客
03-14 1万+
关于html5 video currentTime 在chrome浏览器下设定失败问题解决
Videojs 网页 播放器
05-18
获取视频总时长（在Flash模式下可能无效）： ```javascript var duration = myPlayer.duration(); ``` 监控缓冲状态： ```javascript var buffered = myPlayer.buffered(); var bufferedPercent = myPlayer....
html5 src="/i/movie.ogg"什么意思,关于HTML5视频标签的问题
weixin_35922444的博客
06-26 1284
一、基本video标签在兼容性上还是比较差的，如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8的(Opera、Mozilla、Chrome)，支持H.264的(Safari、IE 9、Chrome)，都不支持的(IE6、7、8)。但是由于H5在移动设备上展现，基本都是使用webkit内核，只需要考虑Android、IOS设备上的差异。width="640" h...
video相关参数、操作和事件
weixin_30793643的博客
04-23 1812
1.参数 　　video是h5的新特性（虽然新了很多年了），使得枯燥的页面有了很多生机。html代码示例： 1 <video 2 id="kingdom-video" 3 src="" 4 preload 5 controls> 6 </video> 7 <video width="320" h...
HTML中的audio和video
web前端开发教程htmlcssjs
01-15 1249
HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是<audio>和<video>，且不被IE8-浏览器支持 以视频文件举例，它包含了音频轨道、视频轨道和其他一些元数据(封面、标题、子标题、字幕等) HTML元素 使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容，...
html5 audio在chrome中设置currentTime无效
u010999809的博客
01-17 2382
原因：我用的是idea，idea自带的server返回mp3的header中没有Content-Range；后面我换成了tomcat服务器就没问题了 参考链接： https://stackoverflow.com/questions/37044064/html-audio-cant-set-currenttime https://segmentfault.com/q/1010000002...
html5 audio音频，video视频currenttime设置失效
追梦猪的博客
10-10 3048
今天在做一个音乐播放的插件，遇见了一个currentTime属性无法赋值的问题，我们在（红箭头指向）此进行了赋值但是我们点击播放按钮的时候发现打印的_that.audios.currentTime值一直为0，而从上面的current也是有值的，这样我们想到的是可能是加载音频文件的问题...
Chrome currentTime修改时间失效的解决办法
肖明伟 的博客
08-31 7857
需求是写一个audio插件，当用到currentTime修改时间，开始是没问题的，后来修改了一次文件路径，属性就失效了。video | audio都是一样的。 最后查到的原因是：测试音写的是本地地址，把音频/视频放到服务器，使用http://的播放地址就不再出现这个问题了。 希望有用，欢迎评论。
audio对象或video对象在设置currentTime时不生效，会自动跳转到0
qq953454299的博客
10-11 657
试了网上很多办法，什么设置preload=“auto”，用什么seeked，都不管用。后来发现，不需要，什么额外的操作都不用做，只要别在hbuilder里打开就行。从文件管理器里打开，啥事儿没有，非常完美。
获取并设置HTML5视频当前时间
culuo8053的博客
08-10 442
Last week I explored how you could get the duration of a HTML5 video. It's an important technique, obviously, but one that may be a bit more important is managing the video's time setting. Both sett...
html5、微信 无法快进、video currentTime 设定失效、重头开始播放。
一个吃水不忘挖井人的博客。希望能帮助到你
02-22 1万+
本地资源无法快进 今天工作中根据需求要求将本地视频，快进到一定时间再播放。结果发现了一个坑 问题： 无法快进 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...
微信小程序video组件动态绑定initial-time属性不生效
iorn_mangg的博客
08-05 1907
项目中需要动态绑定initial-time跳转到相应位置，但是发现重置initial-time在开发者工具生效了，真机确失效了。这就很坑了。 查了论坛https://developers.weixin.qq.com/community/develop/article/doc/000eac585ec860d6e479de18a51c13 这篇也提出了解决思路 我使用了最直接的方法： 微信api提供了跳转方法，真机生效 ...
(H5)uniapp在UC浏览器设置video播放进度失败
wu_bai的博客
02-09 1108
(H5)uniapp在UC浏览器设置video播放进度失败 问题描述： 直接设置video的initial-time属性去播放上一次保存的视频进度，在UC浏览器上失败 解决方法： 1.首先得先播放视频，用video的paly()； 2.再监听视频的timeupdate方法里做更新进度处理，因为这是用的uniapp，所以直接用的uniapp的video的seek方法，去直接跳转上次播放进度；(详细请看链接:https://uniapp.dcloud.io/api/media/video-context?id=
html5 新特性 video
技术路线：vue2、vue3
08-12 783
HTML5新特性video
移动端video标签currentTIme
最新发布
02-11
### 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、付费专栏及课程。

余额充值