tp5 上传到阿里视频点播1

Asshead@493

已于 2023-08-23 10:09:49 修改

阅读量710

点赞数

分类专栏： tp5 文章标签： php

于 2021-03-10 23:24:35 首次发布

本文链接：https://blog.csdn.net/qq_47936954/article/details/114649351

版权

tp5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

客户端上传和phpsdk 协同调用
因为服务器sdk上传的速度取决于你的服务器带宽,所以采用了客户端+服务端集成的方法
原理是:用服务端sdk获取上传视频凭证后传到客户端进行上传,视频播放同理
html代码

<div class="input-control"> 
     <label for="userId">阿里云账号ID:</label> 
        <input type="hidden" value="*************"  disabled class="form-control" id="userId" placeholder="输入阿里云账号ID">
      </div>
    </div>
    <div class="upload">
      <div>
        <input type="file" id="fileUpload">
        <label class="status">上传状态: <span id="status"></span></label>
      </div>
      <div class="upload-type">
        上传方式一, 使用 UploadAuth 上传:
        <a id="authUpload" disabled="true">开始上传</a>
        <button id="pauseUpload" disabled="true">暂停</button>
        <button id="resumeUpload" disabled="true">恢复上传</button>
        <span class="progress">上传进度: <i id="auth-progress">0</i> %</span>
        <span></span>
      </div>
    </div>
  </div>

JavaScript代码

<script type="text/javascript">
function setBlogrollImageName(basicfile){
document.getElementById("blogrollimagename").value=basicfile.value;
}
</script>
<script>
function upload() {

  var filename = document.getElementById("importFile").value;
  // 这时的filename不是 importFile 框中的值
  alert(filename);
}
</script>
  <script>
     //兼容IE11
    if (!FileReader.prototype.readAsBinaryString) {
        FileReader.prototype.readAsBinaryString = function (fileData) {
           var binary = "";
           var pt = this;
           var reader = new FileReader();      
           reader.onload = function (e) {
               var bytes = new Uint8Array(reader.result);
               var length = bytes.byteLength;
               for (var i = 0; i < length; i++) {
                   binary += String.fromCharCode(bytes[i]);
               }
        
            pt.content = binary;
            pt.onload()
        }
        reader.readAsArrayBuffer(fileData);
        }
    }
    $(document).ready(function () {
      /** 
       * 创建一个上传对象
       * 使用 UploadAuth 上传方式
       */
      function createUploader () {
        var uploader = new AliyunUpload.Vod({
          timeout: $('#timeout').val() || 60000,
          partSize: $('#partSize').val() || 1048576,
          parallel: $('#parallel').val() || 5,
          retryCount: $('#retryCount').val() || 3,
          retryDuration: $('#retryDuration').val() || 2,
          region: $('#region').val(),
          userId: $('#userId').val(),
          // 添加文件成功
          addFileSuccess: function (uploadInfo) {
            console.log('addFileSuccess')
            $('#authUpload').attr('disabled', false)
            $('#resumeUpload').attr('disabled', false)
            $('#status').text('添加文件成功, 等待上传...')
            console.log("addFileSuccess: " + uploadInfo.file.name)
          },
          // 开始上传
          onUploadstarted: function (uploadInfo) {
            console.log(uploadInfo.file,'asdasdas')
            // 如果是 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)
            var sss=uploadInfo.file;
            if (!uploadInfo.videoId) {
			//用ajax从服务器sdk获取videoid
          $.ajax({
            type:"post",
            url:"请求地址",
            data:{file:sss.name},
            success:function(res){
              console.log(res,'res');
                // console.log(res.UploadAuth,'sdsd');
          uploader.setUploadAuthAndAddress(uploadInfo,res.UploadAuth, res.UploadAddress,res.VideoId)
        
            $('#status').text('文件开始上传...')
            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            }
          })
              // $('#status').text('文件开始上传...')
            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            } else {
              // 如果videoId有值，根据videoId刷新上传凭证
           
          $.ajax({
            type:"post",
            url:"请求地址",
            data:{videoId:uploadInfo.videoId},
            success:function(res){
              console.log(res,'res');
            uploader.setUploadAuthAndAddress(uploadInfo,res.UploadAuth, res.UploadAddress,res.VideoId)
            $('#status').text('文件开始上传...')
            console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)

            }
          })
            }
          },
          // 文件上传成功
          onUploadSucceed: function (uploadInfo) {

            console.log(uploadInfo.VideoId,'asdasd')
            console.log(uploadInfo,'asdasd4321')

           $.ajax({
            type:"post",
            url:"{:url('admin/shangchuan/getPlayInfo')}",
            data:{videoId:uploadInfo.videoId},
            success:function(res){
              console.log(res,'res');


              $('#demo22').attr('src',res);
              $('#videos').html('<input type="hidden" id="tvideo" name="video" value="'+ res +'">');
            }
          })
            console.log(uploadInfo.videoId,'上传成功')
            // console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
            $('#status').text('文件上传成功!')
          },
          // 文件上传失败
          onUploadFailed: function (uploadInfo, code, message) {
            console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
            $('#status').text('文件上传失败!')
          },
          // 取消文件上传
          onUploadCanceled: function (uploadInfo, code, message) {
            console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
            $('#status').text('文件上传已暂停!')
          },
          // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
          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)
            $('#auth-progress').text(progressPercent)
            $('#status').text('文件上传中...')
          },
          // 上传凭证超时
          onUploadTokenExpired: function (uploadInfo) {
            // console.uploadInfo
            // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
            // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
            // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
            $('#status').text('文件上传超时!')

            let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
            $.get(refreshUrl, function (data) {
              var uploadAuth = data.UploadAuth
              uploader.resumeUploadWithAuth(uploadAuth)
              console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
            }, 'json')
          },
          // 全部文件上传结束
          onUploadEnd: function (uploadInfo) {
            console.log(uploadeInfo,'upload');
            $('#status').text('文件上传完毕!')
            console.log("onUploadEnd: uploaded all the files")
          }
        })
        return uploader
      }
      var uploader = null
      $('#fileUpload').on('change', function (e) {
        var file = e.target.files[0]
        if (!file) {
          alert("请先选择需要上传的文件!")
          return
        }
        var Title = file.name
        var userData = '{"Vod":{}}'
        if (uploader) {
          uploader.stopUpload()
          $('#auth-progress').text('0')
          $('#status').text("")
        }
        uploader = createUploader()
        // 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
        console.log(uploader)
        uploader.addFile(file, null, null, null, userData)
        $('#authUpload').attr('disabled', false)
        $('#pauseUpload').attr('disabled', true)
        $('#resumeUpload').attr('disabled', true)
      })

      // 第一种方式 UploadAuth 上传 
      $('#authUpload').on('click', function () {
        // 然后调用 startUpload 方法, 开始上传
        if (uploader !== null) {
          uploader.startUpload()
          $('#authUpload').attr('disabled', true)
          $('#pauseUpload').attr('disabled', false)
        }
      })

      // 暂停上传
      $('#pauseUpload').on('click', function () {
        if (uploader !== null) {
          uploader.stopUpload()
          $('#resumeUpload').attr('disabled', false)
          $('#pauseUpload').attr('disabled', true)
        }
      })


      $('#resumeUpload').on('click', function () {
        if (uploader !== null) {
          uploader.startUpload()
          $('#resumeUpload').attr('disabled', true)
          $('#pauseUpload').attr('disabled', false)
        }
      })

    })
  </script>

php代码:有一些类的引入会报错自行解决

<?php
namespace app\admin\controller;
use think\Controller;
use think\Request;
use think\Db;
use vod\Request\V20170321\CreateUploadVideoRequest;
use vod\Request\V20170321\RefreshUploadVideoRequest;
use vod\Request\V20170321\GetPlayInfoRequest;
use vod\Request\V20170321\GetVideoPlayAuthRequest;
use AliyunVodUploader;
use UploadVideoRequest;
use OSS\OssClient;
use OSS\Core\OssUtil;
include EXTEND_PATH."voduploadsdk/aliyun-php-sdk-oss/src/OSS/OssClient.php";
include EXTEND_PATH."voduploadsdk/aliyun-php-sdk-oss/src/OSS/Core/OssUtil.php";
include EXTEND_PATH."voduploadsdk/aliyun-php-sdk-core/Config.php";
class Shangchuan extends Controller
{
    private $accessKeyId = '******************';   //阿里云 accessKeyId
    private $accessKeySecret = '***************************'; //阿里云 accessKeySecret
    private  $regionId = 'cn-shanghai';   //表示中国区域 不用修改
    private  $TemplateGroupId = '*****************';  //阿里云控制台视频点播>全局设置->转码设置  转码组id    
 
    function initVodClient() {
        include EXTEND_PATH."voduploadsdk/aliyun-php-sdk-core/Profile/DefaultProfile.php";
        include EXTEND_PATH."voduploadsdk/aliyun-php-sdk-core/DefaultAcsClient.php";
       
        $profile = \DefaultProfile::getProfile($this->regionId,$this->accessKeyId,$this->accessKeySecret);
        return new \DefaultAcsClient($profile);
    }
    public function upload_local_file($ossClient, $uploadAddress, $localFile) {
        return $ossClient->uploadFile($uploadAddress['Bucket'], $uploadAddress['FileName'], $localFile);
    }

// 使用简单方式上传本地文件：适用于小文件上传；最大支持5GB的单个文件
// 更多上传方式参考：https://help.aliyun.com/document_detail/32103.html

             //获取播放地址（拿到上一个方法返回的videoId作为此方法的参数）
    public function getPlayInfo1($videoId) {
        try {
            $client = $this->initVodClient();
            $request = new GetPlayInfoRequest();
 
            $request->setVideoId($videoId);
            $request->setAuthTimeout(3600*24);
            $request->setAcceptFormat('JSON');
            $playInfo = $client->getAcsResponse($request);
            return $playInfo->PlayInfoList->PlayInfo; 
        } catch (Exception $e) {
            print $e->getMessage()."\n";
        }

        }
        // 使用上传凭证和地址信息初始化OSS客户端（注意需要先Base64解码并Json Decode再传入）
 public function init_oss_client($uploadAuth,$uploadAddress) {
  
    $ossClient = new OssClient($uploadAuth['AccessKeyId'], $uploadAuth['AccessKeySecret'], $uploadAddress['Endpoint'], 
        false, $uploadAuth['SecurityToken']);
    $ossClient->setTimeout(86400*7);    // 设置请求超时时间，单位秒，默认是5184000秒, 建议不要设置太小，如果上传文件很大，消耗的时间会比较长
    $ossClient->setConnectTimeout(10);  // 设置连接超时时间，单位秒，默认是10秒
    return $ossClient;
}
 
    //获取上传地址(uploadAddress) 上传凭证(uploadAuth)  视频(videoId)
    public function createUploadVideo() {
        // return 111;
        $www=$this->request->param();
        // return json($www);
            // $post=$this->request->param();
            // return $post;
           try {
                include EXTEND_PATH."voduploadsdk/aliyun-php-sdk-vod/vod/Request/V20170321/CreateUploadVideoRequest.php";
                $client = $this->initVodClient();
                $request = new CreateUploadVideoRequest();
                $request->setTitle($www['file']);        
                $request->setFileName($www['file']); 
                $request->setAcceptFormat('JSON');
                $aa = $client->getAcsResponse($request);
                $auth['UploadAddress'] = $aa->UploadAddress;
                $auth['RequestId'] = $aa->RequestId;
                $auth['VideoId'] = $aa->VideoId;
                $auth['UploadAuth'] = $aa->UploadAuth;
                return $auth;
                // $this->ajaxReturn(array('status'=>'0','data'=>$auth));
                
            } catch (Exception $e) {
                print $e->getMessage()."\n";
            }
        
    }
    //刷新视频上传凭证
    function refreshUploadVideo() {
        $www=$this->request->param();
        try {
            $client = $this->initVodClient();
            $request = new RefreshUploadVideoRequest();
            $request->setVideoId($www['videoId']);
            $request->setAcceptFormat('JSON');
            $aa=$client->getAcsResponse($request);
            $auth['UploadAddress'] = $aa->UploadAddress;
            $auth['RequestId'] = $aa->RequestId;
            $auth['VideoId'] = $aa->VideoId;
            $auth['UploadAuth'] = $aa->UploadAuth;
           return $auth;     
          
        } catch (Exception $e) {
            print $e->getMessage()."\n";
        }
       
    }
 
  
    //获取播放地址
  public function getPlayInfo() {
    $www=$this->request->param();
        try {
            $client = $this->initVodClient();
            $request = new GetPlayInfoRequest();
 
            $request->setVideoId($www['videoId']);
            $request->setAuthTimeout(3600*24);
            $request->setAcceptFormat('JSON');
            $playInfo = $client->getAcsResponse($request);
              $sss=$playInfo->PlayInfoList->PlayInfo;
            return $sss[0]->PlayURL;
        } catch (Exception $e) {
            print $e->getMessage()."\n";
        }
       
    }
  
    //获取播放凭证
    function getPlayAuth() {
        $www=$this->request->param();

        try{
            $client = $this->initVodClient();
            $request = new GetVideoPlayAuthRequest();
            $request->setVideoId($www['videoId']);
            $request->setAuthInfoTimeout(3600);
            $request->setAcceptFormat('JSON');
            $playInfo = $client->getAcsResponse($request);
            
            return $playInfo->VideoMeta;
        } catch (Exception $e) {
            print $e->getMessage()."\n";
        }  
    } 
}

Asshead@493

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
tp5 上传到阿里视频点播1

客户端上传和phpsdk 协同调用因为服务器sdk上传的速度取决于你的服务器带宽,所以采用了客户端+服务端集成的方法原理是:用服务端sdk获取上传视频凭证然后客户端获取凭证进行上传,视频播放同理html代码<div class="input-control"> <label for="userId">阿里云账号ID:</label> <input type="hidden" value="*************" disa
复制链接

扫一扫