Video vs Flash

DizmoSpace supports the HTML <video> tag; unfortunately, on Windows platforms it does not seem to really work. In the MarkdownReader dizmo for example, the video content is required to be presentable on all platforms; therefore, this dizmo implements a switch:

Use <object type="application/x-shockwave-flash"> on Windows platforms, and otherwise keep the <video> tag: That means, we can embed into the Markdown content the following HTML snippet:

<video src=VIDEO_URL poster=IMAGE_URL loop controls
      _controlBarMode=none _scaleMode=zoom />

The attributes have the following meaning:

• src: source URL where the video should be fetched from;
• poster: poster URL where an initial poster image should be fetched from;
• loop: loop the video at after playing it;
• controls: control buttons should be enables (which can be modified by applying CSS on the <video> tag);

The last two attributes _controlBarMode and _scaleMode have no particular meaning for the video tag; but they are forwarded to the flash <object> on Windows platforms:

<object type="application/x-shockwave-flash">
<param name="movie"
       value=FLASH_PLAYER_URL>
<param name="flashvars"
       value="src=VIDEO_URL&poster=IMAGE_URL&loop=true
             &controlBarMode=none&scaleMode=zoom">
<img src=FLASH_FALLBACK_IMAGE_URL>
</object>

We want to display controls on non-Windows platforms, but omit them on Windows platforms. For user interaction and design reasons, we prefer to have a minimal user interface with a single play button: By using CSS we can reduce the controls to only the play button for the <video> tag (on non-Windows platforms), and otherwise we can omit the control bar entirely since the flash player we are using (StrobeMediaPlayback.swf) displays by default a large play button.

Further, to avoid black edges while playing the flash video we need to set the scaleMode to zoom; playing with the <video> tag (on non-Windows platforms) there are transparent edges around the video, which can be eliminated by increasing the zoom slightly - via CSS (e.g. video {zoom: 1.01}).

If no fallback image is set in the original <video> tag, then after converting it to a flash video a default fallback image is embedded, where the src URL has been configured in the project.cfg configuration of the MarkdownReader dizmo.

In the source code the decision to play or not to play a flash video is made via the navigator object:

if (jQuery(html).prop ('tagName') === 'VIDEO') {
    if (navigator.appVersion.indexOf('Win') != -1) {
        return MarkdownReader.VideoConverter.toFlash(html);
    } else {
        return html;
    }
} else {
    return html;
}

So if a <video> tag is given, and we use a Window platform, then convert it to a flash video using the VideoConverter; see the source of the converter for all possible <video> tag and flash <object> attributes. Following URLs provide further information about these two video playing possibilities:

• http://www.html5rocks.com/en/tutorials/video/basics
• http://help.adobe.com/en_US/FMPSMP/Dev/WS3fd35e178bb08cb3-49a02f129f1468bd6-7fff.html
• http://help.adobe.com/en_US/FMPSMP/Dev/WS3fd35e178bb08cb3-49a02f129f1468bd6-7ff9.html

The first is about the HTML <video> tag, and the latter two about the configuration options for the StrobeMediaPlayback.swf player.