Skip to content

Latest commit

 

History

History

animated-image

README.md

K-Animated-Image

#WebComponent #Gif

Welcome to K-Animated-Image, a web component designed to effortlessly integrate and showcase autoplaying and muted videos with A-B loop functionality. This lightweight and versatile component is perfect for adding dynamic animated content to your web projects.

The "animated image" should be a video that will be played automatically and muted. If timestamps A and B are specified, the video will loop from A to B. Think: A-B repeat.

Usage

Load the web component:

<script type="module" src="path/to/k-animated-image.js"></script>

And use it:

<k-animated-image
    src="./robin-breaking-vase.mp4"
    loopA="10.0"
    loopB="10.5"
    caption="Robin analyzes a vase then dramatically breaks it."
/>

  • src is the source of the video. Reactive.

  • caption is the label. Reactive.

  • Both loopA and loopB must be specified for the part to loop. Values are expressed in seconds, similar to currentTime. Not reactive (must be set from the start).

The snippet above has the same meaning as:

<div class="k-animated-image" role="img" aria-label=props.caption>
    <video autoplay muted src=props.src></video>
</div>

Uses / Might use

Background

I've been meaning to make something like this since forever. The goal was to animate the middle part of the following meme: 【MMD Meme】 Shut up and Dance! 【ft. Kaito, Len, IO】 | YouTube

Now, I need it for something more important.

I tried to clip "Robin breaking vase" and convert it to a gif, but the output was almost 20mb. Even after optimizing it, it was still huge (9mb)!

I decided to use mp4 like Telegram, with one extra feature: A-B loop.
Robin should analyze the vase like normal, break it, then start "weeping" (this is our A-B loop).

Name

TBD. For now, let's call it "animated image" and use role=img.

These things have different meanings from an accessibility perspective.

Related

Credits