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

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

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

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

<video id="myVideo" src="video.mp4">
了解本专栏 订阅专栏 解锁全文
远程兴起，前端音视频通话？学
斌擎科技
11-28 1319
看到前两篇文章都非常受欢迎，加起来有一千多赞了👍🏻 ，非常的开心！🤖继续加油！冲！我们在前两篇文章中大概讲解了 音视频媒体流的获取，处理，以及在上一篇文章中为了更直观的演示 WebRTC 建立点对点通信的过程，通过手动交换 sdp 来建 p2p 连接，实现了一个最简单的音视频通话，但在实际的应用场景中，我们几乎不可能会通过手动来交换 sdp ，因为这样会增加很多的工作量，也不方便，所以我们借助一个信令服务器来帮助我们实现自动建立连接的这个过程。ok，我们先来看一下我们需要监听的事件。
html-video：计算视频是否完整播放 / 计算视频完播率 / 还原播放轨迹
snow的博客
11-29 2902
我们把duration按照一定间隔划分成多个区间（比如10s一个区间），然后我们计算是否每个区间都有上报的记录（至少有一次），整体达到90%，我们认为是完整播放。如果可以是视频播放完毕 / 离开 / 刷新页面 / 小程序的退出 等时候上报，那么上报一次就可以了。比如1分钟的视频，10秒上报一次，整个观看的过程都能记录下来，我们甚至能和用户一模一样的观看一遍。如果把观看过程，通过上报的数据记录在“平滑折线图”中。y轴是上报记录，currentTime。如果是有来回的折线就是有拖动进度条。
【前端】web移动端进行监控是否完播 | 视频完播率设计
最新发布
CTRA®王大大技术中心
05-27 1751
【前端】web移动端进行监控是否完播 | 视频完播率设计
JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理
luminous_you的博客
09-14 4262
在日常应用场景中，可能会遇到这么一个情况，需要判断用户是否完整的观看完了一部视频，在这个场景中，和视频相关的事件大体涉及到几个部分，获取视频长度，视频开始播放，暂停播放和播放结束，下面来看下如何通过JavaScript来监听获取视频的这几种状态。 （1）html页面视频标签大体如下 <video id="video" controls="controls"> <source type="video/mp4" src="mi.mp4"> </video> （2）视频
怎样监听音频播放完毕？
渣渣砖
12-15 1498
非常简单 获取当前点击的音频的DOM元素myAudio; myAuto.addEventListener('ended',function(){ myAuto.pause(); alert('播放完毕'); }) 2:监听ended事件
js怎么判断音频链接是否能播放
vfjcgg的博客
05-13 671
【代码】js怎么判断音频链接是否能播放。
【毕设问题10】Unity如何判断动画是否结束
m0_68557179的博客
02-26 1548
【代码】【毕设问题10】Unity如何判断动画是否结束。
基于QT开发的MPlayer音视频播放器前端界面
此外，为了实时获取播放状态（如当前播放时间、总时长、是否播放完毕等），前端需要持续监听MPlayer输出的信息流。MPlayer在slave模式下会将状态信息以特定格式输出到stdout，QT程序可通过QProcess类捕获这些输出，...
判断视频是否播放完，并且弹出提示（还需要再收集些别的资料）
飞雪的博客
04-20 5913
HTML5中的audio对象有个属性为 ended，改属性是返回音频是否播放结束，是boolean类型的。 例如我自己写的一个判断： this.audioPlay=function(soundPath,callback){ $("#shapeAudio").attr("src",soundPath); var shapeAudio=document.getElementById("shap
animaction，判断动画执行结束，js添加动画的@keyframes
Cat_LIKE_Mouse的博客
04-18 807
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 6410
开始播放 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
Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理
超超在搬砖的博客
07-08 9250
js\jq做Video视频播放等功能
js监听audio音频播放完毕后想做的事件处理
weixin_42014928的博客
05-09 2969
<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); ...
js获得当前视频播放的状态
m0_68094390的博客
05-21 1万+
要获得视频播放的状态，可以使用HTML5的video对象，该对象包含了许多有用的属性和方法，可以方便地控制视频播放。示例1：判断视频是否处于暂停状态。示例2：判断视频是否已经播放完毕。示例3：获取当前视频播放的时间。示例4：获取视频总长度。示例5：播放和暂停视频。
音乐播放进度的监听
qq_44280408的博客
03-03 1104
功能：设置监听器，持续时间返回当前进度和进度的百分比。 progress代表当前进度，position代表进度百分比 在MainActivity中： public class MainActivity extends BaseActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onC...
【微信小程序开发（八）】音频背景音乐播放问题汇总
谁说学美术将来只能卖画了，我也有自己的梦想。
08-08 2354
播放结束触发onEnded方法 一旦结束，则 小程序将wx.$globalData.backgroundAudioManager.src立即变为空字符串。在播放控制时间进度的代码中添加如下判断。
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 () { //加载数据 //视频的总长度
JAVA记录媒体视频播放进度开发(转)
阿毛的博客
08-15 2292
项目需要做一个记录视频播放进度的功能，有以下几点需要着重注意：1.点击视频，播放到几小时几分几秒，下次同一个人点击进来依然是当前时间段2.当一个维度下有多个视频可以看，分开记录当前视频或者文档是否已经看完。比如学习维度下有两个视频，一个文档，文档或者视频看完，直接显示当前视频已看完，但学习维度还显示正在学习，除非当前维度下的所有视频或者文档全部显示为已学完。3.文档点击进入页面可以直接认定为已看完，视频看完必须要看完时长的三分之二，才能显示当前视频已看完。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值