391 lines
16 KiB
HTML
391 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Help - Video Optimizer</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
.help-content {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.help-section {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.help-section h2 {
|
|
color: #FFC407;
|
|
font-size: 24px;
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid #FFC407;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.help-section h3 {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
margin-top: 25px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.help-section p,
|
|
.help-section li {
|
|
line-height: 1.8;
|
|
color: #ccc;
|
|
}
|
|
|
|
.help-section ul,
|
|
.help-section ol {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.help-section li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.help-section code {
|
|
background: #000;
|
|
color: #FFC407;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.help-section .example {
|
|
background: #000;
|
|
border-left: 4px solid #FFC407;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.help-section .warning {
|
|
background: #2a1a00;
|
|
border-left: 4px solid #ff6b00;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.help-section .tip {
|
|
background: #001a2a;
|
|
border-left: 4px solid #0099ff;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.nav-buttons a,
|
|
.nav-buttons button {
|
|
padding: 12px 24px;
|
|
background: #333;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
border: 1px solid #555;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-buttons a:hover,
|
|
.nav-buttons button:hover {
|
|
background: #FFC407;
|
|
color: #000;
|
|
border-color: #FFC407;
|
|
}
|
|
|
|
.platforms-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.platform-card {
|
|
background: #000;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.platform-card h4 {
|
|
color: #FFC407;
|
|
margin: 0 0 10px 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.platform-card p {
|
|
margin: 5px 0;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Main Content -->
|
|
<div class="container" id="mainApp">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<h1>Help & Documentation</h1>
|
|
<p class="subtitle">Video Optimizer User Guide</p>
|
|
</header>
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="nav-buttons">
|
|
<a href="index.html">← Back to App</a>
|
|
</div>
|
|
|
|
<div class="help-content">
|
|
<!-- Quick Start -->
|
|
<div class="help-section">
|
|
<h2>Quick Start Guide</h2>
|
|
<p>Get started with video optimization in 3 simple steps:</p>
|
|
<ol>
|
|
<li><strong>Upload Your Video</strong>
|
|
<ul>
|
|
<li>Drag and drop your video file onto the upload area</li>
|
|
<li>Or click the upload area to browse your files</li>
|
|
<li>Supported formats: MP4, MOV, AVI, MKV, WEBM, FLV, WMV, M4V</li>
|
|
<li>Maximum file size: 500MB</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Configure Platform & Aspect Ratio</strong>
|
|
<ul>
|
|
<li>Select your target platform (TikTok, Meta, YouTube, etc.)</li>
|
|
<li>Choose the aspect ratio (9:16 vertical, 16:9 horizontal, 1:1 square)</li>
|
|
<li>The app will auto-detect these from your filename if it matches the naming convention</li>
|
|
</ul>
|
|
</li>
|
|
<li><strong>Convert & Download</strong>
|
|
<ul>
|
|
<li>Click "Convert Video" to optimize</li>
|
|
<li>Compare the original and optimized videos side-by-side</li>
|
|
<li>Download the optimized version</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Smart Detection -->
|
|
<div class="help-section">
|
|
<h2>Smart Detection (Filename Patterns)</h2>
|
|
<p>The app can automatically detect the platform and aspect ratio from your filename. Use these patterns:</p>
|
|
|
|
<h3>Platform Patterns</h3>
|
|
<div class="example">
|
|
<p><code>_tiktok_</code> → TikTok</p>
|
|
<p><code>_meta_</code> or <code>_facebook_</code> or <code>_instagram_</code> → Meta (Facebook & Instagram)</p>
|
|
<p><code>_pinterest_</code> → Pinterest</p>
|
|
<p><code>_snapchat_</code> or <code>_snap_</code> → Snapchat</p>
|
|
<p><code>_youtube_</code> → YouTube</p>
|
|
<p><code>_youtube_ctv_</code> → YouTube Connected TV</p>
|
|
<p><code>_amazon_prime_</code> → Amazon Prime Video</p>
|
|
<p><code>_amazon_freevee_</code> or <code>_freevee_</code> → Amazon Freevee</p>
|
|
</div>
|
|
|
|
<h3>Aspect Ratio Patterns</h3>
|
|
<div class="example">
|
|
<p><code>_16x9_</code> or <code>_16:9_</code> or <code>_horizontal_</code> → 16:9 (Landscape)</p>
|
|
<p><code>_9x16_</code> or <code>_9:16_</code> or <code>_vertical_</code> → 9:16 (Portrait)</p>
|
|
<p><code>_1x1_</code> or <code>_1:1_</code> or <code>_square_</code> → 1:1 (Square)</p>
|
|
<p><code>_4x5_</code> or <code>_4:5_</code> → 4:5</p>
|
|
<p><code>_2x3_</code> or <code>_2:3_</code> → 2:3</p>
|
|
</div>
|
|
|
|
<h3>Example Filenames</h3>
|
|
<div class="tip">
|
|
<p><code>summer_campaign_tiktok_9x16.mp4</code> → Auto-detects TikTok + 9:16</p>
|
|
<p><code>product_launch_meta_1x1.mov</code> → Auto-detects Meta + 1:1</p>
|
|
<p><code>tutorial_youtube_16x9.mp4</code> → Auto-detects YouTube + 16:9</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Supported Platforms -->
|
|
<div class="help-section">
|
|
<h2>Supported Platforms</h2>
|
|
<p>The Video Optimizer supports 21 platform configurations across 8 major social media platforms:</p>
|
|
|
|
<div class="platforms-grid">
|
|
<div class="platform-card">
|
|
<h4>TikTok</h4>
|
|
<p>Codec: H264</p>
|
|
<p>Ratios: 9:16, 1:1</p>
|
|
</div>
|
|
<div class="platform-card">
|
|
<h4>Meta (FB/IG)</h4>
|
|
<p>Codec: H264</p>
|
|
<p>Ratios: 9:16, 1:1, 16:9, 4:5</p>
|
|
</div>
|
|
<div class="platform-card">
|
|
<h4>Pinterest</h4>
|
|
<p>Codec: H264</p>
|
|
<p>Ratios: 2:3, 1:1, 9:16, 16:9</p>
|
|
</div>
|
|
<div class="platform-card">
|
|
<h4>Snapchat</h4>
|
|
<p>Codec: H264</p>
|
|
<p>Ratios: 9:16, 16:9</p>
|
|
</div>
|
|
<div class="platform-card">
|
|
<h4>YouTube</h4>
|
|
<p>Codec: H264</p>
|
|
<p>Ratios: 16:9, 9:16, 1:1</p>
|
|
</div>
|
|
<div class="platform-card">
|
|
<h4>YouTube CTV</h4>
|
|
<p>Codec: H264</p>
|
|
<p>Ratios: 16:9</p>
|
|
</div>
|
|
<div class="platform-card">
|
|
<h4>Amazon Prime</h4>
|
|
<p>Codec: H264</p>
|
|
<p>Ratios: 16:9, 1:1</p>
|
|
</div>
|
|
<div class="platform-card">
|
|
<h4>Amazon Freevee</h4>
|
|
<p>Codec: H264</p>
|
|
<p>Ratios: 16:9, 1:1</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin Panel -->
|
|
<div class="help-section">
|
|
<h2>Admin Panel Access</h2>
|
|
<p>All authenticated users have access to the admin panel where you can:</p>
|
|
<ul>
|
|
<li><strong>View Platform Specifications:</strong> See all configured platforms and their settings</li>
|
|
<li><strong>Add New Platforms:</strong> Create custom platform configurations</li>
|
|
<li><strong>Edit Existing Platforms:</strong> Modify codec, bitrate, resolution for any platform</li>
|
|
<li><strong>Delete Platforms:</strong> Remove platforms you no longer need</li>
|
|
<li><strong>Export/Import Specifications:</strong> Backup or share platform configurations as JSON</li>
|
|
<li><strong>Manage Naming Conventions:</strong> Add or edit filename detection patterns</li>
|
|
<li><strong>Reset to Factory Defaults:</strong> Restore original platform configurations</li>
|
|
</ul>
|
|
|
|
<div class="tip">
|
|
<p><strong>Tip:</strong> Access the admin panel by clicking the "Admin Panel" button in the navigation or by going to <code>/admin.html</code></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Troubleshooting -->
|
|
<div class="help-section">
|
|
<h2>Troubleshooting</h2>
|
|
|
|
<h3>Video Upload Issues</h3>
|
|
<div class="warning">
|
|
<p><strong>Problem:</strong> "File size exceeds maximum allowed"</p>
|
|
<p><strong>Solution:</strong> The maximum file size is 500MB. Compress your video before uploading or use a smaller file.</p>
|
|
</div>
|
|
|
|
<div class="warning">
|
|
<p><strong>Problem:</strong> "File type not allowed"</p>
|
|
<p><strong>Solution:</strong> Only video formats are supported: MP4, MOV, AVI, MKV, WEBM, FLV, WMV, M4V. Convert your video to a supported format.</p>
|
|
</div>
|
|
|
|
<h3>Conversion Errors</h3>
|
|
<div class="warning">
|
|
<p><strong>Problem:</strong> Conversion fails or takes too long</p>
|
|
<p><strong>Solution:</strong> This may be due to video complexity or server load. Try:</p>
|
|
<ul>
|
|
<li>Using a shorter video</li>
|
|
<li>Using a lower resolution source file</li>
|
|
<li>Trying again after a few minutes</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3>Playback Issues</h3>
|
|
<div class="warning">
|
|
<p><strong>Problem:</strong> Videos don't play in comparison view</p>
|
|
<p><strong>Solution:</strong> Your browser may not support the video codec. Try using a modern browser like Chrome, Firefox, or Edge.</p>
|
|
</div>
|
|
|
|
<h3>Authentication Issues</h3>
|
|
<div class="warning">
|
|
<p><strong>Problem:</strong> "Unauthorized: You are not authorized to access this application"</p>
|
|
<p><strong>Solution:</strong> Your Microsoft account is not part of the authorized organization. Contact your administrator.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ -->
|
|
<div class="help-section">
|
|
<h2>Frequently Asked Questions</h2>
|
|
|
|
<h3>What video formats can I upload?</h3>
|
|
<p>MP4, MOV, AVI, MKV, WEBM, FLV, WMV, and M4V files up to 500MB.</p>
|
|
|
|
<h3>How long are my videos stored on the server?</h3>
|
|
<p>Videos are automatically deleted after 24 hours to save server space.</p>
|
|
|
|
<h3>Can I download the original video after optimization?</h3>
|
|
<p>Yes! Both the original and optimized videos are available for download in the comparison view.</p>
|
|
|
|
<h3>What's the difference between platforms?</h3>
|
|
<p>Each platform has specific codec, bitrate, and resolution requirements for optimal performance. The app automatically applies the correct settings.</p>
|
|
|
|
<h3>Can I customize bitrate settings?</h3>
|
|
<p>Yes! Use the "Custom Bitrate" field in the configuration section to override the platform default.</p>
|
|
|
|
<h3>Do I need an account to use this tool?</h3>
|
|
<p>Yes, you need to sign in with your Microsoft account to access the application.</p>
|
|
|
|
<h3>Who can access the admin panel?</h3>
|
|
<p>All authenticated users have access to the admin panel.</p>
|
|
|
|
<h3>Can I add my own platform configurations?</h3>
|
|
<p>Yes! Use the admin panel to add custom platforms with specific codec and quality settings.</p>
|
|
</div>
|
|
|
|
<!-- Technical Details -->
|
|
<div class="help-section">
|
|
<h2>Technical Details</h2>
|
|
|
|
<h3>Codec Settings</h3>
|
|
<ul>
|
|
<li><strong>H.264 (libx264):</strong> Preset: medium, CRF: 23, Profile: main</li>
|
|
<li><strong>H.265 (libx265):</strong> Preset: medium, CRF: 28</li>
|
|
<li><strong>VP9 (libvpx-vp9):</strong> Deadline: good, CPU-used: 2, Row-mt: 1</li>
|
|
</ul>
|
|
|
|
<h3>Audio Settings</h3>
|
|
<ul>
|
|
<li><strong>Mobile platforms:</strong> AAC codec at 128kbps</li>
|
|
<li><strong>CTV platforms:</strong> AAC codec at 192kbps</li>
|
|
<li><strong>VP9 videos:</strong> Opus codec at 128-192kbps</li>
|
|
</ul>
|
|
|
|
<h3>File Retention</h3>
|
|
<p>Uploaded and converted files are automatically deleted after the configured retention period (default: 24 hours) to prevent server storage exhaustion.</p>
|
|
|
|
<h3>Conversion Logging</h3>
|
|
<p>All conversions are logged with metadata including user, platform, aspect ratio, file sizes, conversion duration, and status for audit and analytics purposes.</p>
|
|
</div>
|
|
|
|
<!-- Contact -->
|
|
<div class="help-section">
|
|
<h2>Need More Help?</h2>
|
|
<p>If you're experiencing issues not covered in this guide, please contact your system administrator or technical support team.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|