产品百科 |快速搭建短视频小程序 Demo

简介: 通过阅读本文,您可以快速了解短视频小程序的基本信息和搭建方法。

短视频小程序

短视频小程序提供了微信小程序端 SDK,支持播放,视频上传等功能。详情请参见微信小程序上传

短视频小程序和趣视频解决方案共用一套后端及 Web 控制台,配合小程序前端完成视频获取、播放、上传、审核、推荐等功能。您需要配置趣视频解决方案的后端以及控制台,具体操作,请参见服务端集成控制台集成


实现流程

实现流程如下图所示:

image.png

步骤 操作 描述
1 开通与配置 VOD 服务 搭建趣视频服务端之前,您首先需要开通并配置 VOD 服务。
2 开通与配置 ECS 服务 建议将 Demo 服务端搭建在 ECS 服务器上。因此您需要开通并配置 ECS 服务。
3 服务端集成 在开通和配置 VOD 和 ECS 服务后,您需要搭建趣视频服务端。
4 控制台集成 完成服务端搭建后,您需要搭建趣视频管理控制台来管理用户上传的视频。
5 小程序集成 完成服务端及控制台搭建后,您需要搭建小程序端来播放、上传视频。

前提条件

在开发短视频小程序前,请完成以下操作。

类别 说明
移动设备 可以进行微信登录的移动设备。
短视频服务端和控制台 完成服务端和控制台的搭建。具体操作,请参见服务端集成控制台集成
阿里云视频点播服务 完成视频点播服务的相关配置。具体操作,请参见开通与配置 VOD 服务

Demo 运行指引

  1. 下载并解压短视频小程序 Demo
  2. 获取微信测试账号的 AppID。申请地址请参见申请测试号
    使用移动设备上的微信扫描二维码,获取 AppID,记录并妥善保管。image.png
  3. 下载电脑系统对应版本的小程序开发工具
    说明 建议使用稳定版 Stable Build 进行开发。
  4. 导入源码。
  1. 单击小程序项目 > 小程序
  2. 在目录中选择解压后的短视频小程序 Demo。
  3. 填写申请好的小程序 AppID。具体操作,请参见获取小程序 AppID
  4. 单击新建image.png
  1. 修改配置文件。Demo 中使用的服务端地址是阿里云官方 Demo 服务器地址,您可以修改为趣视频服务端集成的云服务器(ECS)公网 IP 地址,并添加端口号(8080)。
  • 修改 service/player.js 文件中第 2 行的服务器地址。示例
    假设您的公网 IP 地址为 192.0.0.1,则将 player.js 文件第 2 行的服务端地址修改为 http://192.0.0.1:8080image.png
  • 修改 pages/sts/sts.js 文件中的上传地址。修改 sts.js 文件第 37 行的 URL:服务端地址 /demo/getSts。
    修改 sts.js 文件第 68 行的 URL:服务端地址 /vod/videoPublish。
    修改 sts.js 文件第 61 行的 URL:视频点播加速域名。详情请参见前提条件
    示例
    假设您的公网 IP 地址为 192.0.0.1,则将 sts.js 文件第 37 行的 URL 修改为 http://192.0.0.1:8080/demo/getSts,将第 68 行的 URL 修改为 http://192.0.0.1:8080/vod/videoPublish
    假设您在视频点播中设置的加速域名为 test.com,则将 sts.js 文件第 61 行的 URL 修改为 http://test.com/image.png
  1. 真机调试。单击真机调试,使用微信扫描二维码。

后续步骤

视频上传成功后,可以在控制台看到上传的视频并进行管理,待审核完毕之后,可在播放列表观看。

控制台地址:http:// 服务端地址 /resource/short-video/index.html#/videos

示例

假设您的公网 IP 地址为 192.0.0.1,控制台地址为 http://192.0.0.1:8080/resource/short-video/index.html#/videos


「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。

image.png


相关实践学习
2分钟自动化部署人生模拟器
本场景将带你借助云效流水线Flow实现人生模拟器小游戏的自动化部署
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
相关文章
|
小程序
uni-app语音转文字功能demo(小程序同声翻译开箱即用)
uni-app语音转文字功能demo(小程序同声翻译开箱即用)
862 0
uni-app语音转文字功能demo(小程序同声翻译开箱即用)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的短视频流量数据分析与可视化附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的短视频流量数据分析与可视化附带文章和源代码部署视频讲解等
67 0
基于ssm+vue.js+uniapp小程序的短视频流量数据分析与可视化附带文章和源代码部署视频讲解等
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
34 0
基于ssm+vue.js+uniapp小程序的短视频广告发布系统附带文章和源代码部署视频讲解等
|
7月前
|
JavaScript Java 测试技术
懂球短视频微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
懂球短视频微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
34 2
|
小程序 开发工具 数据安全/隐私保护
将本地小程序demo上传至github的五个命令
将本地小程序demo上传至github的五个命令
46 0
|
7月前
|
JavaScript Java 测试技术
基于微信小程序的懂球短视频的设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的懂球短视频的设计与实现(源码+lw+部署文档+讲解等)
|
7月前
|
小程序 前端开发 Java
短视频软件微信小程序+后台管理系统
短视频软件微信小程序+后台管理系统
130 0
|
7月前
|
小程序
微信小程序实现一个todolist这样的小demo
微信小程序实现一个todolist这样的小demo
|
小程序
微信小程序简单常见首页demo
微信小程序简单常见首页demo
134 0