Converts images and video frames to pure CSS + HTML files using Breadth-first Search and Canny Edge Detection with keyframe animations.
https://kevinjycui.github.io/css-video/
*Image examples only (see video examples by cloning the repository)
Google Chrome
Microsoft Edge
Mozilla Firefox
Brave$ apt update
$ apt install git python3-dev python3-pip ffmpeg$ git clone https://github.com/kevinjycui/css-video.git
$ cd css-video$ python -m venv env
$ . env/bin/activate
(env) $ pip install -r requirements.txtAdd an image file (PNG or JPG) or convert a video file into frames using FFmpeg (note frames should be named frame%d.png in which %d represents an index starting from 0)
Example: Converting a video named input.mp4 into frames into a directory named frames (with 20 FPS)
(env) $ mkdir frames
(env) $ ffmpeg -i input.mp4 -vf fps=20 frames/frame%d.pngImage
(env) $ python3 generator.py -i input.pngVideo
(env) $ python3 generator.py -f frames/