微信小程序如何上传视频至视频点播

概述

本文主要介绍微信小程序如何上传视频至视频点播。

 

详细信息

小程序是当下比较流行的移动应用，例如大家熟知的微信小程序、支付宝小程序等。它是一种全新的开发模式，由于其无需下载和安装，因而可以被便捷地获取和传播，为终端用户提供更优的用户体验。因此对于视频点播的使用者来说，如何在小程序环境下上传文件到视频点播中也成为开发者比较关心的一个问题。由于目前点播服务提供的上传SDK还没有提供支持小程序端的JS SDK，同时点播底层的存储是基于OSS服务来存储，因此上传文件的原理与JavaScript客户端直传实践相同，小程序上传文件到视频点播底层的OSS，同样也可以利用OSS提供的PostObject接口来实现，关于PostObject的详细介绍请参见PostObject。

 

业务流程

  1. 客户端向应用服务器请求上传所需要的Policy信息。
  2. 应用服务器调用视频点播服务的CreateUploadVideo接口，获取上传地址和上传凭证信息，再封装成客户端需要的信息返回给客户端。
  3. 客户端获取到应用服务器返回的数据后，设置到表单域中，通过封装PostObject接口直接上传到视频点播服务底层的OSS。

 

使用示例

提示：

  • 本文代码中的参数是演示环境的参数，具体参数根据实际情况进行修改。
  • 在PostObject接口的参数中，可以通过Policy中的conditions参数中的content-length-range参数来设置上传Object的最小和最大值，注意最大不能超过5GB。PostObject请求的body总长度不允许超过5GB，若超过此值则报EntityTooLarge错误。
  1. 参考JavaScript客户端直传实践，下载示例代码，本文以PHP为例进行介绍。
  2. 调用视频点播的CreateUploadVideo接口获取上传地址和上传凭证信息，具体操作可参考上传地址和凭证。调用CreateUploadVideo接口返回结果如下所示。
    {"UploadAddress":"XXXXXX","VideoId":"3925cf48dabc4dd8936d1b7edf49ca97","RequestId":"B4245XXX-XXXX-XXXX-XXXX-XXX33EE4680","UploadAuth":"XXXXXX"}
  3. 将UploadAddress和UploadAuth分别进行Base64_decode解析，得到如下结果。
    • UploadAddress上传地址。 
      {"Endpoint":"https://oss-XXX.aliyuncs.com","Bucket":"outin-a30bXXXe1a625e","FileName":"customerTrans/d2d4084d01450e76ad6cf0cfa15a9c66/2d9478-16f28c7783f-0006-1da4-0bc-8bc7f.mp4"}
    • UploadAuth上传凭证。 
      {"SecurityToken":"XXXXXX","AccessKeyId":"STXXXTt3U","ExpireUTCTime":"2019-12-21T15:05:58Z","AccessKeySecret":"GkaXXXz1r3","Expiration":"3600","Region":"cn-shanghai"}
  4. 修改get.php的代码。将上一步解析的AccessKeyId、AccessKeySecret和SecurityToken值依次设置成$id、$key和$token的值，并将$dir设置为空值。将$host值设置为UploadAddress上传地址用base64_decode解析之后的Bucket和Endpoint值拼接的地址，如下所示。 
    http://outin-aXXX8ad9400163e1a625e.oss-XXX.aliyuncs.com
  5. 修改upload.js代码。
    1. 如下图所示，添加token参数。
    2. 增加表单域的值。如下图所示，由于OSS需要传“x-oss-security-token”这个Header，因此在'signature': signature,下方添加'x-oss-security-token': token。另外需要将表单域中的key值设置为FileName值，FileName值为UploadAddress上传地址使用base64_decode解析后的值。
    3. 在filters中需要设置允许上传的文件类型，比如允许上传的文件类型为mp4、mp3、wmv和mov，则添加{ title : "Video files", extensions : "mp4,mp3,wmv,mov" }参数。
  6. 然后打开浏览器的开发者工具，访问index.html文件，执行上传操作。在Network标签页下，可以看到封装的PostObject请求发送的Request Header和表单域Form Date的值。
  7. 以上示例是基于plupload封装PostObject接口上传视频，示例介绍便于理解整个通过PostObject上传的流程。而实际在微信小程序上传，需要使用chooseImage API进行图片选择，然后调用uploadFile进行文件上传。请注意，在表单域里必须要加上x-oss-security-token字段，具体配置如下图所示。

 

适用于

  • 视频点播