Adding an "animated GIF" with api.video

Animated video preview

Traditionally, a video preview on the web is a poster image from the video, with a big play button in the middle. The poster can be a unique image, but more typically is a frame from the actual video. The poster is an attribute of the video tag, so adding the image is very easy.

But animation draws your eye. When you see the page moving, you're going to look to see what is going on, and by seeing that there is a movie, can watch it. So, how can you add an animated preview?

Many applications that use an animated preview use an animated GIF. We all love GIFs, and use them in our Slack conversations, add them on Twitter, often to great comedic effect. But - when you use a gif on Twitter - guess what? It is actually a looping mp4!

So why do many video APIs fall back to animated GIFs?

GIF: Not intended as a platform for animation

If we enter our time machine back to 1989, we can read what the creators of GIF have to say about animated GIFs: it is right in the specifications:

Animation - The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.

The reason is that video uses time based compression - allowing for compression across frames of the video, while a 15 fps animated GIFs has 15 static GIF images per second. That means: really big files.

Using HTML5 video

With just a few lines of code, we can loop the actual video file without any editing of the file:

<video loop muted autoplay controls id="video">
	<source src="vi4blUQJFrYWbaG44NChkH27.mp4#t=5">
</video>

<script>
	var video = document.getElementById("video");
	var START_TIME = 5;
    var END_TIME=10;

	 video.addEventListener("timeupdate", () => {
		 console.log(video.currentTime);
		 if(video.currentTime >= END_TIME){
			 video.currentTime = START_TIME;
			video.play();
	      }
	  });
	
	
	</script>

In the video tag, we append the video url with #t=5, telling the video player to start the playback at 5 seconds. Aside: if we used #t=5,10, it will stop the video at t=10 seconds, but the video does not loop.

To ensure the video loops, we add a listener to 'timeupdate' (which fires every 250 ms). When this exceeds the end time, we reset to start time, and begin the video playback again.

Using api.video

We can do the exact same thing with api.video player SDK:

    <iframe id="target" width="100%" height="100%"></iframe>
    <script>
        const START_TIME = 5;
        const ENDTIME = 10;

        // create the player in the #target element
        var player = new PlayerSdk("#target", {
            id: "vi5oDagRVJBSKHxSiPux5rYD",
            autoplay: true,
            muted: true,
            hideControls: true,
        });

        player.addEventListener("ready", () => {
            player.setCurrentTime(START_TIME);
        })

        setInterval(() => {
            player.getCurrentTime((time) => {
                if (time >= ENDTIME) {
                    player.setCurrentTime(START_TIME);
                }
            });
        }, 200);
    </script>

You can try it out in a JSFiddle

Using video

The great thing about the implementations above is that no additional files have to be generated: we keep using video to display video. Do you want to change the interval of the loop? All you need to do is change the start/stop variables in the JavaScript, and the change will be instantaneous. A GIF would require re-encoding.

If the user decides to watch the video, you already have a great deal of the files needed to start the video in your local cache - so playback will be super fast.

Conclusion

We can create looping "GIF-like" experiences with videos uploaded to api.video with just a few lines of JavaScript. There's no added cost to creating or changing your files - since it is all based on the video files already in the system. And, since we are just programmatically playing back a selected part of the video, making changes on the start, finish and duration of the video is easy. Try it yourself. Create an api.video account today!

Thanks to Olivier Lando from the Ecosystem team for creating the JSFiddle.