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获取视频时长内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Electron应用显示隐藏时展示动画效果实例

    Electron应用显示隐藏时展示动画效果实例

    最近使用electron实现一个简单的功能,下面这篇文章主要给大家介绍了关于Electron应用显示隐藏时展示动画效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • JS实现弹出下载对话框及常见文件类型的下载

    JS实现弹出下载对话框及常见文件类型的下载

    JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能
    2017-07-07
  • js 判断一个数字是不是2的n次方幂的实例

    js 判断一个数字是不是2的n次方幂的实例

    下面小编就为大家分享一篇js 判断一个数字是不是2的n次方幂的实例,具有很好的参考价值,希望对大家有所帮助
    2017-11-11
  • uniapp蓝牙连接的通用步骤

    uniapp蓝牙连接的通用步骤

    这篇文章主要给大家介绍了关于uniapp蓝牙连接的通用步骤,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • 微信小程序仿知乎实现评论留言功能

    微信小程序仿知乎实现评论留言功能

    这篇文章主要为大家详细介绍了微信小程序仿知乎实现评论留言功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js replace() 文本替换你所不知的

    js replace() 文本替换你所不知的

    今天看了一个函数,功能是把形如word-word的字符串转化为wordWord
    2010-03-03
  • JS+CSS实现炫酷算盘时钟效果

    JS+CSS实现炫酷算盘时钟效果

    这篇文章主要为大家详细介绍了如何使用JavaScript和CSS实现炫酷算盘时钟效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • layui动态设置单选按钮选中效果实例

    layui动态设置单选按钮选中效果实例

    最近在使用layui前端框架,在使用单选按钮、下拉菜单select、checkbox等控件的时候,往往遇到一些初始化的东西,下面这篇文章主要给大家介绍了关于layui动态设置单选按钮选中效果的相关资料,需要的朋友可以参考下
    2023-06-06
  • javascript 改变网页加载的CSS

    javascript 改变网页加载的CSS

    javascript 改变网页加载的CSS主要通过动态响应select触发的选项变化控制link标签加载的css,以实现不依赖cookie控制的页面css样式动态加载功能,需要的朋友可以参考一下
    2007-12-12
  • 原生JS实现留言板功能

    原生JS实现留言板功能

    这篇文章主要为大家详细介绍了原生JS实现留言板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论