Directory

← Back

sc-three-stage-video

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

Author

Rating

Popularity

<100

[ 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

Compatibility

(Loading compatibility data...)

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

sc-three-stage-video - Vaadin Add-on Directory

A Polymer 2.x element for playing video assets with discrete enter, exit, and loop parts. sc-three-stage-video - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/SupportClass/sc-three-stage-video](https://github.com//SupportClass/sc-three-stage-video/blob/v1.2.1/README.md) on 2019-05-22 ]** # \ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/SupportClass/sc-three-stage-video) [![Build Status](https://travis-ci.org/SupportClass/sc-three-stage-video.svg?branch=master)](https://travis-ci.org/SupportClass/sc-three-stage-video) [![Coverage Status](https://coveralls.io/repos/github/SupportClass/sc-three-stage-video/badge.svg?branch=master)](https://coveralls.io/github/SupportClass/sc-three-stage-video?branch=master) ![Polymer 2 only](https://img.shields.io/badge/Polymer%202-only-blue.svg) 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 ```bash bower install --save SupportClass/sc-three-stage-video ``` ## Example ```html ``` ## 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: ```bash # 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 ```
Online