video阿里云视频封面获取（精确的每一帧）

最新推荐文章于 2023-09-19 14:08:18 发布
最新推荐文章于 2023-09-19 14:08:18 发布
阅读量905 收藏 1
点赞数
分类专栏： 随身记 JS问题 video 文章标签： html5 前端 json html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lei_Xue/article/details/119562099
版权
随身记 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
JS问题
10 篇文章 0 订阅
订阅专栏
video
1 篇文章 0 订阅
订阅专栏

 废话不多说直接上代码

<video @contextmenu.prevent controlslist="nodownload"  preload="" controls=""
    :src="moveLoading" 
    :poster="moveLoading+'?x-oss-process=video/snapshot,t_40001,m_fast'" >
</video>

moveLoading为视频链接  链接不能带参数

例如 ：https://outin-79ab1f10e02911eabaf900163e1c9256.oss-cn-shanghai.aliyuncs.com/0a7152a468f4484f9ed6316de5b08239/e03415173e5a4d958e8a299a725f995c-c8d96cd61a91d326ac84f973e8d70e3b-sd.mp4

poster封面参数直接再视频 url 后面拼接上 ?x-oss-process=video/snapshot,t_40001,m_fast

详细信息可以查看文档（上链接）

https://help.aliyun.com/document_detail/183902.htm?spm=a2c4g.11186623.2.8.48d74981kQkr3T#section-tx1-qtj-ar8

Lei丶大叔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
视频上传阿里云 获取封面
05-13
视频上传阿里云 获取封面
上传视频 获取视频第一帧 做为封面 完整代码+注释 前端js
09-20
上传视频时获取视频第一帧作为封面 完整代码+注释 使用方法：直接将html文件在浏览器打开即可。 使用到的技术：原生Dom操作 + video标签及canplay监听 + cavas绘制 + base64转为Blob + Blob转为FormData
阿里云视频转码与获取视频封面图
Java小菜鸟
04-01 1638
1.视频封面图： 截取视频视频首帧为封面图，传入视频存储地址和截取后存储封面地址 public String snapshotVideo(String inputObject, String outputObject) throws ServerException, com.aliyuncs.exceptions.ClientException { DefaultProfile.addEndpoint(regionId, regionId, "Mts", "mts." + region
阿里云视频服务之点播服务
weixin_45031570的博客
05-23 622
找到视频点播服务 https://www.aliyun.com/product/vod 没购买的购买，买了的进入管理控制台。 同时打开sdk文档 https://help.aliyun.com/document_detail/94311.html 购买资源管理包 查看skd文档 设置媒体处理配置 3.1 设置转码模板组->添加转码模板组->添加转码模板组->封装格式hls->清晰度(原画转载)->高级参数->视频加密 （加密视频，不允许别人下载），记住（I
视频上传阿里云,如何获取视频的某一帧作为封面??
最新发布
sun
09-19 384
/阿里云oss截取视频中某一帧作为封面。
上传视频后前端本地生成视频封面的办法
weixin_43614380的博客
06-08 1051
代码用TS编写,思路：File=>videoElement=>Canvas=>URL ①把file转为videoElement export const fileToVideoElement = (file: File) => new Promise<HTMLVideoElement>((resolve) => { const video = document.createElement('video'); video.setAttribute('cross
video-cover:视频获取首帧图片
05-01
video-cover 视频获取首帧图片
php自动获取文件夹内视频文件批量生成第一帧截图
05-29
video.php，自动读取所设定文件夹下所有视频文件，并批量生成第一帧截图，并压缩图片等方法封装。在平常做视频处理业务过程中封装的一些好用的方法，文件中每个方法都有做说明，简单易懂，现在共享出来方便大家使用
将视频文件转换为一帧帧的图片
03-18
这是一个可以将视频文件转换成一帧一帧图片的工具，方便使用。直接在transVideoToImage.bat文件中修改待转换的视频名称和路径等参数，保存后直接点击transVideoToImage.bat文件运行即可。
阿里云视频点播上传客户端（vod aliyun video client）
09-23
阿里云视频点播上传客户端，官方发布的。aliyun_video_client_1.2.3_x64_1203.exe。 今天在阿里云控制台和帮助文档里怎么也找不到，只好搜索全硬盘去找，找了半小时终于找到了。扔上来备用。 使用方法参考阿里云官方...
oss取视频封面 以及图片缩略图
小白菜
12-05 1462
取视频封面第一帧：url后面拼上这一段即可 图片缩略图：
阿里云视频播放器
实践求真知
12-13 5797
一 视频播放器 参考文档：https://help.aliyun.com/document_detail/125570.html?spm=a2c4g.11186623.6.1083.1c53448blUNuv5 1 视频播放器介绍 阿里云播放器SDK（ApsaraVideo Player SDK）是阿里视频服务的重要一环，除了支持点播和直播的基础播放功能外，深度融合视频云业务，如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。 2 集成视
阿里云Aliplayer高级功能介绍(一)：视频截图
weixin_34121304的博客
01-07 534
基本介绍 H5 Video是不提供截图的API的， 视频截图需要借助Canvas，通过Canvas提供的drawImage方法，把Video的当前画面渲染到画布上， 最终通过toDataURL方法可以导出图片的base64编码，基本就完成了图片截图的功能。 功能实现 Canvas接口介绍 drawImage接口 在画布上绘制图像、画布或视频，也能够...
阿里云OSS图片生成缩略图和获取视频的封面方法
wuxing164的博客
11-18 5920
?x-oss-process=image/resize,m_fill,w_200,quality,q_60 在图片的地址后面加上以上代码，可以生成缩略图 resize调整大小 quality清晰度0-100，数字越大，清晰度越高 w_200,h_540，图片的宽高大小 快速获取视频的封面方法介绍 ?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast t_ 后面配置截取多少毫秒的视频对应的画面 后续的参数和图...
关于Vue阿里云播放视频
qq_16495187的博客
05-21 1464
首先,新建一个组件，名字随便取 我取的是VueAliplayer.vue 最后在别的组件引入这个组件就行,需要记住下面几个问题 1.播放栏的一些按钮是下面的代码（比如暂停,全屏） skinLayout: { type: Array, default: function () { return [ { name: "bigPlayButton", align: "blabs", x: 30, y: 80 }, {
阿里云视频点播使用
。。。。
06-30 5587
功能介绍 视频点播（ApsaraVideo VoD，简称VoD）是集视频采集、编辑、上传、媒体资源管理、自动化转码处理（窄带高清TM）、视频审核分析、分发加速于一体的一站式音视频点播解决方案。 应用场景 音视频网站：无论是初创视频服务企业，还是已拥有海量视频资源，可定制化的点播服务帮助客户快速搭建拥有极致观看体验、安全可靠的视频点播应用。 短视频：集音视频拍摄、特效编辑、本地转码、高速上传、自动化云端转码、媒体资源管理、分发加速、播放于一体的完整短视频解决方案。目前已帮助1000+APP快速实现手机短视
阿里云播放器Aliplayer-WEB走坑中
热门推荐
xiao_xiao_meng的博客
06-04 3万+
最近在做直播，用得阿里的地址推流，然后PC 端播放器的接口文档写的，反正我是看不懂， 各种猜测，各种实验，方便小白们研究脱坑 我先写我的代码 然后加备注截至 6.4日我这边写了 快捷键 【 空格暂停播放，快进/快退  音量大小】 截图【事件自己写】 【还不知道直播能不能截图】官方简介https://help.aliyun.com/document_detail/51991.html?spm=517...
[iOS]上传到阿里云OSS的图片处理以及视频获取第一帧图片
Gamin
01-23 7358
demo:https://download.csdn.net/download/u012881779/10933922 TO：YYWebImage 之所以有处理图片这需求，是因为我们后端返回的存在阿里云上的图片是原图，测试人员反映列表中图片加载很缓慢。 上传到阿里云OSS的图片，阿里云提供了一些功能。这里我只用了图片缩放和图片旋转。 缩放和旋转也可以同时处理，如："?x-oss-process=i...
阿里云Aliplayer视频播放（web播放器）
huhuhuja
08-25 6437
1.官方文档https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV 2.阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术 Flash Html5 3.在index.html中引入： <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/de..
vue 获取video视频第一帧做为封面图
03-29
你可以通过以下代码获取video视频第一帧作为封面图： ```html <template> <div> <video ref="video" @loadedmetadata="onLoadedMetadata"> <source :src="videoSrc" type="video/mp4"> </video> <img :src="coverSrc" alt="video cover"> </div> </template> <script> export default { data() { return { videoSrc: 'your video source', coverSrc: '' } }, methods: { onLoadedMetadata() { const video = this.$refs.video const canvas = document.createElement('canvas') canvas.width = video.videoWidth canvas.height = video.videoHeight canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height) this.coverSrc = canvas.toDataURL() } } } </script> ``` 在这个代码中，我们首先引入了一个video标签和一个img标签。video标签用于展示视频，img标签用于展示封面图。当video标签的loadedmetadata事件触发时，我们创建了一个canvas标签，然后将video标签的第一帧画到canvas上。最后，我们将canvas转换为DataURL，并将其设置为img标签的src属性，从而展示第一帧作为封面图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值