获取video视频播放长度

最新推荐文章于 2024-09-10 15:43:56 发布

ur home

最新推荐文章于 2024-09-10 15:43:56 发布

阅读量1.6k

点赞数 2

分类专栏： JavaScript vue2.x 文章标签： javascript

本文链接：https://blog.csdn.net/wz_coming/article/details/115717125

版权

vue2.x 同时被 2 个专栏收录

33 篇文章 4 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

本文探讨了两种方法：一是使用JavaScript动态获取HTML5 Video元素的视频时长，二是通过Vue组件实现文件上传，重点在于音频文件时长的计算。展示了如何利用定时器和匿名函数来获取视频时长，并在前端上传文件时处理预加载和上传成功回调。

摘要由CSDN通过智能技术生成

方法1

<video :src="videoUrl" controls preload="auto" id="videoPlayer"></video>
<p>{{ videoDuration }}<p>

private videoDuration: any = ''
setTimeout(() => {
    this.videoDuration = document.getElementId('videoPlayer').duration
},800)

方法2

<el-upload class="upload-demo" :action="actionUrl" 
:show-file-list="false" 
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
    <button class="ce-button not-hover primary">
        <i class="ce-icon_upload"></i>
        <span>重新上传</span>
    </button>
</el-upload>

传入参数为视频文件对象，js的代码如下：

beforeAvatarUpload(file) { {
  let url = URL.createObjectURL(file);
  let audioElement = new Audio(url);
  let result;
  audioElement.addEventListener("loadedmetadata", () => {
    // 视频时长值的获取要等到这个匿名函数执行完毕才产生
    result = audioElement.duration; //得到时长为秒，小数，182.36
  });
}