Administrator
6 hours ago bc0165c6171fc35385e7e7abfe007ad19e4dc092
feat(video): 添加视频播放器功能并优化视频播放接口

- 新增视频播放器HTML页面,支持多种视频格式播放
- 修改视频播放接口,增加companyId路径参数
- 移除登录用户获取companyId的逻辑,改为从路径参数获取
- 实现视频播放器前端界面,包含控制面板和消息提示功能
- 添加响应式布局适配移动端设备
- 支持MP4、AVI、MOV、WMV、FLV、WEBM、MKV等多种视频格式
1 files modified
1 files added
241 ■■■■■ changed files
src/main/java/cc/mrbird/febs/ai/controller/productPoint/VideoPlayController.java 6 ●●●● patch | view | raw | blame | history
src/main/resources/static/febs/quant/videoPlayer.html 235 ●●●●● patch | view | raw | blame | history
src/main/java/cc/mrbird/febs/ai/controller/productPoint/VideoPlayController.java
@@ -31,8 +31,8 @@
    public static final String baseUploadDir = "/home/javaweb/webresource/ai/file";
    @GetMapping("/play/{fileName}")
    public void playVideo(@PathVariable("fileName") String fileName, HttpServletRequest request, HttpServletResponse response) {
    @GetMapping("/play/{fileName}/{companyId}")
    public void playVideo(@PathVariable("fileName") String fileName,@PathVariable("companyId") String companyId, HttpServletRequest request, HttpServletResponse response) {
        log.info("开始播放视频文件: {}", fileName);
        // 配置参数
@@ -40,7 +40,7 @@
        final long MAX_INITIAL_SEGMENT = 1024 * 1024 * 15; // 最大初始片段大小(15MB),约30秒中等码率视频
        try {
            String companyId = LoginUserUtil.getLoginUser().getCompanyId();
//            String companyId = LoginUserUtil.getLoginUser().getCompanyId();
            String uploadDir = baseUploadDir + "/" + companyId;
            Path filePath = Paths.get(uploadDir, fileName);
src/main/resources/static/febs/quant/videoPlayer.html
New file
@@ -0,0 +1,235 @@
<!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: 20px;
            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[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: 15px;
            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">
                <input type="text" id="videoUrl" placeholder="请输入视频播放地址,例如:/fileUpload/play/example.mp4_1234567890">
                <button id="loadVideo">加载视频</button>
            </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>