vue获取video视频时长和当前播放进度时间，解决出现NaN或者undefined的问题

最新推荐文章于 2024-06-11 15:13:58 发布
原创 最新推荐文章于 2024-06-11 15:13:58 发布 · 7.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#音视频

当视频准备好播放，即canplay事件触发时，应使用JavaScript处理，避免在生命周期方法中导致错误。此事件指示视频数据已加载到缓冲区，可以开始播放，但不保证能播放至结束。

video标签添加canplay事件

canplay：视频准备就绪可以播放的时候触发的事件

这里注意的是：video 这个方法用js的方法写在外面不要写在生命周期之类的里面，不然就会有报错nan或者undefined

 

 

hyswl666
关注
vue3获取视频时长、码率、格式等视频详细信息
sinat_40693969的博客
09-05 2509
我们在使用vue3上传视频需要视频的帧数等信息的时候，上传组件无法直接读取帧数等信息，我们可以通过mediainfo.js来获取视频的帧率、总帧数和视频的总时长
vue实时监测video视屏播放时长和总时长
wei80231996的博客
03-10 8027
1.html代码 <div class="top_vdio"> <video id="video" :src="medioUrl" controls="controls"></video>//medioUrl视频地址 </div> 2.js代码 //监听播放时间 var video = document.getElementById("video"); //使用事件监听方式捕捉事件 video.addEven
通过一个video获取所有视频时长
weixin_44133966的博客
06-11 1534
标签，并且你有权限访问所有视频文件。此外，由于浏览器的同源策略，你可能需要确保视频文件的服务器支持跨域资源共享（CORS）。如果视频文件不在同一个域上，你可能需要服务器端的支持来设置适当的CORS头部。在JavaScript中，如果你想要获取一个视频数组中所有视频的时长，但是页面上只有一个。标签，你可能需要使用JavaScript来动态地更改这个标签的。属性来加载不同的视频文件，并在每次加载完成后获取视频的时长。请注意，这个示例代码假设你的HTML页面中已经有一个。
vue3 使用video-player 监听事件获取当前播放时间（全网首发）
qq_53722480的博客
03-14 2978
完整代码，粘贴复制即可获取到当前播放进度。
vue 获取视频时长的实例代码
10-16
主要介绍了vue 获取视频时长的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
在vue项目中获取的duration属性值为NaN或者undefined.md
11-24
在创建一个vue项目时，获取<video>标签中duration属性值为空或者未定义的情况，针对以上可能出现的两种情况，本文给出作者本人的一些实践成功后的方法。
Vue项目中解决<video>标签duration获取异常问题
"在Vue项目中，当尝试获取HTML5 `<video>`标签的`duration`属性时，可能会遇到返回值为NaN或undefined的问题。本文主要探讨这个问题并提供解决方案。" 在Vue.js应用中，我们经常需要操作HTML5的多媒体元素，如`...
video 获取当前时间
03-22
### 获取视频播放器中的当前播放时间 在开发基于视频的应用程序时，获取视频的当前播放时间是一个常见的需求。以下是几种常见技术栈下实现此功能的方式。 #### Android 中使用 `VideoView` 和 `MediaController` ...
vedio怎么知道视频总时长？
最新发布
09-16
为避免出现 `NaN` 或 `undefined` 的问题，建议将获取时长的代码写在外部函数中，而不是生命周期钩子内。示例代码如下： ```vue <video id="myvideo" src="your-video.mp4"></video> var getVideoDuration = ()...
获取video播放时长
weixin_46937852的博客
08-20 1251
总结，记录 $('.video').addEventListener("timeupdate", function () { localStorage.setItem('currentTime', this.currentTime) }, false);
获取video视频播放长度
ur home
04-15 1798
方法1 <video :src="videoUrl" controls preload="auto" id="videoPlayer"></video> <p>{{ videoDuration }}<p> private videoDuration: any = '' setTimeout(() => { this.videoDuration = document.getElementId('videoPlayer').duration.
vue3VideoPlay 如何获取视频进度
PANGZIAAA的博客
10-09 1105
通过ev.target.duration获取总时长（duration这里要点开ev仔细去找对应名称，一开始看了几遍没发现…时长更新函数，通过ev.target.currentTime获取当前时间，最好parseInt取整一下。加载页面时候创建定时任务setInterval，把当前进度传给后台就ok了,离开记得销毁定时器。然后把(currentTime/duration)就是当前视频进度拉。然后就是获取资源总时长。
vue获取当前时间（与演出时间做出状态比较）
B13362260109的博客
07-18 164
用vue中：class方法结合if else 改变时间段的颜色（状态）如果节目正在当前时间段进行，那么时间字段为红色。用replace（）方法去除时间段内的符号（:）如果节目未开始，那么时间字段为默认黑色。如果节目已结束，那么时间字段为灰色。获取到数据内节目的开始与结束时间。用slice（）方法截取时间。
video 通过视频链接地址获取视频时长
努力飞起的菜鸟
04-15 1136
【代码】video 通过视频链接地址获取视频时长。
videojs获取视频播放进度和浏览时长
热门推荐
test_appletwo的博客
11-03 1万+
需求： 1：获取视频播放进度 2：获取用户浏览时长 实现注意事项 1：调用video.js video.css 2：视频播放时计时，停止、缓冲时、关闭网页时浏览时长计算停止，并将数据上传到服务器 html <!DOCTYPE html> <html lang="en"> <head> <title>Video.js | HTML5 Video Player</title> <link href="htt..
用vue-cli3+vue-video-player写了个高佣联盟推广网站
vhen2019的博客
04-20 437
安装 npm i --save-devvue-video-player main.js import VideoPlayer from 'vue-video-player' Vue.use(VideoPlayer) 组件中使用 <video-player class="video-player vjs-custom-skin" ref="videoPlayer"...
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 () { //加载数据 //视频的总长度
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值