Flash without Flash: HTML5 Pitfalls

Posted on by

This post is also available in: Russian

HTML5 on iPad

However porting of Web application originally created in Flash is not an easy task, still it is not impossible. In this article, we will discuss a few points of migration from the Flash to HTML5 tools and the pitfalls you may encounter on the way.

Currently, Apple’s mobile devices are gaining more popularity in Russia and overseas. Still, as we know, Apple is all but friendly to Adobe solutions. The number of users using Apple products (iPhone / iPad) is too great to be neglected. So we need to reproduce Adobe Flash Platform functionality using the tools supported by Mobile Safari. Albeit such tools are not exhaustive, they are quite close to it. Finally, we have just to support one browser engine.

In WebKit, we have quite a lot of CSS3 tools: shadows, gradients, transparency, to name but a few. Moreover, the very WebKit engine began with the KDE project driven by Google and Apple. Currently, it is the most advanced engine in terms of HTML5 support. In view of hardware decoding capabilities, HTML5 video playback is in no way problematic, and often even gives advantages compared to other platforms. For example, if your original Flash video is encoded in H.264, then, generally speaking, you do not even need transcoding.

The regular iOS player has quite a universal design, and its functionality completely covers the features of a typical Flash-based player. However, sometimes you need to have your custom design.

While porting a Flash player, we used the vector elements of the original player, exported to SVG. The WebKit supports SVG 1.1 and allows you to animate vector graphics with SMIL or ECMAScript (actually, Javascript is applicable here). Well, this is where Flash has started.

Here is an example of rotating images in SVG using ECMAScript:

<script>
<![CDATA[
    var deg=0;
    function rot() {
    document.getElementById('stuff').setAttribute(
        "transform","rotate("+deg+" 28 28)"
    );
    setTimeout("rot()", 1);
    deg++;
    if (deg>360) deg=0;
    }
function init() { rot() }
]]>
</script>

Or, in SMIL:

<g>
    <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate" from="0 28 28"
        to="360 28 28"
        begin="0s"
        dur="3s"
        repeatCount="indefinite"/>
    <use xlink:href="#stuff"/>
</g>

Please also do not forget of <svg ... xmlns:xlink="http://www.w3.org/1999/xlink">

However, having experienced euphoria from animating a vector graph, we confront two pitfalls: if we insert svg within an <img> tag (which is normal for WebKit), then animation fails. If we use HTML5 standard <embed> tag, we lose background transparency in WebKit. Now to avoid the second pitfall, we introduce SVG style code:

<style>
    svg { -webkit-background-clip: text; }
</style>

It should be noted that touch screen devices, including multi-touch, have no keyboard and mouse. Touch screen generates utterly different events. Moreover, the browser responds to these events, changing its scale and scrolling the page.

Thus, porting images from Flash slider to JavaScript is just the beginning. Also, you have to take care of handling the related events. This way, you can avoid unexpected browser behavior, and such events will further enhance your application. Using Javascript frameworks, you can facilitate the development process. E.g., for jQuery, there are several plug-ins to support gestures on iPhone and iPad.

And now we have a full-featured iPad-compatible slider.

Well, however it’s operable, still it’s slow. JavaScript performance on the Apple devices leaves much to be desired.

What can we do in such a case? Given that still we are working with WebKit, a reasonable solution would be to take animation off JavaScript, and delegate it to CSS3. So, we implement animation in CSS, and use JavaScript just to listen to the events and assign classes to the elements.

Here is an exemplary animation:

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport"
      content="initial-scale=1.0;
      maximum-scale=1.0;
      user-scalable=0;" />
<title>iPhone JS testing</title>
<style type="text/css">
.box{
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: red;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 2.0s;
}
.move{
  -webkit-transform: translateX(100px);
}
</style>
<script src="jquery-1.3.2.min.js"
        type="application/x-javascript"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
    $(".box").click(function(){
    $(this).addClass("move");
  });
});
</script>
<div class="box"></div>
</body>
</html>

Now that we have all the components to substitute for the expressive Flash features, let’s go back to our HTML5 video player. Of all the attributes and events of the DOM video element, I would like to underscore the following:

currentTime and duration (float, seconds) enable the playback slider. In addition to viewing it, you can also move it, as we can save the time to currentTime.

readyState shows readiness to play back the video:

0 No data (yet)
1 Duration known
2 Current position data is known
3 The data is available for the current and future positions. Now you can start playback
4 The data to play back the whole video is available.

Also, of course, here are the main events to control the playback: play and pause. Everything else is essentially a technical matter. Unfortunately, duration is not always giving a correct result: sometimes you can get NaN instead of the needed value, so it is reasonable to communicate video length to our script in advance.

Finally, let’s mention the formats and containers supported by iPad and iPhone. In general, they use H.264 as a video codec and AAC as an audio codec. The containers supported are mp4, m4v, and mpeg-ps. For more, please visit Apple’s Web site.

Here is an example of HTML5 player created with the above technologies. For its proper operation, you have to install a Webkit based browser, i.e. Apple Safari or Google Chrome.

Leave a Reply