html5 audio音频，video视频currenttime设置失效

最新推荐文章于 2024-05-04 16:23:47 发布
最新推荐文章于 2024-05-04 16:23:47 发布
阅读量2.8k 收藏 1
点赞数 1
分类专栏： html专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38705449/article/details/103525493
版权

今天在做一个音乐播放的插件，遇见了一个currentTime属性无法赋值的问题，我们在（红箭头指向）此进行了赋值但是我们点击播放按钮的时候发现打印的_that.audios.currentTime值一直为0，而从上面的current也是有值的，这样我们想到的是可能是加载音频文件的问题，固然我们先测试了火狐浏览器发现本地的音乐文件正常加载也能点击跳帧播放，然后试了IE11也没有问题，这火狐，ie及一些浏览器都没有问题那么可能是谷歌本身的问题

image.png

image.png

结果发现在谷歌上运行只需要设置video 的src地址为服务器地址即可。不能用本地地址。所有在百度上搜索在线音乐地址，放到src上发现chrome正常运行，也是站长比较疏忽的地方一直以为是一个bug没有测试其他浏览器，再次提醒大家，发现有bug了的话用其他浏览器测试以后再进行方案解决

追梦猪
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-video-player 实现断点续播，currentTime不生效问题。
qq_41117240的博客
03-28 3430
vue-video-player 实现断点续播，video设置currentTime不生效问题，谷歌浏览器不生效。
Html5 video 上传预览图片视频，设置、预览视频某秒的海报帧
09-22
在HTML5中，`<video>`标签为网页提供了嵌入视频的能力，同时也支持了一系列方法和属性来实现视频的上传预览、设置特定帧为海报图片等功能。本文将深入探讨如何利用HTML5的API来实现这些功能。 首先，上传预览图片...
移动端 iOS 设置 audio 的 currentTime 无效解决方法
weixin_60266866的博客
08-04 687
/ 判断是否安卓设备。
audio组件的currttime值设置失败
最新发布
2301_78459015的博客
05-04 244
在组件的内部加上这条，大概意思就是说在浏览器运行这个页面之前，会先预加载着几个组件，这样浏览器就知晓了这几个组件的存在，也就解决了currenttime属性不存在的问题（纯属个人理解，如有不恰当的地方，求指正）。就是在当我连续敲击的时候，组件并不是连续的播放，原因可能是因为，在我敲击播放第一次之后的再次敲击时，此时的audio组件正处在播放状态中，所以没有达到连续播放的效果。在调用currenttime之前先执行了这样一行代码，最终问题被稀里糊涂的解决了，成功的实现了连续的击鼓。
[HTML] html5 audio video currentTime失效不起作用解决方法
Epic_bl的博客
12-31 1541
昨天在修改问题的时候发现[HTML] html5 audio video currentTime失效不起作用无法拖动进度条解决方法。一下是我解决问题博客。 1.[HTML] html5 audio video currentTime失效不起作用无法拖动进度条解决方法： https://www.51-n.com/t-4306-1-1.html 2.关于video-js currentTime()无效的解决办法 https://blog.csdn.net/LLittleF/article/details/827
关于Chrome下的video文件currentTime无效问题
Root的博客
11-18 3205
前段时间查到的bug：记录关于Chrome下video文件设置的currentTime没有效果，这里有详细的解释和解决方案 https://stackoverflow.com/questions/53053444/cant-seek-through-video-from-rails-active-storage-with-rails-webpacker-react-fr/53242215#5324...
谷歌浏览器中设置控件video的currentTime无效
qq_42858057的博客
04-21 1189
在网页中实现视频课程功能，重点是要能够保存用户的观看进度。比如，用户观看一个视频，这个视频看到2秒，这时用户离开此页面，下次打开这个视频，这个视频就要从2秒开始播放。
html5、微信 无法快进、video currentTime 设定失效、重头开始播放。
热门推荐
一个吃水不忘挖井人的博客。希望能帮助到你
02-22 1万+
本地资源无法快进 今天工作中根据需求要求将本地视频，快进到一定时间再播放。结果发现了一个坑 问题： 无法快进 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...
HTML5 video 事件应用示例
01-21
当视频载入video后，使用 onloadedmetadata 事件获取视频的时间长度。 复制代码代码如下: video.onloadedmetadata = function () { var vLength = video.duration; console.log(vLength); } 2、当前视频的播放进度...
html5音频_动力节点Java学院整理
09-28
HTML5的<audio>标签还提供了丰富的JavaScript API，允许开发者控制音频播放，如`play()`, `pause()`, `currentTime`, `duration`等属性和方法，以及`onended`, `onplay`, `onpause`等事件，便于实现复杂的音频交互...
HTML5视频播放video标签使用方法.docx
10-26
HTML5的`<video>`标签是现代网页设计中用于内嵌视频内容的关键元素，它使得开发者无需依赖外部插件即可在网页上展示多媒体资源。在本文中，我们将深入探讨`<video>`标签的使用方法，以及如何通过JavaScript进行交互...
html5中为audio标签增加停止按钮动作实现方法
12-13
在html 5中的audio标签中，只有暂停按钮，但没有停止按钮，其实为其增加也不麻烦，方法如下： 复制代码代码如下: HTMLAudioElement.prototype.stop = function() { this.pause(); this.currentTime = 0.0; } 其实...
关于audio标签设置currentTime属性无效，currentTime变为0
chenjixue的博客
10-17 4568
1.进度条的控制 主要分为监听鼠标的mousedown和mousemove事件 点击跳转进度条 主要是mousedown.e.currentTarget.getBoundingClientRect（应为事件绑定在父元素上，事件的触发为子元素冒泡触发，不能用target）获取进度条离页面左边的距离，e.clientX获取实际点击的坐标，两者相减得到真实的点击在进度条里面的坐标， 拖拽的的原理同上，只是说拖拽是个不断触发的过程而已 2.音频文件的显示数字的设置 主要是监听audio标签的loadedd
解决 iOS HTML ＜audio＞ 标签设置 currentTime 后再获取它的值没有变化
qq1014156094的博客
04-26 1031
问题复现 框架：Vue 组件：@liripeng/vue-audio-player iOS 版本：14.4 注意：this.$refs.audio 是 <audio> 标签实例 当我点击进度条时设置了 currentTime，例如 this.$refs.audio.currentTime = 30，但不执行播放。 点击播放按钮，执行 this.$refs.audio.play() 和 window.setInterval(() => { console.log(this.$refs.a
videojs在ios14中直接设置currenttime无效
qq_42727920的博客
03-18 1433
videojs在ios14中直接设置currenttime无效 设置currenttime前先执行load（）方法 这样每次load（）方法执行时都会黑屏 要避免这种情况的话只需在创建实例后（new）执行一次load（）方法即可 我这里遇到的问题是 这里绿色的播放按钮的作用是点击这个按钮就会播放相应的句子且视频会跳转到相应的部分 获取数据中（starttime endtime）这段句子对应的时间刻度并将其设置为视频的currenttime就可以了 这个功能在除了ios14的其他系统都没问题 在ios14
移动端ios直接设置currentTime无效解决方法
qq_36611673的博客
04-18 4616
 var $myVideo = $("#chatAudio")[0];      if(isAndroid()){          //安卓        if(sessionStorage.currentTime &gt; 0.1){              //设置播放时间              $myVideo.currentTime = sessionStorage.current...
HTML5 Audio Player Duration 在IOS兼容问题
weixin_37974230的博客
06-23 3856
h5移动端项目使用audio标签时，在自己定义进度条时候遇到了duration兼容问题。在IOS端获取duration为NAN，安卓移动端显示正常。解决这一类办法增加一个事件监听就可以解决...
vue中的video组件的currentTime不生效，设置完之后跳转0
zhaoyapeng_的博客
01-08 916
首先检查video组件的src是本地的资源（…/或者/开头的）还是远程的资源（http或者https开头的），chrome中video组件的file协议有问题，所有你要把你的src写成远程的资源
videojscurrenttime无效
milijiangjun的博客
09-22 2691
//添加视频准备完成后的回调函数 player.on('loadedmetadata', function() { player.play(); //自动播放 player.currentTime(100); //跳转 }); 我们 在更换视频地址后需要让视频跳转到某个位置，按理说使用currentTime()就可以解决，但是在player.src()函数执行后再执行player.currentTime()就会无效。 这
html视频声音控制的代码,H5新属性audio音频和video视频的控制详解（推荐）
06-01
好的，以下是html视频声音控制的代码： ```html <!DOCTYPE html> <html> <head> <title>视频声音控制</title> </head> <body> <!-- 视频 --> <video id="myVideo" width="640" height="360" controls> <source src="myVideo.mp4" type="video/mp4"> <source src="myVideo.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <!-- 音量控制 --> <input type="range" id="volumeRange" min="0" max="1" step="0.1" value="1" onchange="changeVolume()"> <!-- 播放/暂停按钮 --> <button onclick="playPause()">播放/暂停</button> <!-- 停止按钮 --> <button onclick="stop()">停止</button> <!-- 快进按钮 --> <button onclick="fastForward()">快进</button> <!-- 慢放按钮 --> <button onclick="slowMotion()">慢放</button> <script> var myVideo = document.getElementById("myVideo"); var volumeRange = document.getElementById("volumeRange"); function changeVolume() { myVideo.volume = volumeRange.value; } function playPause() { if (myVideo.paused) { myVideo.play(); } else { myVideo.pause(); } } function stop() { myVideo.pause(); myVideo.currentTime = 0; } function fastForward() { myVideo.currentTime += 5; } function slowMotion() { myVideo.playbackRate = 0.5; } </script> </body> </html> ``` 在上面的代码中，我们使用了`<video>`标签来嵌入视频，并添加了`controls`属性来添加视频控制面板。我们还使用了`<input>`标签来创建音量控制条，并使用`onchange`属性来调用`changeVolume()`函数。我们还添加了几个按钮，每个按钮都有一个相应的JavaScript函数来控制视频的播放，暂停，停止，快进和慢放。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值