阿里云视频点播，基于thinkphp8上传视频
前端参考官方示例(jQuery版)
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>阿里云 JavaScript上传SDK Demo (使用jquery)</title><script src="__STATIC__/jquery.min.js"></script><script src="__STATIC__/aliyun-upload-sdk/aliyun-upload-sdk-1.5.6.min.js"></script><script src="__STATIC__/aliyun-upload-sdk/lib/es6-promise.min.js"></script><script src="__STATIC__/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min.js"></script><style type="text/css">.container {width: 1200px;margin: 0 auto;}.input-control {margin: 5px 0;}.input-control label {font-size: 14px;color: #333;width: 30%;text-align: right;display: inline-block;vertical-align: middle;margin-right: 10px;}.input-control input {width: 30%;height: 30px;padding: 0 5px;}.upload {padding: 30px 50px;}.progress {font-size: 14px;}.progress i {font-style: normal;}.upload-type {color: #666;font-size: 12px;padding: 10px 0;}.upload-type button {margin: 0 10px 0 20px;}.status {font-size: 14px;margin-left: 30px;}.info {font-size: 14px;padding-left: 30px;}</style>
</head>
<body><div class="container"><div class="upload"><div><input type="file" id="fileUpload"><label class="status">上传状态: <span id="status"></span></label></div><div class="upload-type">上传方式一, 使用 UploadAuth 上传:<button id="authUpload" disabled="true">开始上传</button><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 class="info">uploadAuth及uploadAddress参数请查看<a href="https://help.aliyun.com/document_detail/55407.html" target="_blank">获取上传地址和凭证 </a></div></div><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.result - readonly so assign binarypt.content = binary;pt.onload();}reader.readAsArrayBuffer(fileData);}}$(document).ready(function () {/** * 创建一个上传对象* 使用 UploadAuth 上传方式*/function createUploader () {var uploader = new AliyunUpload.Vod({timeout: 60000,partSize: 1048576,parallel: 5,retryCount: 3,retryDuration: 2,region: 'cn-shanghai',userId: '', // 输入用户id;localCheckpoint: true, //此参数是禁用服务端缓存// 添加文件成功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) {// 如果是 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 = '/index/demo/createVideo/'; // index应用\demo控制器\createVideo方法$.get(createUrl, function (data) {var uploadAuth = data.uploadAuth;var uploadAddress = data.uploadAddress;var videoId = data.videoId;console.log(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.BoYYcYvar refreshUrl = '/index/demo/refreshVideo?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) {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) {// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth$('#status').text('文件上传超时!');let refreshUrl = '/index/demo/refreshVideo?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) {$('#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>
</body>
</html>前提条件：阿里云镜像
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
安装sdk:
composer require alibabacloud/vod-20170321后端代码：(tp8)
use AlibabaCloud\SDK\Vod\V20170321\Vod;
use \Exception;
use AlibabaCloud\Tea\Exception\TeaError;
use AlibabaCloud\Tea\Utils\Utils;
use Darabonba\OpenApi\Models\Config;
use AlibabaCloud\SDK\Vod\V20170321\Models\CreateUploadVideoRequest;
use AlibabaCloud\Tea\Utils\Utils\RuntimeOptions;
use AlibabaCloud\SDK\Vod\V20170321\Models\RefreshUploadVideoRequest;class Demo
{/*** 使用AK&SK初始化账号Client* @return Vod Client*/public static function createClient(){$config = new Config(["accessKeyId" => '', // 从官方获取"accessKeySecret" => '']);$config->endpoint = "vod.cn-shanghai.aliyuncs.com";return new Vod($config);}/*** 获取上传视频地址和凭证;* @return Json*/public function createVideo(){$client = self::createClient();$createUploadVideoRequest = new CreateUploadVideoRequest(["fileName" => "D:\video_01.mp4","title" => "UploadTest"]);$runtime = new RuntimeOptions([]);try {// 复制代码运行请自行打印 API 的返回值$result = $client->createUploadVideoWithOptions($createUploadVideoRequest, $runtime);$uploadAuth = $result->body->uploadAuth;$videoId = $result->body->videoId;$uploadAddress = $result->body->uploadAddress;// 构建返回的数组$data = ['uploadAuth' => $uploadAuth,'videoId' => $videoId,'uploadAddress' => $uploadAddress,];return json($data);}catch (Exception $error) {if (!($error instanceof TeaError)) {$error = new TeaError([], $error->getMessage(), $error->getCode(), $error);}$res = Utils::assertAsString($error->message);return json(['code'=>500,'msg'=>$res]);}}/*** 刷新视频上传凭证;*/public function refreshVideo(){$client = self::createClient();$videoId = input('get.videoId');// dd($videoId);$refreshUploadVideoRequest = new RefreshUploadVideoRequest(["videoId" => $videoId]);$runtime = new RuntimeOptions([]);try {// 复制代码运行请自行打印 API 的返回值$result = $client->refreshUploadVideoWithOptions($refreshUploadVideoRequest, $runtime);$uploadAuth = $result->body->uploadAuth;$videoId = $result->body->videoId;$uploadAddress = $result->body->uploadAddress;// 构建返回的数组$data = ['uploadAuth' => $uploadAuth,'videoId' => $videoId,'uploadAddress' => $uploadAddress,];return json($data);}catch (Exception $error) {if (!($error instanceof TeaError)) {$error = new TeaError([], $error->getMessage(), $error->getCode(), $error);}$res = Utils::assertAsString($error->message);return json(['code'=>500,'msg'=>$res]);}}/*** 获取视频播放地址;*/public function getPlayUrl(){$client = self::createClient();$getPlayInfoRequest = new GetPlayInfoRequest(["videoId" => "c0bb1237eb8f71ef92585017f0e80102"]);$runtime = new RuntimeOptions([]);try {// 复制代码运行请自行打印 API 的返回值$result = $client->getPlayInfoWithOptions($getPlayInfoRequest, $runtime);// dd($result);$playUrl = $result->body->playInfoList->playInfo[0]->playURL;return json(['code'=>200,'msg'=>'success','data'=>$playUrl]);}catch (Exception $error) {if (!($error instanceof TeaError)) {$error = new TeaError([], $error->getMessage(), $error->getCode(), $error);}$res = Utils::assertAsString($error->message);return json(['code'=>500,'msg'=>$res]);}}
}前端播放视频：(参考官方文档)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.29.1/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.29.1/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="player-con"></div>
<script>
var player = new Aliplayer({"id": "player-con","source": "https://www.sqhsy.cn/sv/66ede8da-1950958f8ee/66ede8da-1950958f8ee.mp4","width": "100%","height": "500px","autoplay": true,"isLive": false,"rePlay": false,"videoHeight": undefined,"isVBR": undefined,"preload": true,"controlBarVisibility": "hover","useH5Prism": true
}, function (player) {console.log("The player is created");}
);
</script>
</body>测试环境：debian 12; php 8.3; thinkphp8.1 欢迎大佬们纠正
相关文章：
阿里云视频点播，基于thinkphp8上传视频
前端参考官方示例(jQuery版) <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>阿里云 JavaScript上传SDK Demo (使用jquery)</title><script src"__STATIC__/jquery.min.js"></script><sc…...
《探秘AI绿色计算：降低人工智能硬件能耗的热点技术》
在人工智能飞速发展的当下，其硬件能耗问题愈发凸显。据国际能源署预测，人工智能的能源消耗可能大幅增长。因此，降低人工智能硬件能耗，实现绿色计算，已成为行业关键课题。以下是一些正在崭露头角的热点技术。 新型硬件…...
神经网络常见激活函数 9-CELU函数
文章目录 CELU函数导函数函数和导函数图像优缺点pytorch中的CELU函数tensorflow 中的CELU函数 CELU 连续可微指数线性单元：CELU（Continuously Differentiable Exponential Linear Unit）,是一种连续可导的激活函数，结合了 ELU 和 …...
软考高级《系统架构设计师》知识点（四）
嵌入式技术 第二版新增内容 嵌入式系统：以应用为中心、以计算机技术为基础，并将可配置与可裁减的软、硬件、集成于一体的专用计算机系统，需要满足应用对功能、可靠性、成本、体积和功耗等方面的严格要求。一般嵌入式系统由嵌入式处理器、相关…...
opencv交叉编译
适用于瑞芯微，海思，酷芯等ARM平台。采用编译脚本配置编译选项，方便编译。 目录 一、创建目录 二、工具链配置 三、编译脚本 四、编译 一、创建目录 mikemike-virtual-machine:opencv-4.12/opencv/opencv$ tree . -L 1 . ├── 3rdpart…...
安装vite报错Install for [ ‘create-vite@latest‘ ] failed with code 1
报错内容： npm ERR! code ENOLOCAL npm ERR! Could not install from “Files\nodejs\node_cache_npx\31400” as it does not contain a package.json file. npm ERR! A complete log of this run can be found in: npm ERR! D:\Program Files\nodejs\node_cache_…...
Spring框架中都用到了哪些设计模式？
大家好，我是锋哥。今天分享关于【Spring框架中都用到了哪些设计模式？】面试题。希望对大家有帮助； Spring框架中都用到了哪些设计模式？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Spring框架中使用了大量的设计模…...
LabVIEW 中 dotnet.llb 库功能
在 LabVIEW 功能体系里，位于 C:\Program Files (x86)\National Instruments\LabVIEW 2019\vi.lib\Platform\dotnet.llb 路径下的 dotnet.llb 库意义重大。作为与 .NET 技术交互的关键库，它使 LabVIEW 用户能够与基于 .NET 框架开发的应用程序和组件进行交…...
C# 变量，字段和属性的区别
总目录 前言 在C#中，变量（Variables）、字段（Fields） 和 属性（Properties） 是三个容易混淆但作用截然不同的概念。以下是它们的核心区别与使用场景： 一、变量（Variables&…...
wordpress模板文件结构超详解
wordpress网站建设中，主题的制作是最为核心的环节。了解模板文件结构是模板制作的第一步，本文所讲的模板文件结构包括两部分，一是指以文件名为概念的文件结构，二是指文件内容的代码结构。 一、如何使模板文件起作用 ↑ wordpres…...
android studio下载安装汉化-Flutter安装
1、下载android studio官方地址：（这个网址可能直接打不开，需要VPN） https://developer.android.com/studio?hlzh-cn mac版本分为X86和arm版本，电脑显示芯片是Inter的就是x86的，显示m1和m2的就是arm的 …...
数据开放共享和平台整合优化取得实质性突破的智慧物流开源了
智慧物流视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本可通过边缘计算技术…...
如何设置 Nginx 连接超时并进行测试(Nginx优化)
🏡作者主页：点击！ Nginx-从零开始的服务器之旅专栏：点击！ 🐧Linux高级管理防护和群集专栏：点击！ ⏰️创作时间：2025年2月15日14点22分 在高并发场景下，如…...
springboot整合mybatis-plus(保姆教学) 及搭建项目
一、Spring整合MyBatis (1)将MyBatis的DataSource交给Spring IoC容器创建并管理，使用第三方数据库连接池(Druid，C3P0等)代替MyBatis内置的数据库连接池 (2)将MyBatis的SqlSessionFactory交给Spring IoC容器创建并管理，使用spring-mybatis整…...
知识管理成功：关键指标和策略，研究信息的投资回报率
信息过载会影响生产力。没有人工智能的帮助，信息过载会影响生产力。大量的可用信息，知识工作者不仅仅是超负荷工作；他们感到不知所措，他们倾向于浪费时间（和脑细胞）来应付他们被大量的数据抛向他们…...
【算法】链表
零：链表常用技巧 1：引入虚拟头结点 （1）便于处理边界情况 （2）方便我们对链表操作 2：两步尾插，头插 （1）尾插 tail指向最后一个节点，tail.next…...
集成测试总结文档
1. 集成测试的定义 集成测试（Integration Testing）是在单元测试之后，将多个独立的软件模块或组件组合在一起进行测试的过程，目的是验证这些模块之间的接口、数据传递、协作逻辑是否符合设计要求，并发现因集成引发的缺…...
关于Dest1ny:我的创作纪念日
Dest1ny 因为这是csdn任务，我就稍微“写”了一下！ 如果大家真的有什么想聊的或者想一起学习的，欢迎在评论区或者私信中与我讨论！ 2025想说的话 我就把我想说的写在前面！ 不用对未来焦虑，不要觉得自己走…...
Python爬虫-猫眼电影的影院数据
前言 本文是该专栏的第46篇，后面会持续分享python爬虫干货知识，记得关注。 本文笔者以猫眼电影为例子，获取猫眼的影院相关数据。 废话不多说，具体实现思路和详细逻辑，笔者将在正文结合完整代码进行详细介绍。接下来，跟着笔者直接往下看正文详细内容。（附带完整代码） …...
【计算机网络】传输层数据段格式
在计算机网络中，数据段（Segment） 是传输层协议（如 TCP 或 UDP）使用的数据单元。TCP 和 UDP 的数据段格式有所不同，以下是它们的详细说明： 1. TCP 数据段格式 TCP（传输控制协议&…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...