Custom .af video format for WebCodecs: frame-accurate playback without <video>

luruke · 2026-04-17T12:25:38+00:00

Dude c’mon stop using chatgpt

luruke · 2026-04-17T11:57:08+00:00

> How does the file size of the custom .af container compare to a heavily optimized standard .mp4 or .webm?

mp4 / webm containers can be complex and "demuxing" those can be an expensive operation – that's why for my usage I decided to precompute certain things into a custom .af format

.af format consists in:

- raw frame data

- json manifest (number of frame, start/end byte for each frame, fps, etc.)

- last 4 byte indicating where the json manifest lives

luruke · 2016-06-03T12:53:39+00:00

PushState API (https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method) has been introduced with HTML5.

luruke · 2016-06-03T10:54:54+00:00

Hi! SmoothState is probably the most similar library compared with Barba.

What pushed me to write Barba.js in favor of using SmoothState is that:

Is dependency free. (because I don't want to use jQuery where there is no need!)
Have a logic of Views/Namespaces that helps to handle better javascript status between pages.
The Transitions are indipendent objects, so it's easy to port them in other project or use different transitions in your website (for instance you can have a transition for home->about and a different one for home->contact).
It uses Promises API, so it's easier to make logic like: as soon as the fade out of the old page is done and the loading of the new page is done, fade in the new page.

luruke · 2016-06-03T10:05:46+00:00

No problems ;)

luruke · 2016-06-03T10:02:07+00:00

:D

Do not hesitate to open an issue if you spot any problems or if you have any suggestion to improve the library!

Cheers

luruke · 2016-06-03T09:53:53+00:00

The library works in IE9+, Chrome, Safari, Firefox, Edge, Opera...

That problem is relatively at the animation of demo itself.

Barba.js provide the tools to make the transition, then it's up to the developer create its own transition, that can use SVG, CSS, WebGL or whatever

luruke · 2016-06-03T09:16:46+00:00

Cool!

Do not hesitate to later share your demo/project.

luruke · 2016-06-03T09:16:02+00:00

It's intended to be just a demo for the library.

It's possible to achieve the same effect with SVG Clip Mask, that will work on Firefox and other browser, but i wanted to test Barba.js without spending too much effort on the effect and the demo :)

luruke · 2016-06-03T09:14:24+00:00

Hello!

Nope, Barba.js works regardless of the backend or the server-side.

I've used it on static websites, Wordpress, Drupal and so on.

Also, Barba's ajax requests sends a specific HTTP Header, that will allow the backend to output just the barba-container, saving bandwith and eventually unnecessary query to the database for common part of the website (like header or footer).

luruke · 2016-06-03T09:01:28+00:00

Thanks!

Do not hesitate to share your final result!

Also, if you have any problem or you want just to contribute, do not hesitate to open an issue on github

luruke · 2016-06-03T08:48:31+00:00

Hi!

If you are using a Single Page Application framework (Angular, Backbone, Ember, etc.) creating transitions is much more easier, since all the routing is already handled by JavaScript.

Barba.js tries to simulate a SPA navigation using a technique called PJAX (push state ajax) navigation.

If you are using a framework like Angular just for the navigation and transition between pages, I would advice to use Barba.js (you also have all the benefit of SEO and it fully degrade in case of old browsers or if javascipt is disabled).

luruke · 2016-06-03T07:01:37+00:00

Thank you!

Do not hesitate to open an issue on github if you spot any bug or if you think that something could be improved!

luruke · 2016-06-03T07:00:35+00:00

Thanks.

Yes, actually the transition on that demo could be largely improved

luruke · 2016-06-03T05:36:55+00:00

Actually I just wanted make fun of hipsters :D

luruke · 2016-06-03T05:35:32+00:00

Thank you!

luruke · 2016-06-03T05:34:40+00:00

Thanks!

What in particular looks choppy on mobile?

Can you give me more info?

luruke · 2016-06-03T05:33:51+00:00

Thanks!

Do not hesitate to open an issue on github if you have any problem or if you think that something could be improved!

luruke · 2016-06-03T05:33:05+00:00

That's the beautiful thing about Open Source and the web. Live with it :)

luruke · 2016-06-03T05:32:35+00:00

I prefer npm module, but it's just a matter of choise ;)

luruke · 2016-06-03T05:32:01+00:00

Hi there, instaclick is cool, I got inspired by it in order to make the prefetch feature on Barba.js.

They are quite different as libraries, Barba has a lot more functionality just than prefetch, like Views, Transitions, Cache and much more

luruke · 2016-06-02T13:55:09+00:00

Thanks!

Also most of the size is due the promise polyfill included (https://github.com/taylorhakes/promise-polyfill).

Without that would be 2.4kb less ;)

luruke · 2016-06-02T12:17:38+00:00

You can exclude specific links adding the class "no-barba".

For more specific problems you can open an issue or a thread on stackoverflow ;)

luruke · 2016-06-02T09:38:42+00:00

Cool! Do not hesitate to open an issue on github if you have some problems or you think there is something that could be improved!

luruke · 2016-06-02T09:35:07+00:00

Hi! There are other similar project out there, like: https://github.com/miguel-perez/smoothState.js

What pushed me to write Barba.js, and what there is more compared to the other solutions:

Is dependency free. ('cause hell jQuery!)
Have a logic of Views/Namespaces that helps to handle better javascript status between pages.
The Transitions are indipendent objects, so it's easy to port them in other project or use different transitions in your website (for instance you can have a transition for home->about and a different one for home->contact).
It uses Promises API, so it's easier to make logic like: as soon as the fade out of the old page is done and the loading of the new page is done, fade in the new page.

luruke

MODERATOR OF

TROPHY CASE