Integrating Rich Media with Dita

Wild Basin Media, Inc.

December 2010

Technology on the Move

Simplicity in Motion

Presentation Overview

Snapshot of OVID Output

A case for Flash Players

DITA and the Object/Embed Method

Problems with the Object/Embed Method

Solution

Online Video-integrated Documentation (OVID) Demo

HTML 5 & Mobile Devices (Time Allowing)

Flash

Flash Player

•Cross-platform viewership: 97%

•Plays *.flv, *.f4v, *.mp4 video container formats

•Ways to acquire Flash player:

•Create your own custom player with Adobe Flash (CS5)

•Hire a Flash developer

•Use an open source Flash player

Flowplayer (GNU General Public License)

JW Player (Creative Commons License)

Video DeliveryProgressive Download

Streaming

Pseudo Streaming

• HTTP protocol • Downloaded to end user’s computer• Easy to set up• Cannot seek

• HTTP protocol• Server-side scripting (e.g., PHP)• Limited seeking

• Real-Time Protocols (e.g., RTMP)• Video does not remain on end user’s computer• Can seek• Instant play • Handles long videos

DITA & Object/Embed

<object> in DITA Lang. Spec.objectDITA's <object> element corresponds to the HTML <object> element.

The <object> element allows authors to include animated images, applets, plug-ins, ActiveX controls, video clips, and other multimedia objects in a topic for rendering after transformation to HTML.

To support Flash video, the value swflash.cab is used in the codebase attribute.

• The <object> in the HTML enables rich media to display in Intenet Explorer.

• The <embed> in the HTML enables rich media to display in browsers such as NetScape and FireFox.

NOTE: While the embed tag is required to display these objects, the embed tag is not in the XHTML 1.0 Transitional tag set.

Paraphrased from http://docs.oasis-open.org/dita/v1.1/OS/langspec/langref/object.html

DITA <object> as Input <object id="flashplayer1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" height="360" width="700" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="flashplayer1"> <param name="movie" value="player.swf"/> <param name="allowscriptaccess" value="always"/> <param name="allowfullscreen" value="true"/> <param name="bgcolor" value="white"/> <param name="flashvars" value="duration=3180&amp;file=video.mp4&amp;provider=http&amp;autostart=true"/> </object>

(X)HTML <object> as Output

<object id="flashplayer1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" height="360" width="700" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="flashplayer1"> <param name="movie" value="player.swf"/> <param name="allowscriptaccess" value="always"/> <param name="allowfullscreen" value="true"/> <param name="bgcolor" value="white"/> <param name="flashvars" value="duration=3180&amp;file=video.mp4&amp;provider=http&amp;autostart=true"/> <embed name="flashplayer1" height="360" width="700" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="player.swf" bgcolor="white" flashvars="duration=3180&amp;file=video.mp4&amp;provider=http&amp;autostart=true"/> </object>

Problems with O/E Method

The Object and Embed (O/E) Method for embedding Flash suffers from cross-browser compatibility issues. In the absence of a standard embed method, Internet Explorer uses the <object> tag, while Firefox, Safari, Chrome, and Opera use the <embed> tag. In short, the inclusion of <embed> breaks XHTML validation.

Breaks XHTML Validation

Limited Tracking/Version Control/Content Management

A few videos can be inserted and manually tracked using O/E; however, management becomes progressively more difficult with every new video.Example: What happens when associated text changes?

Limited Overall Control of Video Presentation

Expanded in following slides...

SwfObject & Playlists

<script type="text/javascript" src="swfobject.js"></script>

SwfObject Method“An easy-to-use and standards-friendly method to embed Flash content, which uses one small JavaScript file.”

-- Google

Unlike the Object/Embed Method, the inclusion of swfobject.js does not break XHTML validation.

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en-us" xml:lang="en-us">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Working assumptions</title>

<script type="text/javascript" src="swfobject.js"></script></head><body> ...

</html>

VALID

Playlists

A playlist is a file, usually an XML file, that tells the player where to find resources (i.e., audio, video and images) and provides information about the resources.

Examples• ASX (Microsoft)

• iTunes Library Format (Apple)

• Atom (W3C)

• MRSS

• SMIL (Open Source)

• XSPF (Open Source)

Pronounced “Spiff”

The Playlist Advantage

Playlists...•Centralize media management.

•Can be versioned, tracked and used within a CMS context.

•Contain metadata that can be searched.

•Can be repurposed (e.g., Sales, Marketing, Tech. Pubs).

•Allow for easy video “segmentation.”

<playlist version="1" xmlns="http://xspf.org/ns/0/"> <title>Example XSPF playlist</title> <tracklist> <track> <title>YouTube</title> <creator>Peach Open Movie Project</creator> <info>http://www.bigbuckbunny.org/</info> <annotation>Big Buck Bunny is a short animated film by the Blender Institute.</annotation> <location>http://youtube.com/watch?v=IBTE-RoMsvw</location> <image>bunny.jpg</image> <meta rel="start">10</meta> </track> <track> <title>Butterfly</title> <creator>Wild Basin Media</creator> <info>http://www.wildbasinmedia.com/</info> <annotation>Demonstration of how to use playlist tracks with the JW Player.</annotation> <location>Butterfly_2.mp4</location> <image>butterfly_1.png</image> </track> </tracklist></playlist>

Anatomy of XSPF Playlist

Video in root directory of

domain

Title displaysin player

Displays in player as thumbnail

Starts 10 seconds into

video

Full-Featured Playlist

“rtmp” indicates that video is

streamed

Namespace extends XSPFfunctionality

with JW Player

Unique ID ofvideo segment

Video segment starts at the 40 second mark

Video segment ends at the 55 second mark

Closed captioning file

Playlist “Flow”

1.

2.

3.

Link in document activates track within playlist.

Playlist provides information about the video to the

player.

Player plays video.NOTE: JavaScript, including swfobject.js, passes

information between the (X)HTML, playlist, and player.

...

[[[Add png of OVID]]]

OVID Demo

HTML5 & Mobile Devices

HTML5

Devices with embedded video support, such as Apple and Android mobile devices, do not always have the capability to render Flash video. The HTML5 <video> element allows the browsers on these devices to render video using cross-platform markup.

HTML5 <video> standard will validate in all modern browsers. Again, neither the <object> nor <embed> tags, which are used to embed Flash, have universally accepted standards.

Browser support for royalty-free and open-source video formats such as WebM and Ogg Theora. 

Standards Compliance

Open Web

Device Variety

Mobile Devices

The Skyfire browser runs on iOS, Android, Win Mobile, and Symbian.

Apple’s iOS: H.264, MPEG-4

Google’s Android: H.264, H.263, MPEG-4

Blackberry’s RIM: H.264, H.263, MPEG-4

MS’s Windows Phone 7: H.264, H.263, MPEG-4

Nokia’s (Open Source) Symbian: ?

Currently Supported Video Codecs:

HTML5 provides video format failover for mobile devices.

Questions

shealy@wildbasinmedia.com

Check out Taming Media Blog at

wildbasinmedia.net