首页 > 其他分享 >JS如何通过视频链接获取视频时长

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

时间:2024-08-31 18:27:22浏览次数:9  
标签:视频 const JS 获取 video duration 链接

在JavaScript中,获取视频链接的视频时长通常涉及到创建一个<video>元素,将视频链接设置为该元素的src属性,然后监听视频的loadedmetadata事件,该事件在视频的元数据(包括时长)加载完成后触发。以下是一个基本的示例:

// 视频链接
const videoUrl = '你的视频链接';

// 创建一个video元素
const video = document.createElement('video');
video.src = videoUrl;

// 监听元数据加载完成的事件
video.addEventListener('loadedmetadata', function() {
  // 获取视频时长
  const duration = video.duration;
  console.log('视频时长为:', duration, '秒');
});

// 为了确保事件能够被触发,可以将video元素暂时添加到DOM中
document.body.appendChild(video);

请注意,出于安全和隐私的原因,一些浏览器可能会限制跨域视频的元数据访问。如果视频服务器没有正确设置CORS(跨源资源共享)策略,那么在尝试获取时长时可能会遇到问题。

此外,如果你在服务器端使用Node.js,并且想要获取视频时长,你可能需要使用像fluent-ffmpeg这样的库来处理视频文件。

如果你需要在客户端获取视频时长,并且视频链接是在线的,上述方法是可行的。但如果视频链接是本地的或者你无法直接访问,那么你可能需要使用服务器端的解决方案。

在实际应用中,你可能还需要考虑错误处理和视频加载失败的情况,以及在不需要视频元素时从DOM中移除它以避免内存泄漏。

标签:视频,const,JS,获取,video,duration,链接
From: https://www.cnblogs.com/suducn/p/18390572

相关文章

  • 分享一个js 抢红包随机算法,其他语言思路也一样
    直接调用这个方法就行传递q(金额)和r(人数就行)保证人均最少一分钱当剩余金额大于80%的时候,会在金额20%的区间内取大红包随机分配;基础分配规则为,按照每人可以随机5次的要求,得出每次随机的金额,随机分给其中一人functionfen(q,r){//q=红包金额单位元,最小0.01r=分配人数if......
  • 动态链接库的生成和使用(二)
    1、编写源文件和头文件Demo目录下创建testso文件夹,在下面创建test.cpp、test.h和Makefile文件test.cpp:#include<stdio.h>#include<stdlib.h>extern"C"doublecalc_pi(){ doublex=0; doubley=0; doublepi=0; intnum=0; intiter=0; constinttry_t......
  • Vue期末考试速成复习指南附编程题(js开发基础+路由+Pinia)
    前文:本文参考书籍《Vue.js前端开发实战(第二版)》--黑马程序员/编著重点在于本科期末速成和0基础入门目录:一.初识Vue1.包管理工具:npmyarn2.创建Vue项目二.js开发基础1.什么是单文件组件?2.单文件组件基本结构3.切换页面显示组件3.数据绑定与输出4.Vue引入Html页面5.......
  • 【华为OD机试真题E卷】31、最大社交距离 | 机试真题+思路参考+代码分析(E卷复用)(C语言、
    文章目录一、题目......
  • [luoguP4051/JSOI2007] 字符加密
    题意给定字符串\(s\),输出将\(s\)的所有循环同构的字符串排序后,每个字符串的末尾的字符。sol因为要对循环同构的字符串排序,因此我们可以将\(s\)复制一遍,拼在后面,计算\(sa\),满足\(sa_i\len\)的所有元素的相对位置即为排序后字符串的相对位置,输出即可\(sa\)的计算详见......
  • 040.CI4框架CodeIgniter,使用Response实现前后端分离并返回JSON
    01、BaseController.php代码如下:<?phpnamespaceApp\Controllers;useCodeIgniter\Controller;useCodeIgniter\HTTP\CLIRequest;useCodeIgniter\API\ResponseTrait;useCodeIgniter\HTTP\IncomingRequest;useCodeIgniter\HTTP\RequestInterface;useCo......
  • js 数组的常用方法:在头部插入,删除,尾部插入,删除
    arr.push(value),在数组的末尾添加一个或多个元素,并返回数组的新长度。arr.pop()删除索引值最大的元素,即删除数组末尾的元素,并返回被删除的元素。unshift(value)在数组的头部添加一个或多个元素,并返回数组的新长度shift()删除索引为0的元素,并返回删除的元素splice()方法会修......
  • JSP简述
    JSPJSP的本质是一个Servlet,JSP主要负责与用户进行交互,将最终的界面呈现给用户,HTML+JS+CSS+JAVA的混合文件当服务器接收到一个后缀是JSP的请求时,将该请求交给JSP引擎去处理,每一个JSP页面第一次被访问时,JSP引擎会将他翻译成Servlet文件,由Web容器调用servlet完成响应。从开发的......
  • JS 扩展运算符(...)
    平时在对接服务端的数据时,后端返回的数据格式总不尽相同,因此前端总是需要自己再把数据加工处理成自己想要的格式最近在表格中渲染数据数据时就遇到了部分渲染不出来的情况,后来发现是对层数据,不能直接渲染的原因。举个例子,一个数组或一个对象里面包含了另一个对象,那在第一层的属......
  • 【精品毕设推荐】基于SSM+jsp的图书管理系统设计与实现
    点击下载原文及代码,可辅助在本地配置运行摘 要现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本图书管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软......