feat(PE-1271): add seamless video switching example#128
Open
jdmedlin1 wants to merge 1 commit into
Open
Conversation
Dual HTML5 video element implementation for gap-free playback on BrightSign players. Background-preloads the next video so transitions are instant with no black frames or freeze. Includes review fixes from the original draft: - Add missing <script src="index.js"> tag (JS was never loaded) - Remove stray closing </video> tag and duplicate CSS rules - Correct architecture.md reference from bundle.js to index.js
There was a problem hiding this comment.
Pull request overview
Adds a new browser example demonstrating “seamless” (gap-free) HTML5 video playback on BrightSign players by alternating between two stacked video elements while preloading the next asset in the background.
Changes:
- Added a new
seamless-video-switchingexample (HTML/JS + BrightScript autorun) implementing dual-video playback with background preloading. - Documented deployment and architecture for the new example (README + Mermaid diagram).
- Registered the new example in
examples/README.md.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| examples/README.md | Adds the new example to the Browser Examples compatibility matrix. |
| examples/browser/seamless-video-switching/README.md | Documents the approach, configuration, and SD-card deployment steps. |
| examples/browser/seamless-video-switching/index.js | Implements the dual-player playlist logic (preload + switch). |
| examples/browser/seamless-video-switching/index.html | Provides the two stacked <video> elements and loads index.js. |
| examples/browser/seamless-video-switching/autorun.brs | Launches the HTML app via roHtmlWidget with Node enabled. |
| examples/browser/seamless-video-switching/architecture.md | Mermaid diagram + narrative flow describing the intended switching behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+89
to
+104
| // Start playing the next video (while still hidden) | ||
| nextPlayer.play().catch(e => console.error('Play error:', e)); | ||
|
|
||
| // Switch visibility and audio immediately - the video is already preloaded | ||
| currentPlayer.pause(); | ||
| currentPlayer.muted = true; // Mute the outgoing player | ||
| currentPlayer.classList.add('hidden'); | ||
|
|
||
| nextPlayer.muted = false; // Unmute the incoming player | ||
| nextPlayer.classList.remove('hidden'); | ||
|
|
||
| // Toggle which player is visible | ||
| visibleVideoPlayer = visibleVideoPlayer === 1 ? 2 : 1; | ||
|
|
||
| // Preload the next video in the now-hidden player | ||
| preloadNextVideo(); |
Comment on lines
+29
to
+31
| videoFiles = fs.readdirSync(`${rootStoragePath}/${assetsFolder}`); | ||
| videoFiles = videoFiles.filter(filename => !filename.startsWith('.')); | ||
| videoFiles.sort(); |
| | [send-plugin-message](browser/send-plugin-message) | Plugin message communication between BrightScript and HTML/JS | 8.x, 9.x | | ||
| | [syncmanager-js](browser/syncmanager-js) | Multi-player content synchronization using SyncManager JS API | 8.x, 9.x | | ||
| | [large-file-download](browser/large-file-download) | Memory-bounded multi-GB download using Node streams in roHtmlWidget | 8.x, 9.x | | ||
| | [seamless-video-switching](browser/seamless-video-switching) | Gap-free HTML5 video playback using dual video elements with background preloading | 8.x, 9.x | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 Description
Dual HTML5 video element implementation for gap-free playback on BrightSign players. Background-preloads the next video so transitions are instant with no black frames or freeze.
Issue: Url to Jira Issue
📋 List of Changes
✔️ Dev Complete Checklist