The boundless video player is a slit-scanning web app that continuously resamples a video's edge pixels during playback and projects them outwards in 3D, in effect removing that video's traditional boundaries. I originally created this app to rekindle the nostalgia of classic 80's music videos, but in the process of making it discovered it's fun to try on just about any type of video.
This app should work on most devices, though please be aware I primarily developed this on desktop (Chrome browser) and tested on iPhone/iPad devices. For the best viewing experience, a large display is recommended. FWIW it runs great on an Ultra Widescreen monitor 😀
Click here to launch the app now: https://bvp.surge.sh/
( If you'd like to test drive it with your own videos, see the instructions below )
- iOS Chrome browser in landscape mode: Zoom toggles on unexpectedly causing misalignment ( please use Safari browser instead )
To get the most out of this app, try playing around with the following settings in realtime. ( Note: The URL is automatically updated to reflect your changes, which can be shared out to others )
A drop-down menu to choose between the available video samples.
Each demo is
configured with custom presets, but you can override them after the video is
loaded.
📺You can also load your own custom videos by adding the
following URL parameter: ?v=<PATH_TO_YOUR_CUSTOM_VIDEO_URL>
For best
results, use a non-DRM HTML5 video stream close in size to 640x360 or 480x360. You can
also optionally specify a starting timestamp with #t=<SECONDS>
Additional effects you can apply to improve the visualization
-
Show Vignette - Whether to apply a shadowy radial gradient on the main view
( URL param: #vig=true ) -
Trippy Mode - When activated, the expanded pixels are alpha-blended together, creating a neat smearing effect.
(URL param: #tr=true) -
Vaporwave Mode - Applies a cyan/magenta linear gradient to the view
Tip: To more authentically maximize the Vaporwave experience, try also adjusting the playback rate to 0.7 or lower
(URL param: #vw=true) -
Playback Rate - Changes the video playback speed
( URL param: #rate=R, where 0.1 <= R <= 2 ) -
Blurriness (pixels) - Applies a Gaussian blur on the projection, based on the defined pixel radius
To disable the blur, set the value to 0. Recommended setting: 1
( URL param: #blur=R, R = pixel radius )
Additional controls to fine-tune the expansion
-
Expansion method - The manner in which the boundary pixels of each video frame are expanded outwards
-
Fill screen - Pixels expand to fill the screen in a 3D perspective. ( Default behavior )
( URL param: #mode=0 ) -
Spread evenly: Pixels expand in a 3D perspective but equally in both directions
This pattern is mainly useful if you wish to improve the horizontal/vertical pixel alignment ( it may also help improve performance if you're on a slow device.)
( URL param: #mode=1 ) -
2D: Pixels expand only in the four cardinal directions.
( URL param: #mode=2 ) -
None: No expansion pattern is applied.
Choose this mode if you just want to see the main video
( URL param: #mode=3 )
-
-
Show Video Edges - Draws a white rectangle around the source region of the original video frame.
( URL param: #border=true ) -
Video X/Y Offset (pixels) - Sets the horizontal/vertical offsets of the cropped video from which the projection is based
Tip: Use this setting to eliminate projection gaps ( by moving offsets beyond pillarboxed regions and unwanted borders. )
( URL param: #xOff=X&yOff=Y, X/Y = pixel offsets ) -
Input Size (pixels): Sets the # of edge pixels to sample from the source video frame
Tip: Set both input and output slices to a similar larger value if you want the projection to be more blocky.
( URL param: #in=R, R = pixel radius ) -
Output Size (pixels): Sets the scaled pixel size of where the sampled edge pixels are redrawn.
Tip: Set this to a higher value if you want to increase the projection speed
( URL param: #out=R, R = pixel radius ) -
About: Opens up this document
-
Share URL: Generates a URL which reflects the video selection and settings and opens a Twitter dialog for sharing.
While the basic menu should give you direct access to playback and settings, the following keyboard shortcuts are also available for more convenience
Input | Action |
---|---|
Space ( or Click in window ) |
Toggles both menu and video playback |
Enter | Toggles settings |
Escape | Toggles video playback ( useful if you want to pause the screen to take a screenshot ) |
Hover/click bottom of screen | View or change video playback progress |
Have fun!
@joeycato