微信小程序上传的视频显示封面 我是阿里云oss的实现

最新推荐文章于 2021-12-24 13:19:33 发布
最新推荐文章于 2021-12-24 13:19:33 发布
阅读量1.5k 收藏 3
点赞数 3
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/solocao/article/details/89840448
版权

我们一般用wx.chooseVideo拍摄视频或从手机相册中选视频，然后上传到后台存储空间。

但是给用户显示视频列表的时候，需要视频封面额。

阿里oss地址：https://help.aliyun.com/document_detail/64555.html?spm=5176.11065259.1996646101.searchclickresult.4d6a5fd8PwJyBq

其实只需要在视频地址后面加上如下的后缀，就可以获取视频内部帧图片，当作封面使用。

?x-oss-process=video/snapshot,t_1000,m_fast
?x-oss-process=video/snapshot,t_700,w_600,h_600,m_fast

当然，七牛云、腾讯云也有类似的api。

曹天骄
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
主要介绍了微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序选择视频，获取封面缩略图
qiqi_rock_real的博客
07-27 7210
使用微信小程序选择视频，且获取其封面使用微信小程序选择视频上传，且获取其封面背景名词参考效果图展示结束： 使用微信小程序选择视频上传，且获取其封面 背景 又一活儿，要从小程序里选择视频，上传之后呢，要展示其封面，点击封面要能播放视频。 经常看到网上好多人在说，小程序为什么没有缩略图？ 其实有可能是用错了小程序的api：注意： wx.chooseMedia：有缩略图返回 wx.chooseVideo：无缩略图返回 说两遍： wx.chooseMedia：有缩略图返回 wx.chooseVideo：无缩略图返回
小程序给视频加默认图片封面，点击播放视频并停止播放上一个视频
a_靖的博客
12-24 8925
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 实现的功能： 微信小程序视频组件添加图片封面, 点击图片播放视频, 点击下一个视频的封面图自动停止播放当前视频并播放点击的视频。 效果GIF图： 实现代码： WXML <view class='vv' wx:for='{{vedio_data}}' wx:key=''&gt...
微信小程序视频封面使用图片
12-29
小程序，poster属性无法使用，使用自定义图片代替该属性功能！
微信小程序阿里云OSS-sdk
08-16
阿里云OSS-sdk，大小536KB 微信小程序纯前端从阿里云OSS下载，可直接引用 文章地址：https://blog.csdn.net/qq_44695727/article/details/132154404
微信小程序上传图片到阿里云oss
09-27
本项目是关于如何将微信小程序中的图片上传至阿里云OSS的实践教程。 首先，我们需要理解微信小程序的生命周期和API。在小程序中，我们可以使用`wx.chooseImage` API来让用户选择图片，然后使用`wx.uploadFile` API...
微信小程序上传文件到阿里OSS教程
01-03
这里我们要在小程序后台配置上传域名（上面的域名是我自己的申请的，后台配置的是公司的的域名，使用的时候你们用一套东西即可）。 下图是bucket管理，这里可以新建文件的保存路径，域名管理。 （三）服务端签名直...
微信小程序上传图片到阿里云oss.zip
最新发布
01-09
将微信小程序与阿里云OSS结合，开发者可以方便地实现在小程序中上传、下载和管理用户生成的内容，如用户头像、商品图片或活动海报等。 在实现微信小程序上传图片到阿里云OSS的过程中，主要涉及以下几个关键技术点：...
微信小程序视频封面
sam的博客
04-23 663
视频封面 示例库 代码片段
微信小程序发布视频带封面图标题
yjdyyds的博客
12-24 1807
<view style="padding: 40rpx;"> <view class="userflex"> <view class="mylistname">视频标题:</view> <view class="userinp"> <input class="weui-input" placeholder="请输入视频标题" value="{{name}}" bindinput="name" /> .
微信小程序设置组件video视频封面
热门推荐
zimkeavin的博客
07-24 1万+
微信小程序的视频组件video是不带有封面的，就是如上图的黑乎乎一片。我们只能自己添加图片来设置封面。我的逻辑是在video上覆盖一张图片（图片和video大小及样式完全相等），并将视频的时间设置在右下角，方便用户知道这是视频，然后在点击该视频时隐藏掉图片，并开始播放 <image class='cover' src='{{item.cover}}' wx:if='{{show...
微信小程序给视频加图片封面且点击图片自动播放视频并停止播放上一个视频
qq_41241504的博客
11-13 4705
微信小程序给视频加图片封面且点击图片自动播放视频并停止播放上一个视频 &lt;view class='vv' wx:for='{{vedio_data}}' wx:key=''&gt; &lt;view class='block' style='margin-left:20rpx;'&gt; &lt;image src='/img/1.png' class='img1' style='margin...
微信短视频小程序——视频封面，视频缩略图
hotqin888的专栏
08-24 3629
源码在：https://gitee.com/AtlantisChina/WeChat-Video，readme里有网盘的视频链接，需要的注意观看。 文字学习在：https://www.cnblogs.com/bozzzhdz/p/9716826.html 显示根据文字，将代码放到自己项目里，后来发现有源码，那直接改源码了。 我这里主要的贡献就是找到了视频封面（视频缩略图）的做法。 thumbTempFilePath string 视频缩略图临时文件路径 https://develop
微信小程序-video黑屏了加封面
weixin_39116836的博客
07-31 9890
wxml页(Autoplay是否自动播放，poster是否显示视频封面，controls为true的前提下poster才有效,cover-image放的图片是网络图片，不是本地图片) <video id='myVideo' bindplay='play' Autoplay='{{liuliang}}' src="{{video[index].activity_video}}" poster...
微信小程序：video标签默认显示视频的第一帧作为封面
彭世瑜的博客
07-06 1万+
微信小程序：video标签默认显示视频的第一帧作为封面 <video src="video_url" controls="{{false}}" initial-time='0.01' muted autoplay object-fit="cover"></video> 参数 src 资源地址 controls： 显示播放控件 initial-time： 指定视频初始播放位置，设置为大于0的值，就会自动加载视频 au
微信小程序 - 最新详细实现 ＜video＞ 视频组件自定义封面及播放按钮，给 video 视频播放组件加上封面图、封面标题、封面描述文字、自定义的播放按钮、DIY 封面等（详细示例源码）
王佳斌
08-06 6963
微信小程序video封面，微信小程序video视频组件，微信小程序实现video封面图封面文字，微信小程序视频组件video怎么加封面图，微信小程序:video标签默认显示视频的第一帧作为封面，微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo，微信小程序 - 实现 视频组件自定义封面及播放按钮，给 video 视频播放组件加上封面图、封面标题、封面描述文字、自定义的播放按钮、DIY 封面等（详细示例源码）
微信小程序 video 视频 组件
java1234的博客
06-08 2417
完整微信小程序(Java后端) 技术贴目录清单页面（必看） 视频（v2.4.0 起支持同层渲染）。相关api：wx.createVideoContext 属性 类型 默认值 必填 说明 最低版本 src string 是 要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID（2.3.0） 1.0.0 duration number 否 指定视频时长 1.1.0 controls boolean true 否 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） 1.0.
微信小程序video默认不播放且显示封面
qq_40265402的博客
11-30 2507
微信小程序video默认不播放，不显示播放按钮且在controls="{{false}}"情况下显示封面 <video initial-time='0.01' src="{{item}}" controls="{{false}}" objectFit="cover" show-center-play-btn="{{false}}"></video> 在controls="...
微信小程序，图片上传阿里云oss。写一个例子
05-27
好的，以下是一个简单的微信小程序中图片上传到阿里云OSS的例子： 1. 在微信小程序中，使用wx.chooseImage()方法选择需要上传的图片，并将其保存在本地变量tempFilePaths中。 ``` wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths; // 上传图片到阿里云OSS uploadImage(tempFilePaths[0]); } }) ``` 2. 编写上传图片的函数uploadImage()，其中需要设置header、formData、name、url等参数，并调用wx.uploadFile()方法上传图片。 ``` function uploadImage(filePath) { // 阿里云OSS的Bucket名称和上传文件夹名称 var bucketName = 'your-bucket-name'; var folderName = 'your-folder-name/'; // 生成上传文件的唯一key var timestamp = new Date().getTime(); var key = folderName + timestamp + '-' + Math.floor(Math.random() * 10000) + '.jpg'; // 生成OSS的上传接口地址 var policyBase64 = 'your-policy-base64'; var signature = 'your-signature'; var aliyunUrl = 'https://' + bucketName + '.oss-cn-hangzhou.aliyuncs.com'; // 设置header和formData var header = { 'content-type': 'multipart/form-data' }; var formData = { 'key': key, 'policy': policyBase64, 'OSSAccessKeyId': 'your-access-key-id', 'success_action_status': '200', 'signature': signature }; // 调用wx.uploadFile()方法上传图片 wx.uploadFile({ url: aliyunUrl, filePath: filePath, name: 'file', header: header, formData: formData, success: function(res) { // 上传成功，获取图片URL地址 var imageUrl = aliyunUrl + '/' + key; console.log('上传成功，图片URL地址为：' + imageUrl); }, fail: function(res) { // 上传失败 console.log('上传失败：' + res.errMsg); } }) } ``` 需要注意的是，以上代码仅为一个示例，实际使用时需要按照阿里云OSS的规定进行设置，并在后端服务中编写相应的签名验证逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值