sc-three-stage-video

A Polymer 2.x element for playing video assets with discrete enter, exit, and loop parts.

View larger

Close

[ This description is mirrored from README.md at github.com/SupportClass/sc-three-stage-video on 2019-05-22 ]

<sc-three-stage-video>

A Polymer 2.x element for playing video assets with discrete enter, exit, and loop parts.

Motivation

Sometimes we have assets that just doesn't make sense to implement purely in code. The asset might be too complex, too performance-intensive, or maybe we just don't have the time. In these cases, we often will pre-render the asset and slice it into discrete enter, loop, and exit parts.

Installation

bower install --save SupportClass/sc-three-stage-video

Example

<sc-three-stage-video
    id="demo"
    enter-src="demo/enter.webm"
    loop-src="demo/loop.webm"
    exit-src="demo/exit.webm">
</sc-three-stage-video>

<button onclick="demo.enterAndLoop()">Enter and Loop</button>
<button onclick="demo.exit()">Exit</button>
<button onclick="demo.exit(true)">Fast Exit</button>

How do I make transparent videos like the demo?

Some browsers (only Chrome and Firefox at the time of this writing) support an alpha channel in .webm videos. However, most tools don't actually have support for rendering or encoding a .webm with this alpha channel, so you will probably have to first render out in a format that does support alpha (such as .avi or .mov) and then encode the .webm using FFmpeg:

# This is just an example. There's tons of parameters that you can play with, but this will get you going.
ffmpeg.exe -i enter.avi -c:v libvpx -b:v 3000k -c:a libvorbis -b:a 128k enter.webm

Links

• GitHub Homepage
• Issue tracker
• View on GitHub
• Online Demo
• Documentation

Compatibility