From b3eb99d598110351ad85f716f50a291941d58231 Mon Sep 17 00:00:00 2001
From: Administrator <15274802129@163.com>
Date: Wed, 14 Jan 2026 15:41:59 +0800
Subject: [PATCH] feat(ai): 添加视频播放器功能
---
src/main/resources/templates/febs/views/modules/ai/fileUpload/videoNative.html | 243 ++++++++++++++++++++++++++++++++++
src/main/java/cc/mrbird/febs/ai/controller/fileUpload/ViewController.java | 14 ++
src/main/resources/templates/febs/views/modules/ai/fileUpload/videoPlayer.html | 146 ++++++++++++++++++++
3 files changed, 403 insertions(+), 0 deletions(-)
diff --git a/src/main/java/cc/mrbird/febs/ai/controller/fileUpload/ViewController.java b/src/main/java/cc/mrbird/febs/ai/controller/fileUpload/ViewController.java
index 2c601ff..1a92992 100644
--- a/src/main/java/cc/mrbird/febs/ai/controller/fileUpload/ViewController.java
+++ b/src/main/java/cc/mrbird/febs/ai/controller/fileUpload/ViewController.java
@@ -24,4 +24,18 @@
return FebsUtil.view("modules/ai/fileUpload/index");
}
+ @GetMapping("videoPlayer")
+ @RequiresPermissions("videoPlayer:index")
+ public String videoPlayer() {
+
+ return FebsUtil.view("modules/ai/fileUpload/videoPlayer");
+ }
+
+ @GetMapping("videoNative")
+ @RequiresPermissions("videoNative:index")
+ public String videoNative() {
+
+ return FebsUtil.view("modules/ai/fileUpload/videoNative");
+ }
+
}
diff --git a/src/main/resources/templates/febs/views/modules/ai/fileUpload/videoNative.html b/src/main/resources/templates/febs/views/modules/ai/fileUpload/videoNative.html
new file mode 100644
index 0000000..90a4b11
--- /dev/null
+++ b/src/main/resources/templates/febs/views/modules/ai/fileUpload/videoNative.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>视频播放器</title>
+ <style>
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ background-color: #f0f2f5;
+ color: #333;
+ line-height: 1.6;
+ }
+
+ .container {
+ max-width: 900px;
+ margin: 30px auto;
+ padding: 30px;
+ background: #f8f8f8;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+
+ .header {
+ text-align: center;
+ margin-bottom: 40px;
+ }
+
+ .header h2 {
+ color: #333;
+ margin-bottom: 10px;
+ font-size: 24px;
+ }
+
+ .header p {
+ color: #666;
+ font-size: 14px;
+ }
+
+ .play-container {
+ margin-top: 40px;
+ padding: 30px;
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ }
+
+ .play-container h3 {
+ margin-bottom: 20px;
+ color: #333;
+ font-size: 20px;
+ }
+
+ video {
+ width: 100%;
+ max-width: 800px;
+ height: auto;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ }
+
+ .control-panel {
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+
+ .input-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ input[type="text"] {
+ width: 400px;
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+
+ button {
+ padding: 10px 20px;
+ background-color: #1E9FFF;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background-color 0.3s;
+ }
+
+ button:hover {
+ background-color: #009688;
+ }
+
+ .message {
+ margin-top: 10px;
+ padding: 10px;
+ border-radius: 4px;
+ font-size: 14px;
+ }
+
+ .message.success {
+ background-color: #f0f9ff;
+ color: #1E9FFF;
+ border-left: 4px solid #1E9FFF;
+ }
+
+ .message.error {
+ background-color: #fff2f0;
+ color: #ff4d4f;
+ border-left: 4px solid #ff4d4f;
+ }
+
+ @media (max-width: 768px) {
+ .container {
+ margin: 20px;
+ padding: 20px;
+ }
+
+ input[type="text"] {
+ width: 100%;
+ max-width: 300px;
+ }
+
+ .control-panel {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="header">
+ <h2>视频播放器</h2>
+ <p>支持视频文件播放和跳跃播放</p>
+ </div>
+
+ <!-- 播放区域 -->
+ <div class="play-container">
+ <h3>视频播放</h3>
+ <video id="videoPlayer" controls width="100%" height="auto">
+ <source id="videoSource" src="" type="video/mp4">
+ 您的浏览器不支持视频播放
+ </video>
+ <div class="control-panel">
+ <div class="input-group">
+ <input type="text" id="videoUrl" placeholder="请输入视频播放地址">
+ <button id="loadVideo">加载视频</button>
+ </div>
+ </div>
+ <div id="message" class="message" style="display: none;"></div>
+ </div>
+ </div>
+
+ <script>
+ // 初始化
+ function init() {
+ // 绑定加载视频按钮事件
+ document.getElementById('loadVideo').addEventListener('click', function() {
+ var videoUrl = document.getElementById('videoUrl').value.trim();
+ if (!videoUrl) {
+ showMessage('请输入视频播放地址', 'error');
+ return;
+ }
+ loadVideo(videoUrl);
+ });
+ }
+
+ // 加载视频
+ function loadVideo(videoUrl) {
+ var videoPlayer = document.getElementById('videoPlayer');
+ var videoSource = document.getElementById('videoSource');
+
+ // 根据文件扩展名设置正确的MIME类型
+ var extension = videoUrl.split('.').pop().toLowerCase();
+ var mimeType = 'video/mp4';
+ switch(extension) {
+ case 'avi':
+ mimeType = 'video/x-msvideo';
+ break;
+ case 'mov':
+ mimeType = 'video/quicktime';
+ break;
+ case 'wmv':
+ mimeType = 'video/x-ms-wmv';
+ break;
+ case 'flv':
+ mimeType = 'video/x-flv';
+ break;
+ case 'webm':
+ mimeType = 'video/webm';
+ break;
+ case 'mkv':
+ mimeType = 'video/x-matroska';
+ break;
+ }
+
+ videoSource.src = videoUrl;
+ videoSource.type = mimeType;
+ videoPlayer.load();
+
+ showMessage('视频加载中...', 'success');
+
+ // 视频加载完成事件
+ videoPlayer.addEventListener('loadedmetadata', function() {
+ showMessage('视频加载完成', 'success');
+ });
+
+ // 视频加载错误事件
+ videoPlayer.addEventListener('error', function() {
+ showMessage('视频加载失败，请检查地址是否正确', 'error');
+ });
+ }
+
+ // 显示消息
+ function showMessage(text, type) {
+ var messageDiv = document.getElementById('message');
+ messageDiv.textContent = text;
+ messageDiv.className = 'message ' + type;
+ messageDiv.style.display = 'block';
+
+ // 3秒后自动隐藏
+ setTimeout(function() {
+ messageDiv.style.display = 'none';
+ }, 3000);
+ }
+
+ // 页面加载完成后初始化
+ window.onload = init;
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/febs/views/modules/ai/fileUpload/videoPlayer.html b/src/main/resources/templates/febs/views/modules/ai/fileUpload/videoPlayer.html
new file mode 100644
index 0000000..d89e8be
--- /dev/null
+++ b/src/main/resources/templates/febs/views/modules/ai/fileUpload/videoPlayer.html
@@ -0,0 +1,146 @@
+<div class="layui-fluid layui-anim febs-anim" id="febs-video-player" lay-title="视频播放器">
+ <div class="layui-row febs-container">
+ <div class="layui-col-md12">
+ <div class="layui-fluid">
+ <div class="upload-container">
+ <div class="upload-header">
+ <h2>视频播放器</h2>
+ <p>支持视频文件播放和跳跃播放</p>
+ </div>
+
+ <!-- 播放区域 -->
+ <div class="play-container" id="playContainer">
+ <h3 style="margin-bottom: 20px; color: #333;">视频播放</h3>
+ <video id="videoPlayer" controls width="100%" height="auto" style="max-width: 800px;">
+ <source id="videoSource" src="" type="video/mp4">
+ 您的浏览器不支持视频播放
+ </video>
+ <div class="layui-row layui-col-space10" style="margin-top: 20px;">
+ <div class="layui-col-xs12">
+ <div class="layui-input-inline" style="width: 400px;">
+ <input type="text" id="videoUrl" placeholder="请输入视频播放地址" class="layui-input">
+ </div>
+ <button class="layui-btn layui-btn-normal" id="loadVideo">加载视频</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<style>
+ .upload-container {
+ max-width: 900px;
+ margin: 30px auto;
+ padding: 30px;
+ background: #f8f8f8;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+
+ .upload-header {
+ text-align: center;
+ margin-bottom: 40px;
+ }
+
+ .upload-header h2 {
+ color: #333;
+ margin-bottom: 10px;
+ font-size: 24px;
+ }
+
+ .upload-header p {
+ color: #666;
+ font-size: 14px;
+ }
+
+ .play-container {
+ margin-top: 40px;
+ padding: 30px;
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ }
+
+ .play-container h3 {
+ margin-bottom: 20px;
+ color: #333;
+ font-size: 20px;
+ }
+
+ video {
+ width: 100%;
+ max-width: 800px;
+ height: auto;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ }
+
+ @media (max-width: 768px) {
+ .upload-container {
+ margin: 20px;
+ padding: 20px;
+ }
+ }
+</style>
+<script data-th-inline="javascript">
+ layui.use(['layer', 'jquery'], function() {
+ var layer = layui.layer,
+ $ = layui.jquery;
+
+ // 初始化
+ init();
+
+ function init() {
+ // 绑定加载视频按钮事件
+ $('#loadVideo').click(function() {
+ var videoUrl = $('#videoUrl').val().trim();
+ if (!videoUrl) {
+ layer.msg('请输入视频播放地址', {icon: 2});
+ return;
+ }
+ loadVideo(videoUrl);
+ });
+ }
+
+ // 加载视频
+ function loadVideo(videoUrl) {
+ var videoPlayer = document.getElementById('videoPlayer');
+ var videoSource = document.getElementById('videoSource');
+
+ // 根据文件扩展名设置正确的MIME类型
+ var extension = videoUrl.split('.').pop().toLowerCase();
+ var mimeType = 'video/mp4';
+ switch(extension) {
+ case 'avi':
+ mimeType = 'video/x-msvideo';
+ break;
+ case 'mov':
+ mimeType = 'video/quicktime';
+ break;
+ case 'wmv':
+ mimeType = 'video/x-ms-wmv';
+ break;
+ case 'flv':
+ mimeType = 'video/x-flv';
+ break;
+ case 'webm':
+ mimeType = 'video/webm';
+ break;
+ case 'mkv':
+ mimeType = 'video/x-matroska';
+ break;
+ }
+
+ videoSource.src = videoUrl;
+ videoSource.type = mimeType;
+ videoPlayer.load();
+
+ layer.msg('视频加载中...', {icon: 16, time: 0}, function() {
+ layer.closeAll();
+ layer.msg('视频加载完成', {icon: 1});
+ });
+ }
+ });
+</script>
\ No newline at end of file
--
Gitblit v1.9.1