如何获取视频与音频当前的时长,并设置时长

这篇具有很好参考价值的文章主要介绍了如何获取视频与音频当前的时长,并设置时长。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

ontimeupdate

ontimeupdate 事件在视频 / 音频 (audio / video)当前的播放位置发送改变时播放
简单来讲:就是视频在播放时,将不断触发。

<script>
video.ontimeupdate = _.throttle(() => {
  // console.log(video.currentTime)
  // 把当前的时间存储到本地存储
  localStorage.setItem('currentTime', video.currentTime)
}, 1000)
</script>

此处用到了节流函数,每秒只会触发一次。
video.currentTime可以获取到,当前播放时长

onloadeddata

onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的
下一帧时触发
简单来讲:刷新以及打开页面将会触发

<script>
video.onloadeddata = () => {
	// 将存起来的时间取出,设置给播放时长,
	// 打开即可跳转到上次播放位置
	video.currentTime = localStorage.getItem('currentTime') || 0
}
</script>

video.currentTime 可读写,直接读就是获取播放时长,赋值即可设置当前播放时长。文章来源地址https://www.toymoban.com/news/detail-814850.html

到了这里,关于如何获取视频与音频当前的时长,并设置时长的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android Audio实战——音频播放(十)

            Android SDK 提供了3套音频播放的API,分别是:MediaPlayer,SoundPool,AudioTrack。简单来说,MediaPlayer 更加适合在后台长时间播放本地音乐文件或者在线的流式资源。SoundPool 则适合播放比较短的音频片段,比如游戏声音、按键声、铃声片段等等,它可以同时播放多个音频

    2024年02月15日
    浏览(42)
  • Audio API 实现音频播放器

    市面上实现音频播放器的库有很多,比如wavesurfer.js、howler.js等等,但是都不支持大音频文件处理,100多M的文件就有可能导致程序崩溃。总之和我目前的需求不太符合,所以打算自己实现一个音频播放器,这样不管什么需求 在技术上都可控。下面我们简单介绍下 wavesurferJs 、

    2024年02月10日
    浏览(43)
  • audio音频不能自动播放的解决方法

    由于浏览器限制的原因,不允许自动播放audio音频,尝试网上的方法后也没有进展(如果有解决方法,欢迎评论~) 一、首先创建 audio 标签 二、因为在页面刷新后需要先执行动画,动画完成后才去播放音乐,所以在执行 mounted 函数时,先加载音乐源 三、在动画完成后,进

    2024年02月11日
    浏览(110)
  • web audio api 实现音频播放

    最近被选中做音视频,挺幸运的吧,一直在接触新的项目,每次都能被分到新的项目组,干好多费头发的事情😂 上周五肝到12点半,总算是把音频编辑上了线 总结了一下,决定写一写,也盘点一下遇到的坑 web audio API是 HTML5新增的API,提供了在web上控制音频的一个有效通用的

    2023年04月09日
    浏览(49)
  • vue3 -- 使用audio标签播放音频

    公司系统内的审批页面,前端要根据后台推送的信息,使用’提示音’提醒用户进行对应审批操作。 vue3 项目 简介 | Vue.js (vuejs.org) TypeScript TypeScript: JavaScript With Syntax For Types. (typescriptlang.org) vite Vite | 下一代的前端工具链 (vitejs.dev) 下载好使用音频文件 音效网,保存本地。 将

    2024年02月01日
    浏览(42)
  • js获取音频时长

    上传音频文件时,需要将音频时长一起上传,纯 JavaScript 获取音频时长:使用 HTML5 的 Audio 对象和 duration 属性 来源 来源

    2024年02月03日
    浏览(38)
  • vue实现音频audio列表循环,实现暂停播放切换

    功能界面如下 功能使用如下: 首先根据后端返回的音频地址进行渲染,其中playAudioSrc字段用来控制暂停样式还是播放样式,audio进行隐藏 vue处理逻辑如下

    2024年02月11日
    浏览(41)
  • Unity 之利用Audio Source(音频源)组件用于播放声音

    Unity中的Audio Source(音频源)是一个用于播放声音的组件,通常附加到游戏对象上,以便在游戏中播放音频效果、音乐或对话。以下是Audio Source的详细介绍: 添加Audio Source : 要在Unity中使用Audio Source,首先需要将其附加到一个游戏对象上。通常,您可以选择场景中的一个空游

    2024年02月09日
    浏览(50)
  • Vue中如何进行音频与视频播放?

    在Vue中,我们可以使用HTML5的 audio 和 video 标签来实现音频和视频的播放。Vue本身并没有提供专门的音频或视频播放组件,但是可以使用Vue的数据绑定和生命周期钩子来控制音频和视频的播放。 在Vue中,我们可以使用 audio 标签来嵌入音频文件。下面是一个简单的例子: 这个例

    2024年02月10日
    浏览(48)
  • 视频上传,限制时长,获取视频时长

    使用element的upload上传文件时,除了类型和大小,需求需要限制只能长传18秒内的视频,这里通过upload的before-upload,以及创建一个音频元素对象拿到durtaion时长属性来实现。 loadedmetadata 事件是当指定的音频/视频的元数据已加载时触发,就可以得到元数据,包括时长,尺寸等;

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包