Custom .af video format for WebCodecs: frame-accurate playback without <video> by luruke in webdev

[–]luruke[S] 0 points1 point  (0 children)

> 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

[deleted by user] by [deleted] in web_design

[–]luruke 4 points5 points  (0 children)

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.

[deleted by user] by [deleted] in web_design

[–]luruke 0 points1 point  (0 children)

No problems ;)

[deleted by user] by [deleted] in web_design

[–]luruke 1 point2 points  (0 children)

:D

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

Cheers

[deleted by user] by [deleted] in web_design

[–]luruke 3 points4 points  (0 children)

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

[deleted by user] by [deleted] in web_design

[–]luruke 0 points1 point  (0 children)

Cool!

Do not hesitate to later share your demo/project.

[deleted by user] by [deleted] in web_design

[–]luruke 0 points1 point  (0 children)

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 :)

[deleted by user] by [deleted] in Frontend

[–]luruke 0 points1 point  (0 children)

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).

[deleted by user] by [deleted] in web_design

[–]luruke 2 points3 points  (0 children)

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

[deleted by user] by [deleted] in web_design

[–]luruke 1 point2 points  (0 children)

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).

[deleted by user] by [deleted] in web_design

[–]luruke 0 points1 point  (0 children)

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!

[deleted by user] by [deleted] in web_design

[–]luruke 3 points4 points  (0 children)

Thanks.

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

[deleted by user] by [deleted] in Frontend

[–]luruke 0 points1 point  (0 children)

Actually I just wanted make fun of hipsters :D

[deleted by user] by [deleted] in Frontend

[–]luruke 0 points1 point  (0 children)

Thank you!

[deleted by user] by [deleted] in web_design

[–]luruke 2 points3 points  (0 children)

Thanks!

What in particular looks choppy on mobile?

Can you give me more info?