对于浏览器上传媒体文件(音视频)的场景，可以使用腾讯云的云点播。
腾讯云文档地址： https://cloud.tencent.com/document/product/266/9239
<template>
<el-dialog v-model="showUpLoad" title="上传视频" width="800px">
<!-- http-request 覆盖 Element 默认的 Xhr 行为，允许自行实现上传文件的请求-->
<el-upload class="upload-demo" drag multiple :http-request="httpRequest">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将视频文件拖到此处或<em>点击上传视频</em>
</div>
</el-upload>
</el-dialog>
</template>
<script setup lang="ts">
import type { UploadRequestOptions } from "element-plus";
// 找后端获取签名
const getSignature = () => {
return axios.post(url).then(function (response) {
return response.data.signature;
});
};
// options 是上传文件的信息 包含云点播需要的媒体文件
const httpRequest = (options: UploadRequestOptions) => {
const tcVod = new TcVod({
getSignature // 上面的上传签名的函数
});
const uploader = tcVod.upload({
mediaFile: options.file // 媒体文件（视频或音频或图片），类型为 File
});
// 视频上传完成时
uploader.on("media_upload", async (tcInfo: any) => {
// 上传成功后 云点播返回的信息
});
};
</script>
腾讯云文档地址： https://cloud.tencent.com/document/product/266/58772
<link
href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.min.css"
rel="stylesheet"
/>
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.4/tcplayer.v4.5.4.min.js"></script>
<template>
<video
id="player-container-id"
width="414"
height="270"
preload="auto"
playsinline
webkit-playsinline
></video>
</template>
<script lang="ts" setup>
import { nextTick } from "vue";
let player;
const initVideo = () => {
// 刚进来可能找不到 video 标签，需要用 nextTick
nextTick(() => {
player = TCPlayer("player-container-id", {
fileID: tcVideoId.value, // 请传入需要播放的视频filID（必须）
appID: "1252002304", // 请传入点播账号的appID（必须）
playbackRates: [1],
loop: false,
plugins: {
ContinuePlay: {
// 开启续播功能
auto: true
}
}
});
});
};
// player.pause(); 视频暂停
// player.dispose(); 销毁播放器 会把 video 标签也从 dom 移除
</script>