JS如何通过视频链接获取视频时长

 更新时间:2024年06月21日 10:32:16   作者:Eli-sun  
这篇文章主要介绍了JS如何通过视频链接获取视频时长,这个函数用提供的URL创建一个新的Video元素,并在loadedmetadata事件被触发时解析一个带有视频持续时间的Promise,感兴趣的朋友跟随小编一起看看吧

js通过视频链接获取视频时长

这个函数用提供的URL创建一个新的Video元素,并在loadedmetadata事件被触发时解析一个带有视频持续时间的Promise。它还处理可能发生的任何错误。

注意,Video元素的duration属性是以秒为单位的,因此如果需要,您可能希望将其转换为更易于阅读的格式。

function getVideoDuration(url) {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.src = url;
    video.addEventListener('loadedmetadata', () => {
      resolve(video.duration);
      video.remove();
    });
    video.addEventListener('error', () => {
      resolve(null);
      video.remove();
    });
    document.body.appendChild(video);
  });
}
// Example usage
const videoUrl = 'https://www.example.com/video.mp4';
getVideoDuration(videoUrl)
  .then((duration) => {
    if (duration) {
      console.log('Video duration:', duration);
    } else {
      console.log('Failed to get video duration');
    }
  });

JS--获取上传视频文件的时长(秒)

代码基于ng-zorro组件,适当参考哈:

 beforeVideoUpload = (file: File) => {
    return new Observable((observer: Observer<boolean>) => {
      // 判断文件类型
      const isVideoFile = /video\/(wmv|asf|asx|rm|rmvb|mpg|mpeg|mpe|3gp|mov|mp4|m4v|avi|dat|mkv|flv|vob)$/.test(file.type);
      console.log('是否为视频类型:', isVideoFile);
      // 获取视频时长
      const url = URL.createObjectURL(file);
      const audioElement = new Audio(url);
      let videoSeconds;
      audioElement.addEventListener('loadedmetadata', (_event) => {
        videoSeconds = Math.floor(audioElement.duration);
        console.log('视频时长为', videoSeconds);
        observer.next(true);
        observer.complete();
      });
    });
  };

到此这篇关于JS如何通过视频链接获取视频时长的文章就介绍到这了,更多相关js获取视频时长内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Js base64 加密解密介绍

    Js base64 加密解密介绍

    想必大家对base64并不陌生吧,在本文将为大家介绍下Js中的base64加密解密过程,感兴趣的朋友不要错过
    2013-10-10
  • document.forms[].submit()使用介绍

    document.forms[].submit()使用介绍

    这篇文章主要介绍了document.forms[].submit()使用,需要的朋友可以参考下
    2014-02-02
  • JavaScript实现简易登录注册页面

    JavaScript实现简易登录注册页面

    这篇文章主要为大家详细介绍了JavaScript实现简易登录注册页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下<BR>
    2022-01-01
  • 纯JavaScript基于notie.js插件实现消息提示特效

    纯JavaScript基于notie.js插件实现消息提示特效

    这篇文章主要介绍了纯JavaScript基于notie.js插件实现消息提示特效,可以制作Alert提示框,确认框和带输入的消息框,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 基于JS编写一个看字说颜色小游戏

    基于JS编写一个看字说颜色小游戏

    这篇文章主要为大家分享了一个看字说颜色的小游戏,游戏是利用JS语言编写实现的,文中的示例代码讲解详细,感兴趣的小伙伴可以学习一下
    2022-04-04
  • JS实现滚动触底的思路与代码(附PC端滚动分页加载数据)

    JS实现滚动触底的思路与代码(附PC端滚动分页加载数据)

    Javascript实现当页面滚动到底部时触发加载事件,可以通过监听窗口的滚动事件,同时判断当前滚动条的位置和文档总高度来实现该功能,这篇文章主要给大家介绍了关于JS实现滚动触底的思路与代码,文中还附PC端滚动分页加载数据,需要的朋友可以参考下
    2024-06-06
  • JavaScript中的细节分析

    JavaScript中的细节分析

    高山登不上,不是因为体力不支,只因鞋里一粒。学习也是如此,因而有必要把JavaScript中常见的和与其它语言不同的那些细节学习一下
    2012-06-06
  • Javascript 模拟mvc实现点餐程序案例详解

    Javascript 模拟mvc实现点餐程序案例详解

    这篇文章主要介绍了Javascript 模拟mvc实现点餐程序案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • javascript触发模拟鼠标点击事件

    javascript触发模拟鼠标点击事件

    这篇文章主要介绍了javascript触发模拟鼠标点击事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06

最新评论