前端如何判断音视频是否播放完毕

最新推荐文章于 2024-05-27 13:34:15 发布
最新推荐文章于 2024-05-27 13:34:15 发布
阅读量609 收藏
点赞数 2
文章标签： 前端 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DsiCoder/article/details/133152631
版权
音视频 专栏收录该内容
92 篇文章 12 订阅 ¥59.90 ¥99.00
订阅专栏
前端开发中，判断音视频是否播放完毕是常见需求。本文介绍了三种方法：1) 使用HTML5的ended事件；2) 利用JavaScript的currentTime属性；3) 结合Promise对象。通过监听事件或比较属性值，可以有效地确定音视频是否已播放完毕。
摘要由CSDN通过智能技术生成

在前端开发中，经常需要处理音视频的播放状态。判断音视频是否播放完毕是其中一个常见的需求。本文将介绍几种方法来实现这一功能，并提供相应的源代码。

方法一：使用HTML5的ended事件
HTML5提供了ended事件，它会在音视频播放结束时触发。我们可以通过监听该事件来判断音视频是否已经播放完毕。

<video id="myVideo" src="video.mp4"
了解本专栏 订阅专栏 解锁全文
远程兴起，前端音视频通话？学
sybh的博客
11-28 1202
看到前两篇文章都非常受欢迎，加起来有一千多赞了👍🏻 ，非常的开心！🤖继续加油！冲！我们在前两篇文章中大概讲解了 音视频媒体流的获取，处理，以及在上一篇文章中为了更直观的演示 WebRTC 建立点对点通信的过程，通过手动交换 sdp 来建 p2p 连接，实现了一个最简单的音视频通话，但在实际的应用场景中，我们几乎不可能会通过手动来交换 sdp ，因为这样会增加很多的工作量，也不方便，所以我们借助一个信令服务器来帮助我们实现自动建立连接的这个过程。ok，我们先来看一下我们需要监听的事件。
【秒懂音视频开发】09_播放PCM
yinshipin007的博客
05-25 855
ffplay 可以使用ffplay播放《音频录制02_编程》中录制好的PCM文件，测试一下是否录制成功。 播放PCM需要指定相关参数： ar：采样率 ac：声道数 f：采样格式 s16le：PCM signed 16-bit little-endian 更多PCM的采样格式可以使用命令查看 Windows：ffmpeg -formats | findstr PCM Mac：ffmpeg -formats | grep PCM ffplay -ar 44100 -ac 2
Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理
yc1425869600的博客
07-08 7242
js\jq做Video视频播放等功能
html-video：计算视频是否完整播放 / 计算视频完播率
snowball的博客
11-29 2060
我们把duration按照一定间隔划分成多个区间（比如10s一个区间），然后我们计算是否每个区间都有上报的记录（至少有一次），整体达到90%，我们认为是完整播放。如果可以是视频播放完毕 / 离开 / 刷新页面 / 小程序的退出 等时候上报，那么上报一次就可以了。比如1分钟的视频，10秒上报一次，整个观看的过程都能记录下来，我们甚至能和用户一模一样的观看一遍。如果把观看过程，通过上报的数据记录在“平滑折线图”中。y轴是上报记录，currentTime。如果是有来回的折线就是有拖动进度条。
JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理
luminous_you的博客
09-14 3832
在日常应用场景中，可能会遇到这么一个情况，需要判断用户是否完整的观看完了一部视频，在这个场景中，和视频相关的事件大体涉及到几个部分，获取视频长度，视频开始播放，暂停播放和播放结束，下面来看下如何通过JavaScript来监听获取视频的这几种状态。 （1）html页面视频标签大体如下 <video id="video" controls="controls"> <source type="video/mp4" src="mi.mp4"> </video> （2）视频
怎样监听音频播放完毕？
渣渣砖
12-15 1336
非常简单 获取当前点击的音频的DOM元素myAudio; myAuto.addEventListener('ended',function(){ myAuto.pause(); alert('播放完毕'); }) 2:监听ended事件
【毕设问题10】Unity如何判断动画是否结束
m0_68557179的博客
02-26 1148
【代码】【毕设问题10】Unity如何判断动画是否结束。
判断视频是否播放完，并且弹出提示（还需要再收集些别的资料）
飞雪的博客
04-20 5743
HTML5中的audio对象有个属性为 ended，改属性是返回音频是否播放结束，是boolean类型的。 例如我自己写的一个判断： this.audioPlay=function(soundPath,callback){ $("#shapeAudio").attr("src",soundPath); var shapeAudio=document.getElementById("shap
使用HTML5在网页中嵌入音频和视频播放的基本方法
11-21
- `autoplay`: 视频或音频加载完毕后立即播放。 - `controls`: 显示播放控制（播放/暂停按钮，音量控制等）。 - `loop`: 视频或音频播放结束后自动循环。 - `preload`: 指定预加载策略，如 'auto'（加载所有数据）、...
animaction，判断动画执行结束，js添加动画的@keyframes
Cat_LIKE_Mouse的博客
04-18 725
var anim = document.querySelector('div') anim.addEventListener('animationend',function(e){ //动画执行完毕 执行 console.log(e)//当前动画的属性 console.log(e.animationName) //当前动画的名字； }) js添加动画的@keyframes var style = document.styleSheets[0]; style.inse..
video播放和监听结束
YuT_ian的博客
10-30 6231
开始播放 var video = document.getElementById("shiping-logo-vide"); video.play(); 暂停播放 var video = document.getElementById("shiping-logo-vide"); video.pause(); //暂停控制 监听播放结束 var elevideo = document.getElementById("video"); elevideo.addEventLi
js监听audio音频播放完毕后想做的事件处理
weixin_42014928的博客
05-09 2769
<audio src="static/audio2/play1.mp3" id="audio" controls="true" autoplay="true"> var audio = document.getElementById("audio"); audio.loop = false; audio.addEventListener('ended', function () { alert('播音结束'); }, false); ...
【前端】web移动端进行监控是否完播 | 视频完播率设计
最新发布
CTRA®王大大技术中心
05-27 1304
【前端】web移动端进行监控是否完播 | 视频完播率设计
音乐播放进度的监听
qq_44280408的博客
03-03 981
功能：设置监听器，持续时间返回当前进度和进度的百分比。 progress代表当前进度，position代表进度百分比 在MainActivity中： public class MainActivity extends BaseActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onC...
【微信小程序开发（八）】音频背景音乐播放问题汇总
谁说学美术将来只能卖画了，我也有自己的梦想。
08-08 2076
播放结束触发onEnded方法 一旦结束，则 小程序将wx.$globalData.backgroundAudioManager.src立即变为空字符串。在播放控制时间进度的代码中添加如下判断。
html中怎么判断视频结束,html5返回音频/视频是否已结束的属性ended
weixin_39952800的博客
06-05 3620
实例检查视频播放是否已结束：myVid=document.getElementById("video1");alert(myVid.ended);定义和用法ended 属性返回音频/视频是否已结束。如果播放位置位于音频/视频的结尾时，则音频/视频已结束。浏览器支持所有主流浏览器都支持 ended 属性。注释：Internet Explorer 8 或更早的浏览器不支持该属性。语法audio|vid...
video 标签 监听播放、暂停、结束等事件
热门推荐
c_qianxia5040的博客
01-30 1万+
<video id="video" controls="controls"> <source type="video/mp4" src="xxx.mp4"> </video> 获取视频总时长 var elevideo = document.getElementById("video"); elevideo.addEventListener('loadedmetadata', function () { //加载数据 //视频的总长度
Vue-ondurationchange(监听歌曲是否已经加载完成)
lihui61357457的博客
03-19 988
详情可见 问题：切换歌曲的时候歌曲时间有时候不会修改为正确的时间，那是因为 歌曲还未加载完成，只有歌曲加载完成之后才能获取到歌曲的总时长 注意点: 在iOS中系统不会自动加载歌曲, 所以oncanplay不会自动执行 解决方案: 如何监听iOS中Audio的歌曲是否已经准备好了, 通过ondurationchange 事件来监听 ondurationchange事件什么时候执行: 当歌曲加载完成之后执行, 因为只有 歌曲加载完成之后才能获取到歌曲的总时长
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值