From 39107c5a27d4c8c4fa7b29c126b37f748ce2ce5c Mon Sep 17 00:00:00 2001
From: Administrator <15274802129@163.com>
Date: Wed, 14 Jan 2026 16:41:47 +0800
Subject: [PATCH] feat(video): 添加原生视频播放器页面
---
src/main/resources/static/febs/videoNative.html | 243 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 243 insertions(+), 0 deletions(-)
diff --git a/src/main/resources/static/febs/videoNative.html b/src/main/resources/static/febs/videoNative.html
new file mode 100644
index 0000000..90a4b11
--- /dev/null
+++ b/src/main/resources/static/febs/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
--
Gitblit v1.9.1