Play videos in random order!
Perfect for BRB screens!
Notice: the VLC Source now supports "Shuffle playlist" option.
- Download the latest executable for your system from above
- Place the executable into the folder where your video/audio files you want to use are located
- Run the file and follow the prompts for your settings
- A new file called
obs-random-videos.htmlwill be created in the same folder - Add a new
Browser Sourceto OBS- Check "Local File" and select the new
obs-random-videos.htmlyou just created. - Copy this path
- Uncheck "Local file" and set the url to
file://<paste the path you copied>- Windows example:
file://C:/obs-videos-folder/obs-random-videos.html - Mac/Linux example:
file:///obs-videos-folder/obs-random-videos.html(note the///instead of//)
- Windows example:
- Set the width and height to your full canvas resolution
- Check "Shutdown source when not visible"
- If you want a new shuffle each time: check "Refresh browser when scene becomes active"
- Leave "Page permissions" set to "Read access to OBS status information"
- Check "Local File" and select the new
- Rerun the executable when you add or remove videos or want to change any settings
- mp4
- m4v
- webm
- mpeg4
- mov
- mp3
- ogg
- aac
The project is organized into the following directories:
internal/- Internal packages not meant for external usemedia/- Media file handling functions (file detection, path handling)ui/- User interface and template functions (prompts, HTML generation)
web/- Web assetsjs/- JavaScript files for the HTML playermain.js- Contains the VideoPlayerManager and PlaylistManager classesbody.js- Initializes the player
templates/- HTML templates
The JavaScript code uses an object-oriented approach with two main classes:
-
VideoPlayerManager: Handles the dual-player system for seamless video playback
- Manages the two video players
- Handles transitions between videos
- Provides error handling
- Implements preloading for better performance
-
PlaylistManager: Manages the playlist state and operations
- Handles shuffling of videos
- Manages localStorage for persistence
- Provides methods for getting the next video
- VLC Source now supports "Shuffle playlist"
- This may be a more stable alternative to this project
- Mac's with M1 chip: Install the Intel version of VLC to use the VLC plugin
- Set
Refresh browser when scene becomes active - Video resolutions should match your canvas aspect ratio
- Autoplay only works in OBS!
- To test in your browser you must hit the Play button first
- Pro tip: webm videos support transparency (convert mov to webm to save on file size)
If you're experiencing issues with the player:
- Try hitting
Refresh cache of current pagein OBS - In OBS go to
Scene CollectionthenNew- Add only your random video browser source and see if this works
- If it works, then theres an external issue. I have no idea what is causing this so, if you have any info on this us know in the discussions
- Enable remote debugging and open the page for the browser source
- Open Chrome Dev tools
Applicationtab- Make sure
Local and session storagebox is CHECKED - Click
Clear site data
- Check if your video files are in a supported format and can be played in a browser
- Ensure your video files don't have special characters in their filenames
- If issues persist: use GitHub Discussions or join the Discord server
- Support for multiple video formats
- Support for audio files
- Switch to Bubble Tea
- Audio-only or video-only modes
- Option for cross-fading between videos
- Option to set HTML background color
- Good for videos with weird aspect ratio
- Good for audio files
- Switch to Wails UI for a graphical interface
- Add support for image files (with configurable display duration)
- Improve error handling and user feedback