From 67858f54267a69bf73ee79cae5fb76535d4105f1 Mon Sep 17 00:00:00 2001
From: Administrator <15274802129@163.com>
Date: Wed, 14 Jan 2026 16:34:24 +0800
Subject: [PATCH] feat(video): 添加原生视频播放器页面
---
src/main/resources/templates/febs/views/modules/ai/fileUpload/videoPlayer.html | 146 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 146 insertions(+), 0 deletions(-)
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