阿里云VOD视频点播对接（Vue + PHP）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

目录

对接说明

上传实现

前端播放

一、对接说明

  1. 前端安装好oss依赖，npm install ali-oss

  2. 请求PHP接口得到临时凭证，把临时凭证传入并初始化OSS对象

  3. 执行OSS对象的multipartUpload方法，并传入附件、文件参数、上传进度监听函数等值即可实现上传。

  4. 上传成功后，将VideoId存入数据库。视频点播与对象存储不同，对象存储上传成功后会返回存储文件的相对路径。但视频点播只会返回VideoId，然后通过VideoId取得播放地址。

阿里云node.js分片上传文件（官方文档）：https://help.aliyun.com/document_detail/111268.html

阿里云PHP生成视频点播上传凭证（官方文档）：https://help.aliyun.com/document_detail/61069.html

二、上传实现

  1. 前端代码（组件）

<template>
  <div>
    <div class="oss_file">
      <input
        type="file"
        :disabled="percentage != 0 && percentage != 100"
        :id="id"
        :multiple="multiple"
        @change="doUpload"
      />
      <template v-if="percentage != 0 && percentage != 100">
        上传进度：{{ percentage }}%
        <Button type="error" @click="cancelUpload()" ghost size="small"
          >取消上传</Button
        >
      </template>
      <template v-else-if="percentage == 100"> <span style="color:green;">上传成功</span> </template>
    </div>
  </div>
</template>
<script>
import { SET_SIGN } from "@/utils";
import OSS from "ali-oss";
export default {
  data() {
    return {
      percentage: 0, //上传进度
      client: {}, //OSS对象
      uploadId: "", //上传标识
      multiple: true,
      VideoId: "", //视频ID
      id: "videoId",
      fileName: "", //上传对象名
    };
  },
  methods: {
    //取消上传文件
    cancelUpload() {
      this.percentage = 0;
      this.client.abortMultipartUpload(this.fileName, this.uploadId);
      this.cancelFile();
    },
    //清空文件
    cancelFile() {
      var file = document.getElementById(this.id);
      file.value = "";
    },
    //文件上传
    doUpload() {
      const _this = this;
      const fileLen = document.getElementById(_this.id).files;
      const file = fileLen[0];
      let res = this.filesAdded(file);
      if (!res) {
        this.cancelFile();
        return;
      }
      const progress = (p, _checkpoint) => {
        _this.uploadId = _checkpoint.uploadId;
        _this.percentage = parseInt(p * 100);
        if (_this.percentage == 100) {
          _this.fileSuccess(_this.VideoId);
        }
      };
      this.$axios
        .post(
          _this.$api.knowledgeSystem_createUploadVideo,
          Object.assign({ fileName: file.name }, SET_SIGN())
        )
        .then((res) => {
          if (res.data.status == "200") {
            var data = res.data.data;
            _this.VideoId = data.VideoId;
            var UploadAuth = data.UploadAuth;
            var UploadAddress = data.UploadAddress;
            //从视频点播服务获取的uploadAuth、uploadAddress和videoId，设置到SDK里
            _this.fileName = UploadAddress.FileName;
            _this.client = new OSS({
              region: "oss-cn-shanghai",
              accessKeyId: UploadAuth.AccessKeyId,
              accessKeySecret: UploadAuth.AccessKeySecret,
              stsToken: UploadAuth.SecurityToken,
              bucket: UploadAddress.Bucket,
            });
            try {
              // object-name可以定义为文件名（例如file.txt）
              const result = _this.client.multipartUpload(
                UploadAddress.FileName,
                file,
                {
                  progress,
                  // meta是用户自定义的元数据，通过head接口可以获取到Object的meta数据。
                  meta: {
                    year: 2020,
                    people: "test",
                  },
                }
              );
            } catch (e) {
              // 捕获超时异常。
              if (e.code === "ConnectionTimeoutError") {
                console.log("TimeoutError");
                // do ConnectionTimeoutError operation
              }
              console.log(e);
            }
          } else {
            _this.$Message.error("请求失败");
          }
        });
    },
  },
  props: {
    fileSuccess: {
      //定义一个外来方法
      type: Function, //参数类型：函数
      required: true, //是否必填：是
    },
    filesAdded: {
      //定义一个外来方法
      type: Function, //参数类型：函数
      required: true, //是否必填：是
    },
  },
  async mounted() {
    this.cancelFile();
  },
};
</script>

  1. 后端代码

    先下载好oss的PHP SDK，这里放在extend目录

<?php
namespace app\knowledge\controller;
require_once dirname(ROOT_PATH) . DIRECTORY_SEPARATOR . \'crmapi\' . DIRECTORY_SEPARATOR . \'extend\' . DIRECTORY_SEPARATOR . \'voduploadsdk\' . DIRECTORY_SEPARATOR . \'aliyun-php-sdk-oss\' . DIRECTORY_SEPARATOR . \'autoload.php\'; //当前服务器上的位置
use aliyunapi\oss\FileManage;
use think\Cache;
use think\Controller;
class Upload extends Controller
{
    /**
     *  得到视频上传地址与凭证
     */
    public function createUploadVideo()
    {
        $fileObj = new \aliyunapi\vod\FileManage();
        $fileName = input(\'fileName\');
        if (empty($fileName)) {
            success_msg(200, \'ok\', []);
        }
        $res = $fileObj->createUploadVideo($fileName);
        success_msg(200, \'ok\', $res);
    }
}

里面的函数

<?php
namespace aliyunapi\vod;
require_once dirname(ROOT_PATH) . DIRECTORY_SEPARATOR . \'crmapi\' . DIRECTORY_SEPARATOR . \'extend\' . DIRECTORY_SEPARATOR . \'voduploadsdk\' . DIRECTORY_SEPARATOR . \'Autoloader.php\'; //当前服务器上的位置
use AliyunVodUploader;
use OSS\Core\OssException;
use OSS\OssClient;
use UploadVideoRequest;
use think\Exception;
use vod\Request\V20170321\GetMezzanineInfoRequest;
use vod\Request\V20170321\GetPlayInfoRequest;
use vod\Request\V20170321\RefreshUploadVideoRequest;
/**
 *  阿里云文件管理
 */
class FileManage
{
    /**
     * 获取视频上传地址和凭证
     * @param client 发送请求客户端
     * @return CreateUploadVideoResponse 获取视频上传地址和凭证响应数据
     */
    function createUploadVideo($object) {
        $ali_vod_endpoint1 = config(\'general.ali_vod_endpoint1\');
        $uploader = new AliyunVodUploader(config(\'general.ali_vod_access_key_id\'),
            config(\'general.ali_vod_access_key_secret\'), $ali_vod_endpoint1);
        $uploadVideoRequest = new UploadVideoRequest($object);
        $userData = array(
            "Vod"=>[],
        );
        $uploadVideoRequest->setUserData(json_encode($userData));
        $uploadInfo = $uploader->createUploadVideo($uploadVideoRequest);
        $uploadInfo = json_decode(json_encode($uploadInfo), true);
        return $uploadInfo;
    }
}

返回的结果

{
  "status": 200,
  "msg": "ok",
  "data": {
    "VideoId": "c27349fac2cb440e835e3259ddb73076",
    "UploadAddress": {
      "Endpoint": "https://oss-cn-shanghai.aliyuncs.com",
      "Bucket": "outin-7770f6706e4211ea8ad600163e1c8dba",
      "FileName": "sv/601b2f0e-17b580e350b/601b2f0e-17b580e350b.mp4"
    },
    "RequestId": "42CD05DF-CDA0-527F-B723-0EE5269F7990",
    "UploadAuth": {
      "SecurityToken": "SecurityToken的值",
      "AccessKeyId": "STS.NUWjw28NBfUZ9qzgWYpLUA6Tw",
      "ExpireUTCTime": "2021-08-18T07:58:51Z",
      "AccessKeySecret": "FguyjDtoHq3iSbhCPKxPEREMctA7H58P6sfBv6L229Mo",
      "Expiration": "3600",
      "Region": "cn-shanghai"
    },
    "OriUploadAddress": "OriUploadAddress的值",
    "OriUploadAuth": "OriUploadAuth的值",
    "MediaType": "video",
    "MediaId": "c27349fac2cb440e835e3259ddb73076"
  }
}

三、前端播放

  1. 播放说明

    阿里云视频点播支持的音视频扩展有很多种，但视频查看接口只支持（mp4、m3u8、mp3、mpd），否则会调用GetPlayInfo会出现：The video has no stream to play for the request parameter \'StreamType : audio \'。其它格式需要播放，第一种方法是上传时都转码成mp4，第二种方法是调用GetMezzanineInfo方法，得到源文件信息。源文件信息含有播放地址。

  2. 通过GetPlayInfo得到音视频信息

    https://help.aliyun.com/document_detail/61070.html

  3. 通过GetMezzanineInfo得到音视频源信息

    https://help.aliyun.com/document_detail/59624.html

以上是 阿里云VOD视频点播对接（Vue + PHP） 的全部内容， 来源链接： utcz.com/z/375956.html

回到顶部