tp5 上传到阿里视频点播

客户端上传和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>//兼容IE11if (!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.UploadAuthuploader.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.namevar 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 = '******************';   //阿里云 accessKeyIdprivate $accessKeySecret = '***************************'; //阿里云 accessKeySecretprivate  $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";}  }
}

tp5 上传到阿里视频点播相关推荐

springboot 打包_springboot项目打包上传至阿里云服务器
工具 IDEA+Xshell6+maven 详细步骤 01 对Spring Boot项目进行打包打包的两种方式:IDEA和CMD 首先介绍使用IDEA进行打包. 双击clean和package,ID ...
Linux环境Shell脚本上传下载阿里云OSS文件
为什么80%的码农都做不了架构师?>>> Linux环境Shell脚本上传下载阿里云OSS文件背景工作中由于我们项目生成的日志文件比较重要,而本地磁盘空间有限存储不了多久, ...
tp5上传文件并获取文件路径_TP5上传文件
TP5上传文件与上传图片雷同!!!!!其实都差不多的!!!!用到了js插件 1.首先引用 2.form表单内最重要的就是这个属性 enctype="multipart/for ...
mysql数据库备份到oss_备份MySQL数据库并上传到阿里云OSS存储
1. 环境配置要将本地文件上传到阿里云oss中, 必须使用阿里云提供的工具 ossutil, 有32位,也有64位的, Linux和Windows都有.具体可以到阿里云官网下载本文以Linux系统 ...
git上传新项目到服务器_springboot项目打包上传至阿里云服务器
工具 IDEA+Xshell6+maven 详细步骤 01 对Spring Boot项目进行打包打包的两种方式:IDEA和CMD 首先介绍使用IDEA进行打包. 双击clean和package,ID ...
图片文件压缩并上传至阿里云OSS
图片处理 Thumbnails 在进行Java开发时可以使用Thumbnails工具类对图片进行处理,旋转.裁剪.格式转换.加水印等. 使用步骤导包 <dependency><gr ...
JAVA实现生成原生二维码并上传至阿里云
JAVA生成二维码并上传至阿里云 pom依赖 <dependency><groupId>com.google.zxing</groupId><artifact ...
STM32+Air202+Air530+HXDZ-30102-ACC心率血氧GPS采集上传到阿里云
主要功能 HXDZ-30102-ACC采集心率血氧数据 STM32通过串口将数据转发到air202模块 air202将数据上传到阿里云平台进行展示与处理整合合宙air530GPS模块,将定位数据上传 ...
利用Proteus仿真基于stm32的智能家居并上传至阿里云
学校组织了为期两周的实训,疫情原因只能线上,学习的是stm32,本来利用32制作智能家居并上传阿里云网上的教程很多的,但是仿真并上云暂未发现,这也是我本次实训感觉学到的东西. 实现的东西其实很简单,就 ...

tp5 上传到阿里视频点播

tp5 上传到阿里视频点播相关推荐

最新文章

热门文章