Media Viewer Tutorial

📋 What This App Does

This powerful web application allows you to:

📁

Load Media Files

Import images and videos from JSON configuration files

🎨

Flexible Display

9:16 portrait or 16:9 landscape aspect ratios

▶️

Smart Navigation

Manual or automatic slideshow playback

🎥

Screen Recording

Record presentations as WebM video files

🚀 Quick Start Guide

1 Download the Application

Save the HTML code provided earlier as media-viewer.html

💡 Tip: Right-click → Save As → Choose location on your computer

2 Launch the App

Double-click the HTML file to open it in your web browser

⚠️ Note: For best results, use Chrome, Firefox, or Edge

📝 Step 1: Prepare Your Media JSON File

1 JSON Structure

Create a JSON file with this exact structure:

{
  "media": [
    {
      "type": "image",
      "url": "https://example.com/image1.jpg",
      "duration": 3
    },
    {
      "type": "video",
      "url": "https://example.com/video1.mp4",
      "duration": 5
    }
  ]
}
                

2 Field Explanations

Field	Type	Description	Example
`type`	string	Must be "image" or "video"	`"image"`
`url`	string	Full URL to media file	`"https://site.com/photo.jpg"`
`duration`	number	Display time in seconds	`3.5`

3 Sample JSON Files

// For online media
{
  "media": [
    {
      "type": "image",
      "url": "https://images.unsplash.com/photo-1541963463532-d68292c34b19",
      "duration": 4
    },
    {
      "type": "video",
      "url": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      "duration": 6
    }
  ]
}
                

// For local media (requires local server)
{
  "media": [
    {
      "type": "image",
      "url": "http://localhost:8000/images/slide1.jpg",
      "duration": 3
    }
  ]
}
                

🖥️ Step 2: Application Interface Tour

1 Main Sections

The application is divided into 5 main sections:

📁

File Upload

Load your JSON configuration file here

⚙️

Controls Panel

Settings and navigation buttons

🖼️

Canvas Display

Main area showing media

📋

Media List

All loaded media items

2 Control Buttons

⏮ Previous Next ⏭ ▶ Auto Play ⏸ Pause ● Start Recording

📁 Step 3: Loading Your Media

1 Load JSON File

Click the "Choose File" button and select your JSON configuration file

✅ Success Indicator: Status bar shows "Loaded X media items"

2 Troubleshooting Loading Issues

Problem	Solution
"Invalid JSON format"	Validate JSON at jsonlint.com
Media not loading	Check CORS permissions, use local server
Black screen	Verify media URLs in JSON file

🎨 Step 4: Display Configuration

1 Aspect Ratio Selection

Choose between two display modes:

9:16 Portrait

Perfect for:

Mobile screens
Instagram Stories
Vertical presentations

16:9 Landscape

Perfect for:

Desktop monitors
YouTube videos
Widescreen presentations

2 Auto-advance Settings

Control how long each media displays during auto-play:

Slider: Drag between 1-10 seconds

Input box: Type exact values (supports decimals like 2.5)

💡 Pro Tip: Use shorter durations (2-3s) for images, longer (5-6s) for videos

▶️ Step 5: Navigation & Playback

1 Manual Navigation

Buttons

• Previous/Next buttons

• Click media list items

Keyboard Shortcuts

• ← Previous media

• → Next media

• Space Toggle auto-play

2 Auto-play Mode

Create automatic slideshows:

Click ▶ Auto Play to start
Media advances automatically based on duration setting
Click ⏸ Pause to stop at any time
Adjust duration anytime - changes apply immediately

🎥 Step 6: Recording Presentations

1 Starting Recording

Click ● Start Recording (button turns red)
Red dot appears in canvas corner
"Recording..." indicator appears

⚠️ Important: Browser may ask for recording permission

2 During Recording

Everything displayed is captured:

Media transitions
Aspect ratio changes
Navigation actions
Canvas content exactly as shown

🎬 Recording Tips:

Plan your sequence before recording
Use consistent aspect ratios
Test timing with auto-play first
Close other tabs for better performance

3 Saving Your Recording

Click ⏹ Stop Recording when finished
Wait for processing (status bar shows progress)
File downloads automatically as WebM

✅ File Format: WebM video (can be converted to MP4 using online tools)

🔧 Step 7: Local Development Setup

1 Setting Up Local Server

For local files, you need a local server:

# Windows/Mac/Linux - Using Python
# 1. Open terminal/command prompt
# 2. Navigate to your folder
cd C:\path\to\your\folder

# 3. Start local server
python -m http.server 8000

# 4. Access app at:
# http://localhost:8000/media-viewer.html
                

💡 Alternative: You can also use Live Server extension in VS Code

2 Local Media Configuration

{
  "media": [
    {
      "type": "image",
      "url": "http://localhost:8000/images/slide1.jpg",
      "duration": 3
    },
    {
      "type": "image",
      "url": "http://localhost:8000/images/slide2.jpg",
      "duration": 3
    }
  ]
}
                

⚡ Keyboard Shortcuts

Key	Action	Description
← Left Arrow	Previous Media	Go to previous item
→ Right Arrow	Next Media	Go to next item
Space	Toggle Auto-play	Start/stop automatic slideshow
R	Toggle Recording	Start/stop recording (canvas must be focused)

🚨 Troubleshooting Guide

Symptom	Possible Cause	Solution
Recording not working	Browser permissions	Allow screen recording permission, use Chrome/Firefox
Media won't load	CORS restrictions	Use local server for local files
Slow performance	Large media files	Optimize images/videos before loading
Auto-play too fast	Duration setting	Increase duration in settings
WebM won't play	Codec support	Convert to MP4 using online converter

📚 Additional Resources

🌐

JSON Validator

jsonlint.com

🎨

Media Optimization

TinyPNG for images

🔧

WebM to MP4

CloudConvert

💻

Local Server Guide

MDN Guide

🎬 Media Viewer with Recording