Transparent Video Workflow

This page is mostly to store my commands and procedures so that I don't have to redo this every time I want to do transparent video stuff for JLab.

Initial Video

The initial video should be a .mov encoded in prores4444.

Creating Safari and Chrome Versions

Using Rotato Converter on MacOS, open the prores4444 .mov file and allow it to create the safari and chrome versions.

Use the following snippet to embed the video:

<video playsinline="true" webkit-playsinline="true" preload="auto" muted="muted">
    <source src="safari.mp4" type="video/mp4;codecs=hvc1" codecs="hvc1"></source>
    <source src="chrome.webm" type="video/webm"></source>
</video>

FFMPEG For Scrubbing

If you are only using a video as is for the web then you will just place the video as normal and you are done.

For frame-by-frame scrubbing, you will need to reencode the video using ffmpeg.

The -g 1 command will set every frame to a keyframe.

Chrome:

ffmpeg -c:v libvpx-vp9 -i chrome.webm -c:v libvpx-vp9 -g 1 chrome_scrubbable.webm 

Safari:

ffmpeg -i safari.mp4 -c:v libx265 -c:a copy -c:v copy -map 0 -pix_fmt yuv420p10le -x265-params "keyint=1" safari_scrubbable.mp4

Your new output files should be scrubbable for animating something like GreenSocks.