So what is this thing?

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 )

Known issues 🐜

iOS Chrome browser in landscape mode: Zoom toggles on unexpectedly causing misalignment ( please use Safari browser instead )

Settings

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 )

Select video

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>

Effects

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 )

Projection

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.

Basic Controls

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