Monthly Archives: July 2010

HTML vs. Flash for Arabic text and video

We recently realized that the rendering of Arabic script overlaying the videos on Mightyverse is incorrect. For example, the phrase:
كيف أوصل هناك؟ currently appears on the website differently in the search results (which are rendered in HTML) vs. the video (rendered in Flash) as seen in the screenshots below:

This was brought to my attention by Samar Moushabeck, an Arabic teacher at the Deerfield Academy in Massachusetts. Since I don’t read or speak Arabic, I had to zoom in to understand the difference.



This is clearly unacceptable. It would be (sort of) like if we wrote the English as:
“Ho w w oul d y ou re com mend I ge t t here”

The letters are correct, but the sentence reads like we are illiterate (which, of course, we are in Arabic, but we’re hoping to improve with the help of Samar and language experts like her).

There are a few possible solutions to this.

1) Move the text from video overlay to below or above the video. This is technically simple solution. However, the thinking behind the current design is that it is helpful to be able to read the text while focusing on the movement of the speaker’s lips. The farther the text is from the video the harder it would seem to be for visual learners (which applies to most of us humans).

2) Render the text in HTML and overlay Flash. I want to run screaming from this solution, since I have some experience trying to intermingle HTML and Flash and found it to be time consuming engineering to get it to work correctly across browsers and, even with a lot of work, had to compromise visual design and/or user experience in some cases.

3) Render the text as a graphic, dynamically load into Flash, then overlay within Flash. This seems an awful lot of work to support my theory of more effective learning and a preference for the visual design.

4) HTML5 video, reported to support overlay for captioning seamlessly. While I’ve read that YouTube will continue to use Flash instead of HTML5 video, Mightyverse has short format video so the constraints for YouTube may not apply. My favorite quote from a Mark Pilgrim HTML5 video article is “support for the <video> element is still evolving, which is a polite way of saying it doesn’t work yet. ” It appears that to support HTML5 video across browsers, we would want to support the new WebM standard (with VP8 video and Vorbis audio) along with the H.264 that we already encode for iPhone and Android.

In any case, we have a few things in the queue (like re-releasing the iPhone app for iOS4) before we can address this on the site, which gives us a little time to explore options. Please leave a comment if you have experience with HTML5 video and/or Arabic text in HTML or Flash and are willing to share some insights.