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> Published on webcomponents.org Build Status Coverage Status Polymer 2 only

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

Install

Link to this version
ImportedReleased 14 March 2018MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save SupportClass/sc-three-stage-video"#1.2.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.2.1

Dependencies

  • polymer#Polymer/polymer#^2.0.0