＜audio＞标签 “timeupdate“属性调用卡顿的问题记录

最新推荐文章于 2024-01-19 17:37:24 发布
最新推荐文章于 2024-01-19 17:37:24 发布
阅读量1.3k 收藏 2
点赞数 2
分类专栏： 问题记录 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Codger_Jy/article/details/115184591
版权
在使用Vue构建网页播放器时，遇到＜audio＞标签的'timeupdate'事件处理造成音频播放卡顿的问题。尝试通过节流技术解决，但未成功。深入分析后发现，问题根源在于element-ui组件的滑块属性绑定了播放器进度，每次滑动都会触发播放事件，导致卡顿。解决方案是优化事件绑定，避免不必要的播放逻辑执行。
摘要由CSDN通过智能技术生成

问题背景及描述

在用vue写网页播放器的时候用了隐藏<audio>+element-ui组件的组合方式，过程中需要实现播放时间的同步。
发现通过timeupdate事件处理相关逻辑会导致音频卡顿。

问题解决尝试

节流（不是问题根源）

通过节流来解决问题，以1s为长度

// 节流方法
timer(callback, time) {
   
	let clock = null;
	return function () {
最低0.47元/天 解锁文章
叽歪外道
关注
专栏目录
WebAPP开发——H5标签audio（属性和API事件）
吴小花的博客
02-20 3119
1.audio支持的格式 audio 定义音频 格式：mp3 wav ogg mp3所有浏览器兼容 ogg safari不支持 wav 都支持 js 能帮助生成audio对象 new Audio(); 等同于HTML上面写上audio标签 chrom和Opera都不能直接播放 需要页面上元素交互 <button id='btn'>播放</button&gt...
audio标签的timeupdate事件和ended事件
Jana Jing的分享
12-22 5207
timeupdate事件：当前播放时间 <audio controls @timeupdate="timeUpdate"></audio> 将当前时间赋给current当前时间 timeUpdate(e){ console.log("时间变化",e.target.currentTime) this.current=e.target.currentTime; } play()方法中判断是否处于暂停中，如果是点击播放，否则点击暂停 play(){
vue实现audio进度拖拽播放及拖拽播放问题解决
小男哥的博客
07-04 4881
vue+elementUi简单实现audio拖拽播放 *前言：*很久之前做过的一个录音播放功能，当时播放拖拽进度的时候出现了进度条拖到目标位置松手后又退回去的bug，现在想起来把实现过程和解决方法简单再写一遍，希望能给需要帮助的同学提供一份参考。 本次小demo使用了elementUi中的slider，font-awesome中的播放图标，vue中安装及使用方法如下： npm i element-ui font-awesome -S 然后在main.js中使用 引入elementUi: import
video/audio timeupdate事件触发粒度（更新频率）调节
weixin_42333548的博客
06-08 1378
一旦触发该监听器，就立即分5次执行，每50毫秒执行一次，执行5次，恰好就是250毫秒。所以这个timeupdate事件触发频率也是250毫秒触发一次。一般来说，视频的进度条底层默认都是250毫秒更新一次的。其实可以在里面加上计时器。
html audio加载卡顿,audio 设置了currentTime后为什么会卡顿？
weixin_42509803的博客
06-08 960
代码如下：methods:{editprogress(value){this.demoSlider=value;this.$store.commit('editProgress',this.demoSlider)}}editProgress(state,progressValue){const playerBar=document.getElementById("playerBar");let c...
vue使用定时器更新时间造成的页面卡顿
qq_32058147的博客
03-30 4466
最近做一个大屏可视化项目，用定时器加延时器写时间同步更新功能，刚开始以为很简单就完事了，后面客户反应时间一场页面就卡顿，最后排查原因，原来是计时器长时间调用引发内存泄漏， 后面优化了一下，果断没问题 错误写法 先是定义一个getData函数 ， 用来获取当前时分秒，日期， ( moment 函数我就不说了吧 ， 一款日期格式化插件 ， npm 可以下载) 再到mounted 定义一个计时器，计时器里调用getData函数 实时更新时间，虽然需求是达到了，但是长时间不关闭看看，页面肯...
HTML Audio/Video DOM timeupdate 事件，play()方法
ssisse的博客
08-14 1万+
HTML Audio/Video DOM timeupdate 事件 定义和用法 timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。 该事件可以在以下情况被调用: 播放音频/视频（audio/video） 移动音频/视频（audio/video）播放位置（即播放时刻点被改变，例如拖动了播放进度条） 提示： timeup
html控制多个音频audio css,vue中<audio>自定义样式（页面中包含多个audio）
weixin_30869777的博客
06-16 1091
前言一开始看到UI设计稿，我内心是十分抗拒的。觉得用原生audio的样式就可以了，也不是特别丑，毕竟时间给的不多，自定义样式还要改逻辑啥的。在网上搜索了一番有没有合适的插件，没有看到心动的。最后还是硬着头皮自己写了。参考了一个博客，很感谢这位博主，逻辑都可以用。不过原博用的jquery，我自己用vue，而且我的页面可能有不止一个audio，设计稿和原博也很不一样，所以改代码还是花了一番心思。我这里...
H5音频<audio/>样式修改，拖拽、点击进度操作、总时长加载
热门推荐
Candy_home的专栏
10-30 1万+
H5音频自定义样式，拖拽、点击改变进度操作，总时长 during 加载 1>“点击播放”和"点击暂停" 调用原生audio.play() 和 audio.pause()来对进度条进行操作 2>总时长加载：解析 audio.duration 来获取总时长，会有部分浏览器兼容问题，下面列举部分兼容方式。 3>点击跳转进度：获取当前的 鼠标点击位置【e.pageX】 - 进度条.offsetLeft【相对于它的直接父元素 的 偏移量】，使用 translateX 改变 “蓝色小球”的播放进度位置。 4>拖拽跳转
vue中使用HTML5的audio标签实现播放音乐
nineteenthdog的博客
06-12 3418
<audio :src='url' controls="controls" ref="player" preload="true" @canplay="startPlay" @timeupdate="timeupdate" @ended="ended"> <!--（1）属性：controls，preload（2）事件：canplay，timeupdate，ended（3）方法：play()，pause() --> <!--controls：向用户显示音频控件（播放/
html音频自定义时间,设置HTML5音频事件’timeupdate’的粒度
weixin_35831969的博客
06-05 602
我很抱歉，但这是它的工作方式。从html5 specs：Every 15 to 250ms,or whenever the MediaController’s media controller position changes,whichever happens least often,the user agent must queue a task to fire a simple event ...
html5 video timeupdate,通过video的timeupdate事件检测视频无法播放实例说明
weixin_32818587的博客
06-25 2900
需求说明：视频正文页在做视频联播时会遇到视频无法播放或者解析异常的情况，希望遇到有问题视频时可以跳过当前视频。事件说明：Video对象可以通过ontimeupdate事件来报告当前的播放进度,即在播放位置发生改变时触发该事件，我们可以通过监听该事件来判断视频是否正常播放。实例说明：视频无法播放是视频点击播放按钮后停留在0秒，此时已经触发timeupdate事件。视频解析异常则是不会触发timeup...
android 获取播放进度,【报Bug】安卓下nvue video @timeupdate获取不到播放进度
weixin_39733948的博客
05-31 401
详细问题描述(DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题)[内容]安卓下nvue video @timeupdate获取不重现步骤[步骤][结果]{"type": "timeupdate","timeStamp": 1566798124134,"target": {"id": "","da...
vue音乐卡住_Vue实现mp3音乐播放及动态进度条
weixin_32352213的博客
12-23 655
今天碰到一个Vue点击mp3播放及进度条动态走动的小功能，记录一下：首先是通过HTML5 audio标签引入音频： {{footer.title}}{{footer.subTitle}} 在data中静态定义我们需要的数据及定义调用点击方法，并获取当前mp3的时间长短，通过定时器转换成百分比实现进度条的播放走动：export default {props: ['...
播报卡顿，破音 问题总结
我的专栏
09-09 1855
播报出现卡顿，怎么办，如何做到永不卡顿，设备不卡死，播报就不卡顿
video记录视频播放时长
qiuweifan的博客
10-20 1851
记录视频播放时长
【JavaScript】事件监听：多媒体事件
最新发布
weixin_47040861的博客
01-19 2000
JavaScript提供了一些多媒体事件，用于处理音频和视频等多媒体元素的相关操作和交互。这些事件可以通过JavaScript代码来监听，并在事件触发时执行相应的操作。
audio标签的使用（实现音乐的进度条功能）
qq_41888962的博客
09-29 4799
1.前端页面 链接：https://pan.baidu.com/s/1Ntc0lSY1-ceYS1Oww3v5_w 提取码：rqaw 2.jQuery实现步骤 初始化audio元素 //定义一个全局变量，用来存储公用数据 var rem = [] // 初始化函数 function initAudio(){ // 在body标签中添加音乐标签 rem.audio=$(`<audio src="song/1.mp3" controls="controls" ></audio>
使用js+audio构建音乐播放器的实战教程
通常，JavaScript代码会放在`<script>`标签内，或者链接到外部JS文件（如`<script src="js/audio_play.js" type="text/javascript" charset="utf-8"></script>`）。外部文件可以提高代码可维护性，分离结构和行为。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值