首页 正文

laravel上使用阿里云vod上传视频并播放

       1848      2020-01-17 16:06:05    

你得有阿里云vod的功能,在阿里云上面开通视频点播功能,并且创建相应的bucket

有了这些之后就可以来正式的了。

这是官网上的文档

https://help.aliyun.com/document_detail/61069.html?spm=a2c4g.11186623.2.35.766e257eZRdVhE#CreateUploadVideo

主要我们还是根据官网上的来操作。

首先我们下载相应的sdk

sdk的下载地址在这里

https://help.aliyun.com/document_detail/51992.html?spm=a2c4g.11186623.2.34.66863893XSJ0ta#ServerUploadSDK

把sdk下载下来后解压到我们的laravel项目里面

1、加载以下的包

require_once  __DIR__. '/aliyun-php-sdk/aliyun-php-sdk-core/Config.php';
require_once  __DIR__ . '/aliyun-php-sdk/aliyun-oss-php-sdk-2.3.1/autoload.php';


use vod\Request\V20170321 as vod;
use OSS\OssClient;
use OSS\Core\OssException;
  • 上传视频

然后我们写几个主要的函数

他有两种方式,一种是sts,另外一种是通过appkey和secret来的。我这里是有appkey的方式

首先使用ak来初始化客户端

function init_vod_client($accessKeyId, $accessKeySecret) {
        $regionId = 'cn-shanghai';     // 点播服务所在的Region,国内请填cn-shanghai,不要填写别的区域
        $profile = \DefaultProfile::getProfile($regionId, $accessKeyId, $accessKeySecret);
        return new \DefaultAcsClient($profile);
    }

获取到client之后我们就可以来做我们要做的事了。

接下来我们要做的是通过client来获取上传凭证

 function createUploadVideo() {
        $vodClient= init_vod_client(env("Ali_AccessKeyID"), env("Ali_AccessKeySecret"));
        $request = new vod\CreateUploadVideoRequest();
        $request->setTitle("zhedu-".\Admin::user()->username.date("Y-m-d H:i:s")."上传视频");        // 视频标题(必填参数)
        $request->setFileName(\Admin::user()->id."_".\Admin::user()->username.date("YmdHis").mt_rand(1000,9999).".mp4"); // 视频源文件名称,必须包含扩展名(必填参数)
        $request->setDescription(\Admin::user()->username.date("Y-m-d H:i:s")."上传视频");  // 视频源文件描述(可选)
        // $request->setCoverURL("http://img.alicdn.com/tps/TB1qnJ1PVXXXXXCXXXXXXXXXXXX-700-700.png"); // 自定义视频封面(可选)
        // $request->setTags("标签1,标签2"); // 视频标签,多个用逗号分隔(可选)
        // $request->setContent("标签1,标签2"); // 视频标签,多个用逗号分隔(可选)
        
        return $vodClient->getAcsResponse($request);
    }

调用上面的方法获得了凭证之后。我们把他返回到我们的前端页面,并且需要把视频的videoid保存下来。就可以把视频文件上传到阿里云服务器上了。

大概的前端js代码如下

 var file = $("#"+elementid)[0].files[0]
    if (!file) {
      alert("请先选择需要上传的视频!")
      return
    }
    var Title =title
    var userData = '{"Vod":{}}'
    if (uploader) {
      uploader.stopUpload()
      $('#video-progressbar').css("width","0%")
      $('#video-output').text("")
    }
    uploader = createUploader()
    // 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
    // console.log(uploader)

    uploader.addFile(file, null, null, null, userData)

      if (uploader !== null) {
        uploader.startUpload()
      }
var uploader = null

function createUploader () {
    var uploader = new AliyunUpload.Vod({
        //阿里账号ID,必须有值 ,值的来源https://help.aliyun.com/knowledge_detail/37196.html
        userId:"***",
      //上传到点播的地域, 默认值为'cn-shanghai',//eu-central-1,ap-southeast-1
      region:"cn-shanghai",
        //分片大小默认1M,不能小于100K
        partSize: 1048576,
      //并行上传分片个数,默认5
        parallel: 5,
      //网络原因失败时,重新上传次数,默认为3
      retryCount: 3,
      //网络原因失败时,重新上传间隔时间,默认为2秒
      retryDuration: 2,
       // 开始上传
       'onUploadstarted': function (uploadInfo) {
           // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
            // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress
            // 如果 uploadInfo.videoId 有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
            // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
            // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
            // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
            if (!uploadInfo.videoId) {
                var createUrl = '/adminxxx/getvideouploadauth'
                $.get(createUrl, function (data) {
                    console.log(data)
                  var uploadAuth = data.UploadAuth
                  var uploadAddress = data.UploadAddress
                  var videoId = data.VideoId
                  $("#video-savedpath").val(videoId)
                  uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
                }, 'json')
                $('#status').text('文件开始上传...')
                console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
              } else {
                // 如果videoId有值,根据videoId刷新上传凭证
                // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
                var refreshUrl = '/adminxxx/refreshUploadVideo?videoid=' + uploadInfo.videoId
                $.get(refreshUrl, function (data) {
                  var uploadAuth = data.UploadAuth
                  var uploadAddress = data.UploadAddress
                  var videoId = data.VideoId
                  uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
                }, 'json')
              }
       },
       // 文件上传成功
       'onUploadSucceed': function (uploadInfo) {
           
            $('#video-output').text('视频上传成功!')
       },
       // 文件上传失败
       'onUploadFailed': function (uploadInfo, code, message) {
       },
       // 文件上传进度,单位:字节
       'onUploadProgress': function (uploadInfo, totalSize, progress) {
            console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
            var progressPercent = Math.ceil(progress * 100)

            $('#video-progressbar').css("width",progressPercent+"%")
            $('#video-output').text('视频上传中进度:'+progressPercent+"%")
       },
       // 上传凭证超时
       'onUploadTokenExpired': function (uploadInfo) {

       },
     //全部文件上传结束
     'onUploadEnd':function(uploadInfo){
         
        $('#video-output').text('视频上传成功!系统将自动转码,可以先提交表单')
            var vid=$("#video-savedpath").val()
            createaliyunplayer(vid)
        }
   });
    return uploader
  }

就这样我们就可以把视频上传到阿里云vod上面了

我们视频上传后会有一段时间的转码。我们只需要等待一下就可以了。

  • 播放视频

接下来我们将用阿里云的播放器来对我们刚刚上传了的视频进行播放。

我们播放的时候需要有刚刚我们保存下来的videoid和一个用户播放的凭证

我们通过下面的函数来获取到视频播放凭证

 /*
 *获取视频播放凭证
 */
 function getPlayAuth($vid) {
        $client= init_vod_client(env("Ali_AccessKeyID"), env("Ali_AccessKeySecret"));
        try {
            $videoId=$vid;
            $request = new vod\GetVideoPlayAuthRequest();
            $request->setVideoId($videoId);
            $request->setAuthInfoTimeout(3000);
            $request->setAcceptFormat('JSON');
            $response = $client->getAcsResponse($request);
            
            return ($response);
        }
        catch (Exception $e) {
            // var_dump($e);
            return($e->getMessage());
        }
    }

获取到凭证之后我就就在前端页面初始化阿里云播放器那里填入即可播放

 aliyunvodplayer = new Aliplayer({
                      "id": containerid,
                      "vid":vid,
                      "playauth":data.PlayAuth,
                      "cover":data.VideoMeta.CoverURL,
                      "width": "100%",
                      "height": "500px",
                      "autoplay": false,
                      "isLive": false,
                      "rePlay": false,
                      "playsinline": true,
                      "preload": true,
                      "controlBarVisibility": "hover",
                      "useH5Prism": true
                    }, function (player) {
                        console.log("The player is created");
                      }
                    );


我要打赏