如何获取oss视频资源的时长

在仅使用OSS存储视频时,由于OSS不提供直接获取视频时长的功能,本文介绍了一种通过Vue-video-player播放器自动获取上传至OSS视频时长的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:目前是在只购买了OSS的情况下,进行存储视频并获取视频时长。并没有购买视频点播哦!视频点播是额外收费的

前言:   现在上传至oss的视频不支持获取视频时长,非常麻烦。当然笔者也并不是标题党。主要是说明一下走过的坑和填坑

一开始通过多种方式想去获取,但结果发现其实oss本身不会对文件本身进行分析和查看

可看官网给出的答案:oss视频基本信息获取建议->阿里云 - 聆听平台

目前在个人项目里通过vue(vue+elemnt-ui)直传视频到oss,获取不到视频的时长数据,但是在之后的业务中,我们又必须需要使用到视频时长。

解决方式:

我使用vue-video-player视频播放器。在后台上传视频成功后,跳出dialog,并且在这个dialog中自动播放上传视频。

而在vue-vidoe-player的播放事件里,可以获取到视频时长。

笔者认为,目前想要获取到oss视频时长,只能通过外部手段。不管你用的是什么语言.可以通过不同的视频播放器,通过一定的操作.自动获取视频时长

纯手打,思路不清晰或者其他不妥的方面请指正

### 如何用JavaScript从OSS存储的视频文件中提取或操作视频帧 要实现从OSS存储中的视频文件提取或操作视频帧的功能,可以通过以下方式完成: #### 1. 获取OSS上的视频资源 首先需要通过阿里云OSS SDK或其他HTTP请求方法获取存储在OSS上的视频文件链接。通常情况下,可以直接访问公开读权限的OSS对象URL或者通过签名URL下载受保护的视频文件[^2]。 ```javascript // 假设已获得OSS上某个视频文件的安全临时访问地址 const videoUrl = 'https://your-bucket-name.oss-region.aliyuncs.com/your-video-file.mp4'; ``` #### 2. 加载并解析视频数据 利用HTML5 `<video>` 元素加载远程视频流,并将其作为Canvas绘图上下文的一部分进行处理。这一步骤允许开发者捕获特定时间点的画面帧。 ```html <video id="myVideo" controls style="display:none;"> <source src="${videoUrl}" type="video/mp4"> </video> <button onclick="captureFrame()">Capture Frame</button> <div id="frameContainer"></div> ``` #### 3. 实现视频帧捕捉逻辑 编写一段脚本来定义`captureFrame()`函数的行为模式——即当点击按钮时调用该功能以保存当前播放位置的一张静态图像副本至页面指定区域。 ```javascript function captureFrame() { const videoElement = document.getElementById('myVideo'); const canvas = document.createElement('canvas'); // 创建一个新的画布实例 let ctx; try { if (!videoElement || !videoElement.videoWidth) throw new Error("No valid video source found."); canvas.width = videoElement.videoWidth; canvas.height = videoElement.videoHeight; ctx = canvas.getContext('2d'); if (ctx === null) throw new Error("Failed to get CanvasRenderingContext2D"); // 将视频画面绘制到画布上 ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); // 转换为Base64编码的数据URI形式 const frameDataUri = canvas.toDataURL('image/png'); displayCapturedImage(frameDataUri); } catch(err){ console.error(`Error during capturing process: ${err.message}`); } } function displayCapturedImage(dataUri){ const containerDiv = document.querySelector('#frameContainer'); while(containerDiv.firstChild){ containerDiv.removeChild(containerDiv.lastChild); } const imgTag = document.createElement('img'); imgTag.src = dataUri; containerDiv.appendChild(imgTag); } ``` 上述代码片段展示了如何基于用户交互事件动态生成一张代表原始媒体内容瞬间状态的新图片元素[^4]。 #### 4. 高级应用案例:批量抽取多帧 如果目标是从整个影片长度范围内均匀选取若干代表性样本,则需进一步扩展算法设计思路,在循环迭代过程中调整seekTime参数值从而达到目的。 注意这里仅作理论说明并未给出具体实现细节;实际开发工作中还需考虑性能优化等问题以免因频繁DOM更新造成界面卡顿现象发生。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值