From 516c89daa0343425721b2573b2aebe2bc0e124cb Mon Sep 17 00:00:00 2001
From: root <root@nonebot.top>
Date: Tue, 17 Feb 2026 23:58:07 +0800
Subject: [PATCH] =?UTF-8?q?fix(video-mobile):=20=E9=99=90=E5=88=B6?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E5=B0=BA=E5=AF=B8=E5=B9=B6=E5=90=AF?=
 =?UTF-8?q?=E7=94=A8playsinline=E9=98=B2=E6=AD=A2=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=92=91=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/public/css/video.css    | 26 +++++++++++++++++++++++++-
 app/static/public/js/video.js      |  4 +++-
 app/static/public/pages/video.html |  6 +++---
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/static/public/css/video.css b/app/static/public/css/video.css
index ced9450..be3b5d8 100644
--- a/app/static/public/css/video.css
+++ b/app/static/public/css/video.css
@@ -11,6 +11,7 @@
 body {
   background-color: var(--video-bg);
   background-image: none;
+  overflow-x: hidden;
 }
 
 .video-header-row {
@@ -658,6 +659,8 @@ body {
 }
 
 .edit-preview-wrap {
+  width: 100%;
+  max-width: 100%;
   border-radius: 10px;
   background: #000;
   overflow: hidden;
@@ -665,9 +668,13 @@ body {
 }
 
 #editVideo {
+  display: block;
   width: 100%;
+  height: auto;
+  max-width: 100%;
   max-height: 420px;
   background: #000;
+  object-fit: contain;
 }
 
 .edit-slider-wrap {
@@ -778,9 +785,13 @@ body {
 
 #mergeVideoPreviewA,
 #mergeVideoPreviewB {
+  display: block;
   width: 100%;
+  height: auto;
+  max-width: 100%;
   max-height: 240px;
   background: #000;
+  object-fit: contain;
 }
 
 #mergeTimelineA,
@@ -1035,7 +1046,12 @@ html[data-theme='dark'] .cache-video-item.is-active .cache-video-thumb-wrap {
   }
 
   .video-item video {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: 100%;
     max-height: 240px;
+    object-fit: contain;
   }
 
   .video-item-actions {
@@ -1049,8 +1065,16 @@ html[data-theme='dark'] .cache-video-item.is-active .cache-video-thumb-wrap {
     font-size: 10px;
   }
 
+  .edit-preview-wrap {
+    max-height: 62vh;
+  }
+
   #editVideo {
-    max-height: 260px;
+    max-height: 60vh;
+  }
+
+  .manual-merge-col .edit-preview-wrap {
+    max-height: 44vh;
   }
 
   .manual-merge-grid {
diff --git a/app/static/public/js/video.js b/app/static/public/js/video.js
index a75d75d..dd23882 100644
--- a/app/static/public/js/video.js
+++ b/app/static/public/js/video.js
@@ -1182,6 +1182,8 @@
     if (videoEl) {
       videoEl.controls = true;
       videoEl.preload = 'metadata';
+      videoEl.setAttribute('playsinline', '');
+      videoEl.setAttribute('webkit-playsinline', '');
       const source = videoEl.querySelector('source');
       if (source && source.getAttribute('src')) {
         videoUrl = source.getAttribute('src');
@@ -1199,7 +1201,7 @@
     const body = container.querySelector('.video-item-body');
     if (!body) return;
     const actions = body.querySelector('.video-item-actions-overlay');
-    body.innerHTML = `\n      <video controls preload="metadata">\n        <source src="${safeUrl}" type="video/mp4">\n      </video>\n    `;
+    body.innerHTML = `\n      <video controls preload="metadata" playsinline webkit-playsinline>\n        <source src="${safeUrl}" type="video/mp4">\n      </video>\n    `;
     if (actions) {
       body.appendChild(actions);
     }
diff --git a/app/static/public/pages/video.html b/app/static/public/pages/video.html
index 995640d..b7490e6 100644
--- a/app/static/public/pages/video.html
+++ b/app/static/public/pages/video.html
@@ -151,7 +151,7 @@
                 <div class="meta-item"><div class="meta-label">历史数量</div><div id="historyCount" class="meta-value">0</div></div>
               </div>
               <div class="edit-preview-wrap">
-                <video id="editVideo" controls preload="metadata"></video>
+                <video id="editVideo" controls preload="metadata" playsinline webkit-playsinline></video>
               </div>
               <div class="edit-slider-wrap">
                 <input id="editTimeline" class="timeline-delete-zone" data-delete-side="right" type="range" min="0" max="100000" step="1" value="0">
@@ -194,7 +194,7 @@
                   <div class="manual-merge-col">
                     <div class="meta-label">视频1拼接帧（向左保留）</div>
                     <div class="edit-preview-wrap">
-                      <video id="mergeVideoPreviewA" controls preload="metadata"></video>
+                      <video id="mergeVideoPreviewA" controls preload="metadata" playsinline webkit-playsinline></video>
                     </div>
                     <div class="edit-slider-wrap">
                       <input id="mergeTimelineA" class="timeline-delete-zone" data-delete-side="right" type="range" min="0" max="100000" step="1" value="0">
@@ -207,7 +207,7 @@
                   <div class="manual-merge-col">
                     <div class="meta-label">视频2拼接帧（向右保留）</div>
                     <div class="edit-preview-wrap">
-                      <video id="mergeVideoPreviewB" controls preload="metadata"></video>
+                      <video id="mergeVideoPreviewB" controls preload="metadata" playsinline webkit-playsinline></video>
                     </div>
                     <div class="edit-slider-wrap">
                       <input id="mergeTimelineB" class="timeline-delete-zone" data-delete-side="left" type="range" min="0" max="100000" step="1" value="0">