Use HTML5 video tags for better video display

app.py

@@ -330,7 +330,14 @@ with gr.Blocks(title="NullAI - Knowledge Reasoning System", css=custom_css, them
     # Introduction Videos
     with gr.Tabs():
         with gr.Tab("🎬 Introduction"):
-            gr.Video("main_intro.mp4", label="NullAI Main Features", autoplay=False, show_label=True)
+            gr.HTML("""
+            <div style="text-align: center; margin: 20px 0;">
+                <video width="100%" height="auto" controls style="max-width: 800px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                    <source src="file/main_intro.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            """)
             gr.Markdown("""
             **Main Feature Highlights:**
             - Create specialized AIs instantly across 55+ domains
@@ -340,7 +347,14 @@ with gr.Blocks(title="NullAI - Knowledge Reasoning System", css=custom_css, them
             """)
 
         with gr.Tab("🎓 Educational AI"):
-            gr.Video("educational_ai.mp4", label="Easy Creation of Educational AIs", autoplay=False, show_label=True)
+            gr.HTML("""
+            <div style="text-align: center; margin: 20px 0;">
+                <video width="100%" height="auto" controls style="max-width: 800px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                    <source src="file/educational_ai.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            """)
             gr.Markdown("""
             **Educational AI Features:**
             - Deploy domain-specific educational AI in 30 seconds
@@ -350,7 +364,14 @@ with gr.Blocks(title="NullAI - Knowledge Reasoning System", css=custom_css, them
             """)
 
         with gr.Tab("🌌 Spatial Encoding"):
-            gr.Video("spatial_encoding.mp4", label="Multi-Dimensional Knowledge Space", autoplay=False, show_label=True)
+            gr.HTML("""
+            <div style="text-align: center; margin: 20px 0;">
+                <video width="100%" height="auto" controls style="max-width: 800px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                    <source src="file/spatial_encoding.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            """)
             gr.Markdown("""
             **Spatial Knowledge Encoding:**
             - Navigate knowledge in infinite dimensions