Video & Audio Support

Stream video content, parse podcast feeds, and create navigable media menus on Roku.

Overview

CastConductor v5.7+ delivers comprehensive native video and audio support, enabling you to:

• Stream live or on-demand video content
• Import podcast feeds (RSS, SoundCloud) with Netflix-style navigation
• Parse video playlists (YouTube, MRSS, custom JSON)
• Create navigable menus for Roku remote control
• Full styling control over feed layouts (colors, fonts, backgrounds)
• Audio playback controls with progress bar and scrubbing
• Enable Roku Universal Search integration via deep linking

Video Content Hierarchy

CastConductor supports video at multiple levels, giving you flexibility in how you structure your channel:

Priority Order

When multiple video sources are configured, they layer from back to front:

┌─────────────────────────────────────────────────────────────┐
│                     GLOBAL VIDEO STREAM                      │
│                  (Fullscreen, behind everything)             │
├─────────────────────────────────────────────────────────────┤
│                   SCENE VIDEO BACKGROUND                     │
│                 (Replaces static background)                 │
├─────────────────────────────────────────────────────────────┤
│  ┌────────────┐  ┌────────────┐  ┌────────────────────────┐ │
│  │ Container  │  │ Container  │  │      Container         │ │
│  │  (Video)   │  │  (Text)    │  │   (Feed Browser)       │ │
│  └────────────┘  └────────────┘  └────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

Playback Modes (v5.6.9+)

CastConductor supports four playback modes, configurable from the WordPress admin settings:

Dual Source Mode

This powerful mode enables creative combinations like:

• 🎵 Music Radio + Visualizer: Play an audio visualizer video (muted) while streaming live radio
• 🌊 Ambient + Podcast: Show relaxing nature video while playing podcast audio
• 🎤 DJ Cam + Different Audio: Display video feed while audio comes from separate CDN

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│         🔇 VIDEO LAYER (Muted)                             │
│         ┌─────────────────────────────────────────────────┐ │
│         │                                                 │ │
│         │            Visualizer / Ambient Video           │ │
│         │                                                 │ │
│         └─────────────────────────────────────────────────┘ │
│                                                             │
│         🔊 AUDIO LAYER (On Top)                            │
│         ┌─────────────────────────────────────────────────┐ │
│         │  🎵 Live Radio / Podcast / Music Stream         │ │
│         └─────────────────────────────────────────────────┘ │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Configuring Playback Mode

1. Go to CastConductor → Settings
2. Scroll to Playback Mode
3. Select your desired mode:
4. Standard (One Source) - Default, backwards compatible
5. Dual Source (Video Muted + Audio) - Video and audio play simultaneously
6. Video Only - Video with its own audio
7. Audio Only - Audio stream without video

Supported Video Formats

Adding Video Content

Option 1: Global Video Stream

Replace your audio stream with a video stream channel-wide.

1. Navigate to CastConductor → Settings
2. Find Streaming Mode and select Video
3. Enter your Video URL (HLS or MP4)
4. Save settings

The video will play fullscreen behind all your content blocks.

Option 2: Scene Video Background

Use video as an animated background for a specific scene.

1. Navigate to Scenes & Containers
2. Edit a scene
3. In Background Settings, select Video as the background type
4. Enter your video URL
5. Configure options:
6. Loop: Replay when video ends
7. Muted: Disable audio (recommended for backgrounds)

Option 3: Video Layer in Canvas Editor

Add video as a positioned layer within a content block.

1. Open the Canvas Editor for a content block
2. Click + Add Layer → 🎬 Video Layers → Video
3. Enter your video URL
4. Optionally add a poster image (thumbnail shown before playback)
5. Configure playback options:
6. Autoplay: Start automatically
7. Loop: Repeat when finished
8. Muted: Disable audio
9. Position and resize the video layer on the canvas

Option 4: Feed/Playlist Layer

Create a navigable menu of videos from a feed or playlist.

1. Open the Canvas Editor for a content block
2. Click + Add Layer → 📡 Feed Layers
3. Choose a feed type:
4. RSS/Podcast Feed — Standard podcast or video RSS
5. YouTube Playlist — Videos from a YouTube channel/playlist
6. JSON Feed — Custom API endpoint
7. Enter the feed URL
8. Configure display options:
9. Layout: Grid, List, or Carousel
10. Columns: Number of items per row (grid only)
11. Show thumbnails, titles, duration
12. Save and assign to a scene

Podcast & Audio Feeds

CastConductor's feed system works equally well for audio content. Perfect for:

• Podcast episode lists
• Music playlists
• SoundCloud tracks

Supported Podcast Feed Types

Adding a Podcast Feed

1. Get your podcast's RSS feed URL (usually found in your podcast hosting dashboard)
2. In the Canvas Editor, add a 📡 Feed Layer → RSS/Podcast Feed
3. Paste the RSS URL
4. Choose your preferred layout:
5. List — Vertical scrolling episode list
6. Grid — Multi-column grid of episode cards
7. Carousel — Netflix-style horizontal scrolling with center focus
8. Featured + List — Hero item with list below
9. Configure display options in the Precision Modal

On Roku, viewers will see an episode browser they can navigate with the remote:

• D-pad Up/Down/Left/Right: Navigate episodes
• OK: Open episode detail panel with full description
• OK (on detail panel): Play episode
• Back: Return to episode list or dismiss overlay
• Rewind/Fast Forward: Skip back/forward 10 seconds during playback

Episode Detail Panel

When a viewer selects an episode, they see a detail panel with:

• Episode artwork (automatically cached from feed)
• Full episode title
• Complete description/show notes
• Play button
• Audio progress bar (when playing)
• Transport controls: Rewind 10s / Play-Pause / Forward 10s

Podcast Feed Styling (v5.7.8+)

Customize every aspect of your podcast feed appearance directly from the Precision Modal (double-click the feed layer in Canvas Editor).

Card Styling

Carousel Mode (Netflix-Style)

The carousel layout features center-focused navigation:

┌────────────────────────────────────────────────────────────────┐
│                                                                 │
│    ┌─────┐   ┌─────────────┐   ┌─────┐                        │
│    │     │   │  ✨ FOCUSED  │   │     │                        │
│    │ Ep1 │   │    Ep2      │   │ Ep3 │                        │
│    │     │   │   (center)  │   │     │                        │
│    └─────┘   └─────────────┘   └─────┘                        │
│                                                                 │
│              ◀──── Cards slide through center ────▶            │
└────────────────────────────────────────────────────────────────┘

• Selected card is always centered on screen
• Cards smoothly slide left/right as you navigate
• Scale and glow effects highlight the focused item

Detail Overlay Styling (v5.7.9+)

Customize the episode detail panel that appears when you select an episode:

Audio Controls (v5.7.9+)

When enabled, the detail panel shows:

• Progress bar with current position / total duration
• Rewind 10 seconds button
• Play/Pause toggle
• Forward 10 seconds button

RSS Feed Structure (Content Card Data)

CastConductor parses standard RSS/Atom feeds and automatically generates Netflix-style content cards for each item. This works with any podcast, SoundCloud, YouTube RSS, or video feed that follows the standard format.

What Gets Parsed

Every <item> in an RSS feed becomes a navigable card on Roku:

Example: SoundCloud RSS Feeds

SoundCloud provides RSS feeds for both user profiles and playlists:

Full User Feed (all tracks):

https://feeds.soundcloud.com/users/soundcloud:users:{USER_ID}/sounds.rss

Playlist Feed (specific playlist):

https://feeds.soundcloud.com/playlists/soundcloud:playlists:{PLAYLIST_ID}/sounds.rss

Example: Standard Podcast RSS

Any podcast hosted on Anchor, Libsyn, Podbean, Apple Podcasts, etc. provides an RSS feed:

<item>
  <title>Episode 42: The Answer</title>
  <pubDate>Mon, 16 Dec 2024 10:00:00 +0000</pubDate>
  <itunes:duration>00:45:30</itunes:duration>
  <itunes:image href="https://example.com/episode42.jpg"/>
  <description>In this episode, we discuss...</description>
  <enclosure url="https://example.com/ep42.mp3" type="audio/mpeg"/>
</item>

Example: YouTube RSS (No API Key Required!)

YouTube provides free RSS feeds that don't require any API key or authentication:

Channel Feed:

https://www.youtube.com/feeds/videos.xml?channel_id={CHANNEL_ID}

Playlist Feed:

https://www.youtube.com/feeds/videos.xml?playlist_id={PLAYLIST_ID}

Each video becomes a navigable card with:

Menu Builder Navigation (v5.6.9+)

The Menu Builder provides a centralized way to configure how remote buttons trigger navigation across your entire channel. Instead of attaching overlays to individual containers, you define button bindings that work globally.

How It Works

┌─────────────────────────────────────────────────────────────┐
│                    LIVE STREAM (Playing)                     │
│                                                             │
│                       Your Branding                          │
│                                                             │
│ ┌───────────────────┐                                       │
│ │ 🎮 Main Menu      │                                       │
│ │ ─────────────────│                                       │
│ │ ▶ Browse Shows    │  ← Opens a Content Block overlay      │
│ │   Settings        │  ← Opens a submenu                    │
│ │   About           │  ← Custom action                      │
│ └───────────────────┘                                       │
│      (Press MENU to show)                                   │
└─────────────────────────────────────────────────────────────┘

Accessing Menu Builder

1. Go to CastConductor → 🎮 Menu Builder
2. You'll see two sections:
3. Remote Button Bindings — Map buttons to menus or content blocks
4. Menus — Create and manage hierarchical navigation menus

Configuring Button Bindings

Each remote button (MENU, UP, DOWN, LEFT, RIGHT) can be configured:

When set to "Opens Content Block", you can also configure:

• Position: left, right, top, bottom, center, fullscreen
• Animation: slide, fade, none
• Width/Height: Custom dimensions
• Auto-dismiss: Seconds before hiding (0 = never)

Creating Hierarchical Menus

1. Click + New Menu in the Menus section
2. Enter a menu name (e.g., "Main Menu", "Settings")
3. Add menu items with the + Add Item button
4. Configure each item:

Menu Styling

Each menu can be customized:

Example: Podcast Browse Menu

Create a menu that lets viewers browse your podcast archive:

1. Create Content Block: Design a feed browser content block with your podcast RSS
2. Create Menu in Menu Builder:
3. Name: "Browse Shows"
4. Add item: "Podcast Archive" → Type: Content Block → Select your feed content block
5. Add item: "Latest Episodes" → Type: Content Block → Select another content block
6. Add item: "Back" → Type: Action → Action: dismiss
7. Bind to MENU button:
8. Set MENU to "Opens Menu" → Select "Browse Shows"
9. Save all settings

Now when viewers press MENU on the remote, your custom navigation appears!

Remote Control Flow

Submenu Navigation

Menus support unlimited nesting:

Main Menu
├── Browse Shows → (opens Submenu)
│   ├── Podcast Archive → (opens Content Block)
│   ├── Video Library → (opens Content Block)
│   └── ← Back
├── Settings → (opens Submenu)
│   ├── Audio Quality
│   ├── Notifications
│   └── ← Back
└── About → (action: show about screen)

When navigating submenus, pressing Back returns to the parent menu rather than dismissing entirely.

Netflix-Style Focus Animations

The FeedBrowser component includes premium Netflix-style animations for an engaging browsing experience. When viewers navigate through content cards, the focused item smoothly scales up with a glow effect.

How Focus Animation Works

┌────────────────────────────────────────────────────────────────┐
│  Mixed Show Archive                                             │
│                                                                 │
│    ┌─────┐   ┌─────────┐   ┌─────┐   ┌─────┐                  │
│    │     │   │ ✨ GLOW  │   │     │   │     │                  │
│    │ Ep1 │   │   Ep2   │   │ Ep3 │   │ Ep4 │                  │
│    │     │   │  (108%) │   │     │   │     │                  │
│    └─────┘   └─────────┘   └─────┘   └─────┘                  │
│     (100%)    FOCUSED      (100%)    (100%)                    │
│                                                                 │
│  ◀──── D-pad Left/Right ────▶                                  │
└────────────────────────────────────────────────────────────────┘

Animation Specifications

Scale & Glow Settings

The focus animation can be customized:

Centered Scaling

Items scale from their center point, not the top-left corner. This creates a natural "pop forward" effect similar to Netflix and other streaming platforms.

' Scale animation uses original position for center-based scaling
if m.originalPositions[m.focusedIndex] <> invalid
    originalPos = m.originalPositions[m.focusedIndex]
    newX = originalPos.x - (item.width * (scaleFactor - 1.0) / 2.0)
    newY = originalPos.y - (item.height * (scaleFactor - 1.0) / 2.0)
end if

Remote Control Navigation

When displaying feeds or playlists, viewers navigate with the Roku remote:

Playback Controls (v5.7.9+)

During audio playback, the detail panel shows transport controls:

┌─────────────────────────────────────────────────────────────┐
│                  Episode Detail Panel                        │
│  ┌─────────────┐                                            │
│  │   Artwork   │   Episode Title                            │
│  │             │   Episode description and show notes...    │
│  └─────────────┘                                            │
│                                                              │
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░  12:34 / 45:00        │
│        ◄◄ 10s        ▶ Play        10s ►►                   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

• Progress Bar: Shows current position and total duration
• Rewind 10s: Skip back 10 seconds
• Play/Pause: Toggle playback
• Forward 10s: Skip forward 10 seconds

Navigation: Use Left/Right to move between buttons, OK to activate.

Navigation Hierarchy

Scene → Container → Feed Browser → Episode Card
                                       ↓
                               (OK pressed)
                                       ↓
                               Episode Detail Panel
                                       ↓
                               (OK pressed)
                                       ↓
                               Audio Playback (with controls)
                                       ↓
                               (Back pressed)
                                       ↓
                           Return to Feed Browser

Deep Linking (Roku Universal Search)

When viewers search on the Roku home screen, your content can appear in the results. Clicking a result launches your channel directly to that content.

Automatic Content IDs

CastConductor automatically generates unique content IDs for your video layers:

Configuring Deep Linking

When adding a video layer in the Canvas Editor, expand the 🔗 Deep Linking (Roku Search) section:

• Media Type: Choose how Roku categorizes your content
  • shortFormVideo — Clips under 15 minutes
  • movie — Standalone films
  • episode — TV or podcast episodes
  • live — Live streaming content
• Include in Roku Search: Toggle whether this content appears in Universal Search

Exporting the Roku Feed

To submit your content to Roku's Universal Search:

1. Access the feed export endpoint:

   https://yoursite.com/wp-json/castconductor/v5/deep-link/roku-feed
   

2. This returns a JSON feed in Roku Direct Publisher format
3. Submit the feed URL to Roku Partner Dashboard

Feed Data Model

All feed items (video or audio) are normalized to this structure:

{
  "id": "unique-item-id",
  "title": "Episode or Video Title",
  "description": "Item description",
  "thumbnail": "https://example.com/thumb.jpg",
  "media_url": "https://example.com/video.m3u8",
  "media_type": "video",
  "duration": 1800,
  "published": "2025-12-21T10:00:00Z"
}

This works for video playlists, podcast feeds, YouTube imports, and custom JSON APIs.

Caching & Performance

Feed data is cached to minimize API calls:

Podcast Artwork Caching (v5.7.3+)

Episode artwork is automatically:

1. Fetched from feed on first access
2. Resized for optimal Roku display (300x300 thumbnails)
3. Cached in WordPress to reduce load times
4. Served from your CDN instead of the original source

Clearing the Cache

Option 1: WordPress Admin

1. Go to CastConductor → Settings
2. Click Clear Feed Cache button
3. All cc_feed_* transients are deleted

Option 2: REST API

POST /wp-json/castconductor/v5/feeds/cache/clear

Troubleshooting

Video Not Playing

1. Check URL format: Ensure URL ends with .m3u8, .mp4, or .mpd
2. Test URL directly: Open the URL in a browser to verify it's accessible
3. Check CORS: Video servers must allow cross-origin requests
4. Check HTTPS: Roku requires HTTPS for most streams

Feed Not Loading

1. Verify feed URL: Open in browser to confirm it returns XML or JSON
2. Check feed type: Ensure you selected the correct type (RSS, YouTube, etc.)
3. Check API key: YouTube feeds require a valid API key

Navigation Not Working

1. Ensure feed layer has focus: Only the active feed browser receives key events
2. Check container assignment: Feed must be assigned to a scene to be displayed

Next Steps

• Scenes & Containers — Assign your video content to scenes
• CDN Setup — Optimize media delivery for large libraries
• REST API — Programmatically manage feeds and content