sc-three-stage-video
A Polymer 2.x element for playing video assets with discrete enter, exit, and loop parts.
[ 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
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#^2.0.0
- Released
- 2018-03-14
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent