阿里云视频点播，基于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（传输控制协议&…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 ：HyperText Transfer Protocol（超文本传输协议） 默认端口 ：HTTP 使用 80 端口，HTTPS 使用 443 端口。 请求方法 ： GET ：用于获取资源，…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...