Mozilla

HTML5 Articles

Sort by:

View:

  1. Weekly HTML5 Apps Developer Resources, July 25th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  2. Firefox Beta 15 supports the new Opus audio format

    Firefox 15 (now in the Beta channel) supports the Opus audio format, via the Opus reference implementation.

    What is it?

    Opus is a completely free audio format that was recently approved for publication as a standards-track RFC by the IETF. Opus files can play in Firefox Beta today.

    Opus offers these benefits:

    • Better compression than MP3, Ogg, or AAC formats
    • Good for both music and speech
    • Dynamically adjustable bitrate, audio bandwidth, and coding delay
    • Support for both interactive and pre-recorded applications

    Why Should I care?

    First, Opus is free software, free for everyone, for any purpose. It’s also an IETF standard. Both the encoder and decoder are free, including the fixed-point implementation (for mobile devices). These aren’t toy demos. They’re the best we could make, ready for serious use.

    We think Opus is an incredible new format for web audio. We’re working hard to convince other browsers to adopt it, to break the logjam over a common <audio> format.

    The codec is a collaboration between members of the IETF Internet Wideband Audio Codec working group, including Mozilla, Microsoft, Xiph.Org, Broadcom, Octasic, and others.

    We designed it for high-quality, interactive audio (VoIP, teleconference) and will use it in the upcoming WebRTC standard. Opus is also best-in-class for live streaming and static file playback. In fact, it is the first audio codec to be well-suited for both interactive and non-interactive applications.

    Opus is as good or better than basically all existing lossy audio codecs, when competing against them in their sweet spots, including:

    General audio codecs (high latency, high quality)
    • MP3
    • AAC (all flavors)
    • Vorbis
    Speech codecs (low latency, low quality)
    • G.729
    • AMR-NB
    • AMR-WB (G.722.2)
    • Speex
    • iSAC
    • iLBC
    • G.722.1 (all variants)
    • G.719

    And none of those codecs have the versatility to support all the use cases that Opus does.

    Listening tests show that:

    That’s a lot of bandwidth saved. It’s also much more flexible.

    Opus can stream:

    • narrowband speech at bitrates as low as 6 kbps
    • fullband music at rates of 256 kbps per channel

    At the higher of those rates, it is perceptually lossless. It also scales between these two extremes dynamically, depending on the network bandwidth available.

    Opus compresses speech especially well. Those same test results (slide 19) show that for fullband mono speech, Opus is almost transparent at 32 kbps. For audio books and podcasts, it’s a real win.

    Opus is also great for short files (like game sound effects) and startup latency, because unlike Vorbis, it doesn’t require several kilobytes of codebooks at the start of each file. This makes streaming easier, too, since the server doesn’t have to keep extra data around to send to clients who join mid-stream. Instead, it can send them a tiny, generic header constructed on the fly.

    How do I use it in a web page?

    Opus works with the <audio> element just like any other audio format.

    For example:

     <audio src="ehren-paper_lights-64.opus" controls>

    This code in a web page displays an embedded player like this:


    Paper Lights by Ehren Starks Creative Commons License

     
    (Requires Firefox 15 or later)

    Encoding files

    For now, the best way to create Opus files is to use the opusenc tool. You can get source code, along with Mac and Windows binaries, from:

    http://www.opus-codec.org/downloads/

    While Firefox 15 is the first browser with native Opus support, playback is coming to gstreamer, libavcodec, foobar2000, and other media players.

    Streaming

    Live streaming applications benefit greatly from Opus’s flexibility. You don’t have to decide up front whether you want low bandwidth or high quality, to optimize for voice or music, etc. Streaming servers can adapt the encoding as conditions change—without breaking the stream to the player.

    Pre-encoded files can stream from a normal web server. The popular Icecast streaming media server can relay a single, live Opus stream, generated on the fly, to thousands of connected listeners. Opus is supported by the current development version of Icecast.

    More Information

    To learn more visit opus-codec.org, or join us in #opus on irc.freenode.net.

  3. Weekly HTML5 Apps Developer Resources, July 18th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  4. getUserMedia is ready to roll!

    We blogged about some of our WebRTC efforts back in April. Today we have an exciting update for you on that front: getUserMedia has landed on mozilla-central! This means you will be able to use the API on the latest Nightly versions of Firefox, and it will eventually make its way to a release build.

    getUserMedia is a DOM API that allows web pages to obtain video and audio input, for instance, from a webcam or microphone. We hope this will open the possibility of building a whole new class of web pages and applications. This DOM API is one component of the WebRTC project, which also includes APIs for peer-to-peer communication channels that will enable exchange of video steams, audio streams and arbitrary data.

    We’re still working on the PeerConnection API, but getUserMedia is a great first step in the progression towards full WebRTC support in Firefox! We’ve certainly come a long way since the first image from a webcam appeared on a web page via a DOM API. (Not to mention audio recording support in Jetpack before that.)

    We’ve implemented a prefixed version of the “Media Capture and Streams” standard being developed at the W3C. Not all portions of the specification have been implemented yet; most notably, we do not support the Constraints API (which allows the caller to request certain types of audio and video based on various parameters).

    We have also implemented a Mozilla specific extension to the API: the first argument to mozGetUserMedia is a dictionary that will also accept the property {picture: true} in addition to {video: true} or {audio: true}. The picture API is an experiment to see if there is interest in a dedicated mechanism to obtain a single picture from the user’s camera, without having to set up a video stream. This could be useful in a profile picture upload page, or a photo sharing application, for example.

    Without further ado, let’s start with a simple example! Make sure to create a pref named “media.navigator.enabled” and set it to true via about:config first. We’ve put the pref in place because we haven’t implemented a permissions model or any UI for prompting the user to authorize access to the camera or microphone. This release of the API is aimed at developers, and we’ll enable the pref by default after we have a permission model and UI that we’re happy with.

    There’s also a demo page where you can test the audio, video and picture capabilities of the API. Give it a whirl, and let us know what you think! We’re especially interested in feedback from the web developer community about the API and whether it will meet your use cases. You can leave comments on this post, or on the dev-media mailing list or newsgroup.

    We encourage you to get involved with the project – there’s a lot of information about our ongoing efforts on the project wiki page. Posting on the mailing list with your questions, comments and suggestions is great way to get started. We also hang out on the #media IRC channel, feel free to drop in for an informal chat.

    Happy hacking!

  5. Dr.Seuss and Persona – Mozilla at Webvisions Barcelona

    Last week Webvisions, a 3 day conference covering everything UX and web lured a few hundred enthusiasts to the sunny Barcelona. Mozilla sent Crystal Beasley and Chris Heilmann to talk about logging into the web with Persona and the future of the web.

    Crystal gave a workshop on login systems and how to improve them and a talk on 13 signs your UX needs an exorcism.

    Having watched The Lorax on the flight over, and seeing that the audience consisted of a lot of parents we thought it a good idea to write the “Future of HTML5 and the web” talk in the style of Dr. Seuss so people can read to their kids and reflect on what we tried to convey at the same time. Many thanks also to Eric Shepherd for some rhyming help.

    Here are just the rhymes with all the links (also available on GitHub):

    1. There’s a big web out there, 
      it’s huge – I tell you, 
      it spans the whole world
      but it was boring and blue
    2. Then change came about, 
      in the shape of a fox
      it was cunning and open
      and it broke all the locks.
    3. Others showed up,
      and joined the good fight
      a singer, an adventurer
      and a shiny new knight.
    4. These all played together
      and spoke the same tongue
      which brought back old players,
      to join them in song. 
    5. A standard was set, 
      and it changed a few things,
      a richer web for apps
      was the promise it brings.
    6. Bah, standards! Who needs them?
      Some flashy ones said, 
      till a phone that was smart,
      kicked them out of its bed.
    7. We moved past one standard, 
      as web work is richer,
      so HTML5 and friends,
      paints a much better <picture>.
    8. Things that are fun
      should be shiny and cool,
      that’s why the new standards
      bring many a new tool.
    9. Watching and hearing,
      are what people like to do.
      Using <audio> and <video> is simple,
      and you can do it, too.
    10. Both of them are web-native,
      which is a reason to clap.
      They can interact with other content,
      and Mozilla Popcorn makes that a snap.
    11. If beats and frequencies are
      what you need to play,
      check the Web Audio API -
      it gives you just that – even today.
    12. To play nice with batteries,
      use requestAnimationFrame(),
      don’t let it stop you
      that it has such a long name.
    13. 3D graphics are thrilling,
      as gamers will tell,
      we now have that on the web
      and it is called WebGL.
    14. Water goes everywhere you pour it,
      just ask Chris about his Macbook Air :(
      MediaQueries allow you be as fluid
      and respond instead of despair.
    15. Natural movements are smooth,
      just open your eyes.
      With CSS animation, transforms and transition,
      you can mimic this – nice!
    16. “The web means you need to be online”,
      I hear smartypants gloat,
      well, we have offline storage,
      so there – take your coat.
    17. Got a cam and some friends,
      and do you want to chat?
      WebRTC is what you need,
      even to show off your cat.
    18. Rhymes sometimes don’t come easy,
      as you just became aware.
      So let’s just move ahead quickly,
      this was just too much to bear.
    19. An artist needs a <canvas>,
      and HTML5 gave us that.
      Read, write and convert pixels,
      All in the client, it’s mad!
    20. “We don’t have rich elements!”
      many people complain,
      Use Web Components with X-Tag
      and create them – easy to maintain.
    21. Passwords are tough, 
      it is easy to see, 
      so allow login with emails,
      using BrowserID.
    22. The web is a mess,
      with third party buttons abound.
      Web Intents make them pointless,
      let’s not have them around.
    23. By design HTML5 is forgiving,
      its parser is great.
      It didn’t want to break the web,
      so let’s not break it in its stead.
    24. Course you can write weird things,
      and they will work – there’s no doubt.
      But will they be readable by others?
      This is what it’s about.
    25. You don’t create for yourself,
      or your friends who are the same.
      You develop for the next guy,
      so make sure you’re not to blame.
    26. You don’t jump in a river,
      if you don’t know its depth.
      On the web using Modernizr,
      should be your first step.
    27. Give new stuff to new players,
      and use it to enhance.
      Don’t support when it’s not needed
      IE6 walks – it can’t dance!
    28. With a vendor prefix browsers tell you
      “this is not ready”.
      So by all means, give them a go,
      but don’t expect to go steady
    29. And those prefixes vanish,
      you mustn’t forget!
      End with a prefixless version,
      It’s your very best bet.
    30. So we ask you to help us,
      build a web that will last.
      Be future friendly and look forward,
      and stop building for the past.
    31. The web is on phones,
      tablets, computers, TVs.
      We have to move it forward.
      or else our existence will cease.
    32. Hardware that is locked up,
      is not what we are about,
      so check out Firefox OS,
      if you like the web – you will like it – no doubt.
    33. Last but not least,
      if you find something’s wrong
      please file a bug and tell us,
      this is how things get done.
    34. So there you have a lot to play with,
      check out and share.
      We really want you to do that,
      come on, show us you care.
    35. Unless someone like you
      cares a whole awful lot,
      nothing is going to get better.
      It’s not.
    36. So well done for reading and listening,
      and going great lengths,
      that’s all we got time for today,
      so good-bye and thanks!

    Encountering a lot of hardware problems we couldn’t do a recording of the talk so I made a screencast of the presentation available on YouTube.

    Alternatively, you can also have a video version with just the rhymes

    Other formats for you to download and use:

    The audience reaction was very positive and we found out that when you rhyme your talk it flows much faster. The 45 minute slot was 20 minutes of our talk and another 25 minutes explaining in detail what we covered in a Q&A.

    All in all Webvisions was a great event and watch out for videos of the other talks being available soon and other slides on the web.

  6. Weekly HTML5 Apps Developer Resources, July 11th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  7. Weekly HTML5 Apps Developer Resources, June 20th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  8. Bringing the web to mobiles – Mozilla and Telefonica at Over the Air 2012

    A few weeks ago, Over the Air 2012, Englands biggest mobile (un)conference in Bletchley Park, England (home of the first ever computer built to crack the German Enigma encryption machines) attracted a few hundred developers to hear about the latest happenings in the mobile space and hack with them.

    Mozilla’s contribution was not only the sponsorship of the much needed beanbags but also a keynote on the much discussed topic of web vs. native applications on mobile devices. Today the organisers released the videos of the talks and here is Chris Heilmann of Mozilla talking about If mobiles don’t come to the web then the web must come to mobiles.

    The slides are on the web and the screencast is on vid.ly and on YouTube:

    Furthermore, we chatted with Christian Payne about Boot to Gecko and there is an audio recording available on AudioBoo:

    The Next Web also covered the event and had a few questions on HTML5 on mobiles.

    In addition to this, Francisco Jordano of Telefonica gave a talk about the Open Web Device which is powered by Boot to Gecko:

    There is much, much more to be seen about Over the Air, and you can browse all the videos, talks and coverage of the event on Lanyrd.

  9. Weekly HTML5 Apps Developer Resources, June 13th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  10. Talking web standards with Microsoft part 1 – Building for real standards

    I just returned from a recording session with Microsoft for their Channel 9 feature. Rey Bango (ex-Mozilla and also ex-Ajaxian) had invited us to chat about a few web development topics on video. The recordings are being edited now but you can get the presentations and the code examples right now.

    Rey and Chris

    The first session we recorded was about “Building for real standards”. In this we talk about what a standard means, how this applies to HTML5 and discuss problems and pitfalls to avoid. The slides are available on Slideshare and there is also a version with presenter notes.

    As part of the Mozilla Evangelism Reps Program we also make the slides with presenter notes as PDF, Keynote and PPT available and additionally release the code examples with tips on how to present them.

    You can get all of this on GitHub in case you want to give this presentation yourself.

    In the second (and last) part of the series we talked in detail about Progressive Enhancement, Graceful Degradation and Responsive design. The slides and code examples will be up here tomorrow.