Ludicrous Speed, GO!

8 March, 2013 § 17 Comments

There’s another new feature in today’s build of Firefox Nightly that I want to call attention to.

In Firefox Aurora, web developers can adjust the speed that HTML5 videos are playing at using the mediaElement.playbackRate API. This API lets websites control the speed that videos play at, whether they are in slow-motion, normal, or high-speed.

Starting today in Firefox Nightly, you can adjust the speed that videos play without needing to know JavaScript. To try this out, right-click on a video and enter the Play Speed menu:

Ludicrous Speed

The menu, implemented by darkowlzz, allows the user to change the playback to one of four speeds:

I should note that there is still one remaining bug with the feature. Videos that are switched to the non-default playback speed will not switch back to Normal Speed using the context menu. This bug is on file and will need to be fixed before we can ship this feature on our Release channel. A simple workaround is to seek the video, as that will reset the playback speed.

Seek-previews for HTML5 <video>

4 September, 2012 § 7 Comments

Some popular video sites now show previews of the video while hovering over the scrubber. This is really useful for trying to find a position within a video without having to interrupt the current playback.

The other night I was wondering if this could be possible with HTML5’s <video> element. It turns out that something like this can be achievable, and with a couple bug fixes it can also be pretty performant.

The current method for implementing something like this for proprietary websites involves offline creation of a large sprite that includes all of the keyframes for the video. When the user is mousing over the scrubber, the web page can change the visible portion of the sprite to show the currently hovered frame. This works very well and is also very fast as all of the expensive computation is done ahead of time.

This offline method isn’t possible though for the open web today. The HTML5 standard doesn’t include a way for web authors to declare a keyframe sprite, and preexisting videos would lack support for it if this feature was added to the standard today.

Creating an implementation of seek-previews for HTML5 <video> isn’t that hard. To do it, I cloned the <video> element via element.cloneNode(true). I then set the cloned video element’s currentTime attribute to the hovered position within the scrubber. This turns out to work quite well, with the only drawback being poor seeking performance.

Setting the currentTime attribute involves trying to get the video playback position as close as possible to the requested time. If this position is far from a keyframe, heavy decoding will be required. Implementing a “fast seek” method would greatly improve the seeking performance here. Bug 778077 was filed to implement this “fast seek” method (this will not replace currentTime). The other performance issue that will be encountered is unbuffered frames. The method of seeking the video requires downloading the part of the video being seeked to, which is obviously slow.

Try out the demo and let me know what you think. I filed bug 787881 to implement this feature for Firefox. I hope that it will kick-start our fast-seek implementation, as fast-seek can also be used for our present-day seeking within the timeline.

My contributions to today’s Firefox release

31 January, 2012 § 20 Comments

Today (1/31/2011) marks the release of an update for Firefox that defaults add-ons to compatible, introduces native web developer tools, implements CSS3 3D transforms, and adds native support for elements to be rendered in fullscreen. Of the aforementioned features, I contributed a tiny amount toward the fullscreen support for Firefox 10.

Conditional Forward button

The User Research team at Mozilla performed a heatmap study to find what user interface features are used the most within the web browser. One of the findings was that the forward button is very seldom used. The forward button is only enabled less than 10% of the time, except this button consumes valuable screen space 100% of the time.

Firefox 10 introduces the “conditional forward” button. We have unified the back/forward navigation controls and address bar. When the forward button is disabled, it hides behind the back button, only to reappear when it is actually useful.

This change removes some of the visual noise in the main toolbar, as well as unifying the navigation mental model. The address bar shows the location and the back-forward button modifies the location, so it is only logical to visually align these two controls.

We also understand it is impossible to please everyone. If this feature is too much change for you, you can customize your toolbar and place a toolbar item between the back-forward buttons and address bar and the conditional forward button feature will be turned off.

DOM Fullscreen API

Firefox 10 introduces the DOM Fullscreen API. This API allows websites to request page elements to be rendered in fullscreen. This feature will provide necessary capabilities for HTML5 video to compete with Flash as well as an immersive environment for HTML5 games.

For Firefox 10, I implemented the document.mozFullScreenEnabled API. This boolean lets a website know if the feature has been enabled and the fullscreen request has the potential for being granted. For security reasons, iframes lacking the mozallowfullscreen attribute will not be granted fullscreen access.

For more information, see the “Using full-screen mode” article on the Mozilla Developer Network.

HTML5 Video Statistics

If you’re a web developer or just curious to see debugging information about the video you’re watching, you can now right-click on the video and choose “Show Statistics”. The statistics will overlay the video and update as the video plays.

This feature uses the statistics API that Chris Pearce implemented for Firefox 5.

Mentored Bugs

I helped mentor Matthew Wein (my brother) on fixing his first bug in Firefox. Matthew added the capability for frames of HTML5 video to be saved to disk. Simply right-click on an HTML5 video and choose “Save Snapshot As…” to save the current frame to disk.

If you’d like to get started in an open source project that reaches over 400,000,000 people, I’ve got a nice list of bugs that I’d be more than happy to help you out with.

My contributions to today’s Firefox release

20 December, 2011 § 3 Comments

Today (12/20/2011) marks the release of an update for Firefox that brings improved JavaScript performance using Type Inference (making Firefox about 20-30% faster), among other great updates. I didn’t work on the JavaScript engine improvements, but I did contribute a couple patches for HTML5 videos and the Web Console.

“Dimming the lights” for videos

Starting today, we now have greatly improved the viewing experience of watching HTML5 videos. See this short screencast for a demo of the feature at work.

This feature is perfect for the next time you come across an HTML5 video and want to “dim the lights”.

Web Console

Another feature I helped work on was the Web Console. Firefox contributors have been working really hard to provide the best set of developer tools out there. What you see today is the foundation for the future (hint: the developer tools in future versions are sweet!). The Web Console is a great tool to use to watch network activity, test a JavaScript snippet, and view JavaScript & CSS error logs.

Let’s go through a short tutorial of the Web Console in Firefox:

  1. Open the Web Console
    • On Windows and Linux, press Ctrl+Shift+K
    • On Mac OS X Lion, press Cmd+Shift+K (Cmd+Option+K starting in Firefox Aurora)
  2. Click in the command-line part of the Web Console (the text entry area at the bottom of the console)
  3. Type console.log(“Hello, web console!”)

Great! You’ve just used the Web Console to execute a line of JavaScript. If you’re looking for something even cooler that you can do with the Web Console, venture over to Frank Yan’s blog post where he talks about animating Firefox’s tabs using the Web Console. Firefox’s Web Console can be a great Swiss-army knife tool to keep in your back pocket as you navigate the web 🙂

More enhancements for HTML5 video and audio in Firefox

16 December, 2011 § 8 Comments

There has been a lot of attention focused on enhancements for HTML5 videos recently. Here is an updated list of changes you can expect to see, as well as find out what is currently planned.

Available now in Firefox

  • Added visual feedback when the HTML5 Media stalled event is dispatched*
  • Clicking on the video surface will toggle between play and pause*
  • The seekable attribute returns the ranges of the media that are currently available for seeking to. Learn more about seekable
  • The played attribute enables script to see what regions of the media has been played
  • Seeking in media is now accurate to the nearest microsecond

Available now in Firefox Beta

  • Includes all the changes in the release version of Firefox
  • Specialized video controls for small-dimension media*
  • Viewing an HTML5 video directly now uses a design that is comforting for watching videos

Available now in Firefox Aurora

  • Includes all the features in the release version of Firefox and Firefox Beta
  • API for controlling fullscreen content. See the fullscreen documentation for more information
  • View video statistics overlaid on the video element (right-click on the video and choose “Show statistics”)*
  • The video controls appear when the video ends so users have a predictable way to know when a video ended*
  • “View video” is no longer in the context menu for videos when viewed directly
  • Save the current frame of a video to disk (right-click on the video and choose “Save snapshot as…”)*

Available now in Firefox Nightly

  • Includes all the features in the release version of Firefox, Firefox Beta, and Firefox Aurora
  • Standalone images are rendered on a neutral background (starting 12/19)
  • Added a full-screen button to the default video controls*
  • The video controls fade out if no mouse movement for > 2 seconds*
  • The loading throbber for HTML5 audio has been removed since it caused page layout issues*
  • Error descriptions are now overlaid on the video to help users and authors diagnose video problems*
  • The loop attribute has been implemented
  • Directly viewed videos that are larger than the browser window are automatically resized to fit the window

Features planned

  • Large overlaid play button on videos that are not set to autoplay*
  • A refresh of the design of the media controls*
  • Horizontal volume slider*
  • Add detection of H.264 videos and custom error UI*
  • Fullscreen video should disable screensaver during playback

* Requires the |controls| attribute is set on the <video> element.

12/16/2011 9:38am: Post updated to show how the various release channels of Firefox build on each other.

Where Am I?

You are currently browsing entries tagged with video at JAWS.