blog.mozbox.org - shared

ThePirateBay + HTML5 video tag = thevideobay.org

Paul Rouget — Sun, 28 Jun 2009 10:19:00 +0200

Awesome!

http://thevideobay.org
some details: http://torrentfreak.com/the-pirate-...

MAOW Florence, let's start!

Paul Rouget — Sat, 27 Jun 2009 15:14:00 +0200

\o/

Video _face_ tracker

Paul Rouget — Sun, 21 Jun 2009 05:15:00 +0200

Hey, have you seen my last demo ?

See the Chris' screencast here.

Live demo + source code + explanation next week (If I have time).

Enjoy :)

Madrid Mozilla Technologies Course: Hack and learn

Paul Rouget — Fri, 19 Jun 2009 21:02:00 +0200

Hey European guys!

You want to learn more about Mozilla and the Open-Source ?

During July, in Madrid, the Mozilla community will give some Mozilla and Open-Source related courses. I will personally give some more or less technical lessons about Mozilla and OpenWeb technologies.

Join us! If you're not from Spain, no problem! Feel free to apply :)

If you're interested, here are the details: http://mozilla.libresoft.es/.

Mozilla Add-Ons Workshop, in Florence (Italy), time to register

Paul Rouget — Thu, 11 Jun 2009 16:26:00 +0200

What : Mozilla Add-Ons Workshop
Where : Florence, Italy
When : Saturday 27 June
Who : You !

Join us now : online registration.

More information : see the Mozilla wiki and the William's blog post.

Some updates about the video and audio tags

Paul Rouget — Sun, 31 May 2009 17:41:00 +0200

Autobuffer

I would like to introduce a new video and audio tag attribute to you: autobuffer. Something that is annoying with the current (Firefox 3.5b4) video tag implementation is that the video file is downloaded immediately after the page load. That's problematic if you have several videos on your webpage.

Now (for the next Firefox RC release), the video file isn't downloaded until you click the play button.

If you want to prevent this behavior, just add the autobuffer attribute to your video tag, then, the video file will be downloaded immediately after the page load. Eric Shepherd has updated the MDC documentation:

autobuffer:

A Boolean attribute; if specified, the video will automatically begin buffering even if it's not set to automatically play. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full.

This attribute also works for the audio tag (see the documentation).

Several sources

That's a very nice feature. It gives you a way to define several source for your video. It's useful in two cases:

if you want to provide several formats for your video file (Ogg for Firefox, Mpeg4 for Webkit) - See what Firefox supports here
if you want to provide several contents for your video (like a playlist - BTW, we need a demo showing this!)

Eric Shepherd, our MDC master, has added all the useful information about this feature. See the MDC page.

The entry point for all the video and audio cool features

Everything is here: https://developer.mozilla.org/En/Us...

Enjoy and update the web!

My demos are broken since beta4

Paul Rouget — Tue, 05 May 2009 16:33:00 +0200

Since Firefox beta4, my demos are broken. The main bug is now fixed (trunk):

bug 486646

There is also an issue about the playing event (which seems to break the play button state too):

bug 488287

Firefox 3.5: video demo, SVG, CSS 3 and HTML5

Paul Rouget — Fri, 17 Apr 2009 17:58:00 +0200

Trust me, you must read the code: http://people.mozilla.com/~prouget/...

All my demos: http://people.mozilla.com/~prouget/...

Demo - Firefox 3.5: a new experiment with Canvas & Video

Paul Rouget — Wed, 15 Apr 2009 16:00:00 +0200

I would like to introduce you my fellow colleague William. He is my new guinea-pig :)

This new demo is really easy to use:

you need Firefox 3.1 beta; (you must use Firefox 3.1 beta3: see ^[1] about Firefox 3.5/3.6 nightlies)
click here to launch the demo;
click on the play button, select a pattern;
enjoy the video element, the canvas element and the Javascript performance :)

If you can't test it, see Tristan's blog post. He did a great screencast of this demo.

How does it work ?

Obviously, I use the <video/> tag. But what you see is not the video element (display: none;), but a <canvas/> tag. All the patterns you see on the top right are regular <img/>, <video/> and <canvas/> elements. The play/pause button is a <svg/> element (position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you inject the content of a DOM element in the canvas (like a screenshot). It works with three kinds of elements: <img/>, <canvas/> and <video/>.

When you click on the <svg/> button, the Javascript code launches the main video. Then, the main javascript loop is executed each 10 milliseconds.

Here are key things that occur during the main loop:

first, the content of the video is injected in the main canvas. That's why the canvas element looks like a video element;
second, the position of the 2 brighter areas of the canvas are computed (you have access to all pixels values);
third, the required transformation is computed (rotation, scale, translation);
fourth, the content of the selected pattern is injected in the main canvas following the transformation.

A little drawing:

Firefox 3.5 is a major release for web developers. See new features here: https://developer.mozilla.org/En/Fi....

Web developers, let's get creative!

Notes

[1] This demo is designed for Firefox 3.1b3. The specification and implementation of the video element are still evolving. So the current code may not work with nightlies.

Demo - Firefox 3.5: Web Workers in action

Paul Rouget — Wed, 15 Apr 2009 15:00:00 +0200

One of the new cool features of Firefox 3.5 is the support of Web Workers (see the WhatWG specification).

Web Workers give you a way to execute a part of your Javascript in a thread. That means smoother pages.

I've written a little demo showing Web Workers in action.

But first, a little explanation of the code: I've developed the Simulated Annealing algorithm, which is useful for finding the shortest path between several points (displayed on a <canvas/>).

Here is a demo (without Web Workers). Click on the load button, then on the start button.

The main demo

So, the main demo (with Web Workers) uses this algorithm to find the shortest path of 6 sets of points. The algorithm could be executed in a Worker, or not.

Try it
if you don't have Firefox 3.1/3.5, see the screencast

See the difference! A bit faster and way smoother (it doesn't freeze your web page, the page is still alive during the process). Notice the Animated PNG: it gets stuck during the process if you don't use Workers.

Just one rule for Workers: you can't play with the DOM inside a Worker, but you can delegate DOM modifications to the main thread (see postmessage/onmessage methods).

Why you should use Web Workers

Since you can now do some amazing things with HTML5 (canvas, video, ...), you may need to write some heavy algorithm. It could be easier to execute every non-DOM related code in a thread. It will make your code faster, but above all, it will make your web application smoother, and the code cleaner (to avoid Spaghetti code)! Note that you can also use a XMLHttpRequest in a Worker.

Be creative ;)

Demo - Firefox 3.5: XMLHttpRequest improvements

Paul Rouget — Wed, 15 Apr 2009 14:00:00 +0200

The implementation of XMLHttpRequest in Firefox 3.1/3.5 has been improved.

As a web developer, you should care, among other things, about two new features:

monitoring progress (doc here)
Cross-site HTTP requests (doc here)

Monitoring progress

XHR now provides a new event: progress. That means you can track the progress of your request (like the percentage of a download). It's easy to use:

var req = new XMLHttpRequest();  
req.addEventListener("progress", updateProgress, false);  
req.open();  
// progress on transfers from the server to the client (downloads)  
function updateProgress(evt) {  
 if (evt.lengthComputable) {  
    var percentComplete = evt.loaded / evt.total;  
    // ...
  } else {  
    // Unable to compute progress information
    // since the total size is unknown  
  }  
}

Cross-site HTTP requests

This is a really new cool feature. You can now do a request from you web page to a different domain. But the remote content targeted should provide an Access-Control (through a HTTP header - .htaccess, PHP, ... - or a XML header). See MDC for more informations: https://developer.mozilla.org/En/HT....

Example of a .htaccess:

<FilesMatch "foobar.xml">
  Header set Access-Control-Allow-Origin "http://www.mozbox.org"
</FilesMatch>

The demo

This demo includes these two new features. A XHR is performed from my website (www.mozbox.org) to the Mozilla website (people.mozilla.com). The XHR downloads a big file (5.4Mo).

the progress of the download is displayed via a canvas progress bar (a <canvas/> progressbar: http://www.netzgesta.de/gauge/)
the request is allowed because I add a header via a .htacces: Header set Access-Control-Allow-Origin "http://www.mozbox.org"

Try it :)

Mozilla Add-Ons Workshop in Berlin, done!

Paul Rouget — Wed, 01 Apr 2009 19:41:00 +0200

First: thank you! It was an awesome event! So many people, so many great speakers!

It was definitively a success.

So, who we should thank:

Our guest stars:
- Rey Bango, you gave such an exciting talk. You warmed up the audience, thank you dude :)
- Brian King, a workshop without you won't ever be a real MAOW from now on
- Chris Beard, who talked about Mozilla labs, so many exciting projects!
Our super speakers: Robert Nyman, Robert Kaiser, Daniel Glazman, Yan Minagawa, Carsten Book, Tobias Leingruber, Andreas Richter, Jürgen Berg, Philipp Söhnlein, Sven Guckes, Sebastian "Archaeopteryx" Hengst, Richard Sternagel, Daniel Kirsch and Philipp Kewisch;
The C-Base crew for hosting us (the place, the network and videos);
John Slater and his team for the so geeky T-Shirt;
The Mozilla Team (Jane and Pascal Finette, Barbara Hueppe and Patrick Finsh) for their contribution
... and my fellow colleague William who made this event a success. Trust me, he did so much!

The slides:

Rey Bango: Keynote
Robert Nyman: How to write your first extension
Robert Kaiser: The Mozilla Build System
Daniel Glazman: How to write your first XulRunner application
Yan Minagawa: Gecko 1.9.1 & what's new in Firefox 3.5?
Carsten Book: Quality assurance
Tobias Leingruber: Fun and Art
Andreas Richter: How to deal with web content through addons
Daniel Glazman: Make money with extensions
Philipp Söhnlein: General overview over the Mozilla Framework for dummies (and webdevelopers)
Sven Guckes Text Interface Revival
Richard Sternagel: Adapt web pages to your own needs with Greasemonkey
Robert Kaiser: make extensions work on SeaMonkey 2
Brian King: Javascript in add-ons
Daniel Kirsch: Starting with XBL - Create your own Objects

Some photos:

Some feedbacks:

If you've written a feedback, taken some photos or given a talk not listed here, feel free to add a comment, I'll update this post!

MAOW on AIR !

Paul Rouget — Sat, 28 Mar 2009 11:43:00 +0100

John, just for you

Paul Rouget — Fri, 27 Mar 2009 23:15:00 +0100

The brand new MAOW TShirt

[MAOW Berlin '09] update and Open Dev Day

Paul Rouget — Wed, 18 Mar 2009 18:50:00 +0100

So, what's new about the Mozilla Addons Workshop in Berlin:

The guest stars

I am very excited to announce that we will receive some famous guest stars:

Rey Bango, a Firefox/Ubiquity/jQuery ninja

Rey Bango, Mozilla Add-ons Community Manager, will give the main Keynote and will talk about Ubiquity.

Chris Beard, Director of Mozilla Labs

Chris will give a general overview of the Mozilla Labs.

Brian King, President of Mozdev

Brian is a long-time Mozilla contributor. His talk will be about Javascript things.

Updated schedule

Here is the new schedule:

https://wiki.mozilla.org/MAOW:2009:...

As you can see, almost 20 talks, that's awesome :) Several speakers and interesting talks.

Some of our speakers:

Open Dev Day

For those hard-core developers, please note that there will be a small Open Dev Day the following Sunday, so feel free to join in on the fun and bring your laptop to hack away :)

video tag and subtitles

Paul Rouget — Tue, 10 Mar 2009 18:30:00 +0100

I've written a little Javascript code that lets you add .srt subtitles to the video tag.

Subtitles are displayed on top of the video element, in an html:div. A subtitle is HTML content. That means you can include links, images, or whatever you want inside the subtitles.

Here is a demo:

Notice that links are clickables :)

You can add anything you want on top of the video, like a <canvas/> element. If pixels in the canvas are transparent or semi-transparent, you will see the video behind it.

Be creative ;)

P.S: you need Firefox 3.1/3.5: http://www.mozilla.com/en-US/firefo....

Mozilla Labs Café, à Paris, le 27 Mars.

Paul Rouget — Wed, 04 Mar 2009 21:50:00 +0100

Le Vendredi 27 Mars se déroulera le Mozilla Labs Café à Paris.

Le Mozilla Labs Café est un rassemblement court et informel pour Mozilliens, curieux, développeurs, geeks, blogueurs, qui veulent en savoir plus sur Mozilla Labs et sur tous les autres projets en cours chez l'équipe de Labs.

Chris Beard, Directeur de Mozilla Labs, nous fera une présentation générale des Projets Labs les plus récents;
Rey Bango, Mozilla Add-ons Community Lead, donnera un discours sur les goals actuels et futurs du centre névralgique des modules complémentaires de Mozilla AMO;
Pascal Finette, Mozilla Open Innovation Catalyst, parlera des Labs Concept Series.

On vous parlera entre autres de Bespin, de Weave, d'Ubiquity, bref, plein de projets excitants :)

Plus d'informations ici.

L'inscription se fait ici.

Mozilla Add-Ons Workshop, in Berlin, time to register

Paul Rouget — Sat, 28 Feb 2009 18:47:00 +0100

What : Mozilla Add-Ons Workshop
Where : Berlin
When : 28th of March
Who : You !

Join us now : online registration.

More information : see Mozilla wiki.

The master of XUL :)

Paul Rouget — Fri, 27 Feb 2009 14:24:00 +0100

Xuuul is so cooool...

Thanks Daniel de Fuenmayor.

For french people: C'est la caricature de David (daim) au milieu :) ça ma rappelle la quote:

paul: J'ai entendu: "j'ai jamais compris à quoi servait ce moz-binding", et là mon esprit de super hero est ressorti.

daim: imagine paul, se transfomer en geek mozilla à la manière de wonder woman

paul: grave

paul: Imagine moi avec un caleçon bleu au dessus de collants moulants orange, avec un TShirt taille enfant avec le gros logo de Firefox devant, avec un masque rouge et noir, les bras vers le ciel, à hurler: "THERE IS ONLY XUL !!!"

paul: la classe

[MAOW Berlin '09] call for speakers

Paul Rouget — Fri, 27 Feb 2009 12:24:00 +0100

Greetings fellow developer !

As a follow-up to my earlier post, i'd like to give you a quick reminder that Mozilla will be organizing the Mozilla Add-ons Workshop in Berlin on Saturday 28 March, 2009.

The MAOW is a one-day workshop that aims to spur interest and encourage the development of Firefox add-ons and of course to talk about Mozilla technologies in general. The format will be similar to the one used for the MAOW in Paris, namely, we'll have two keynote speakers, a dozen workshops throughout the day led by community members and some GREAT pizza. We'll also experiment with a new kind of workshop the following day, for those who want to stay on to hack the next day.

We already have 5 speakers lined up but we are still looking for 5 more, preferably german-speaking. If you'd like to attend and lead a session, please don't hesitate to contact me as soon as possible.

The following are suggested sessions that you might be interested to lead :

How to write your first extension
How to write your first XulRunner application
The Mozilla build system
XPCOM for dummies
How to write a C++ XPCOM component
XUL && XBL
Advanced Javascript
Unit tests

Let me know if you're interested in leading any of these 45-minute sessions. You can reach me at <paul at mozilla dot com> or on Mozilla IRC #addons

Please note that all speakers at the MAOW are 100% sponsored, meaning Mozilla Europe will cover the costs of all their hotel, travel and food expenses during their stay in Berlin.

I look forward to hearing from you !