Flash delivered video, animation, interactive sites and, yes, ads to billions of users for more than a decade, but now it’s going away. Adobe will drop support for Flash by 2020. Firefox no longer supports Flash out of the box, and neither does Chrome. So what’s next? There are tons of open standards that can do what Flash does, and more.
Truly Open Multimedia
Flash promised to deliver one unifying platform for building and delivering interactive multimedia websites. And, for the most part, it delivered. But the technology was never truly open and accessible, and Flash Player was too resource-hungry for mobile devices. Now open-source alternatives can do everything Flash does—and more. These are the technologies you should learn if you’re serious about building tomorrow’s interactive web, whether you’re doing web animation, games, or video.
CSS animation is relatively new, but it’s the easiest way to get started with web animation. CSS is made to style websites with basic rules that dictate layout, typography, colors, and more. With the release of CSS3, animations are now baked into the standard, and as a developer, it’s up to you to tell the browser how to animate. CSS is human readable, which means it basically does what it says on the tin. For example, the property “animation-direction,” does exactly that: specifies the direction of your animation.
Right now you can create smooth, seamless animations with CSS. It’s simple to create keyframes, adjust timing, animate opacity, and more. And all the animations work with anything you’d style normally with CSS: text, images, containers, and so on.
Web games rely on an ecosystem of open-source frameworks and platforms to work. Each one plays an important role, from visuals to controls to audio to networking. The Mozilla Developer Network has a thorough list of technologies that are currently in use. Here are just a few of them and what they’re used for:
Lets you create high-performance, hardware-accelerated 3D (and 2D) graphics from Web content. This is a Web-supported implementation of OpenGL ES 2.0. WebGL 2 goes even further, enabling OpenGL ES 3.0 level of support in browsers.
The <audio> element lets you easily play simple sound effects and music. If your needs are more involved, check out the Web Audio API for real audio processing power!
Web Audio API
The WebSocket API lets you connect your app or site to a server to transmit data back and forth in real-time. Perfect for multiplayer turn-based or even-based gaming, chat services, and more.
WebRTC is an ultra-fast API that can be used by video-chat, voice-calling, and P2P-file-sharing Web apps. It can be used for real-time multiplayer games that require low latency.
With WebAssembly, web games will be able to take advantage of multithreading. Developers will be able to produce staggering 3D games for the web that run close to the same speed as native code, but without compromising on security. It’s a tremendous breakthrough for gaming — and the open web. It means that developers will be able to build games for any computer or system that can access the web. And because they’ll be running in browsers, it’ll be easy to integrate online multiplayer modes.
Most video services have already switched to HTML5-based streaming using web technologies and open codecs; others are sticking with the Flash-based FLV or FV4 codecs. As stated earlier, Flash video formats rely on software rendering that can tax web browsers and mobile platforms. Modern video codecs can use hardware rendering for video playback, greatly increasing responsiveness and efficiency. Unfortunately, there’s only one way to switch from Flash to HTML5: Re-encoding your video. That means converting your source material into HTML5-friendly formats via a free converter like FFmpeg and Handbrake.
Mozilla is actively helping to build and improve the HTML5-friendly and open-source video format WebM. It’s based on the Matroska container and uses VP8 and VP9 video codecs and Vorbis or Opus codecs.
Once your media has been converted to an HTML5-friendly format, you can repost your videos on your site. HTML5 has built-in media controls, so there’s no need to install any players. It’s as easy as pie. Just use a single line of HTML:
<video src="videofile.webm" controls></video>
HTML5 can also handle adaptive streaming with Media Source Extensions (MSEs). Although they may be difficult to set up on their own, you can use pre-packaged players like Shaka Player and JW Player that can handle the details.
The developers at MDN have created an in-depth guide for converting Flash video to HTML5 video with many more details on the process. Fortunately, it’s not as difficult as it seems.
The future of the web is open (hopefully) and Flash, despite being a great tool for creatives, wasn’t open enough. Thankfully, many open source tools can do what Flash does, and more. But we’re still in the early stages and creating animations, interactive websites, and web games takes some coding knowledge. Everything you need to know is out there, just waiting for you to learn it.
Open web technologies promise to be better than Flash ever was, and will be accessible to anyone with an Internet connection.
About Dustin Driver
Journalist, tech writer, and video producer helping Mozilla keep the Web open and accessible for everyone.