A better way to integrate video and other media into DITA

1. Integrating Rich Media with Dita
Technology on the Move
December 2010
Wild Basin Media, Inc.
Simplicity in Motion

2. 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)

3. Flash

4. 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)

5. Video Delivery
Progressive Download
• HTTP protocol
• Downloaded to end user’s computer
• Easy to set up
• Cannot seek
Streaming
• Real-Time Protocols (e.g., RTMP)
• Video does not remain on end user’s computer
• Can seek
• Instant play
• Handles long videos
Pseudo Streaming
• HTTP protocol
• Server-side scripting (e.g., PHP)
• Limited seeking

6. DITA & Object/Embed

7. <object> in DITA Lang. Spec.
object
DITA'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

8. 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>

9. (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>

10. Problems with O/E Method
Breaks XHTML Validation
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.
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...

11. SwfObject & Playlists
t >
r ip
/ sc
> <
j s"
.
ct
b je
f o
" sw
=
s rc
t "
r ip
c
v as
/ ja
x t
" te
=
pe
ty
p t
c ri
<s

12. SwfObject Method
“An easy-to-use and standards-friendly method to embed Flash
content, which uses one small JavaScript file.”
-- Google
<?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">
ID
<html lang="en-us" xml:lang="en-us">
<head>
L
VA
<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>
Unlike the Object/Embed Method, the inclusion of swfobject.js does not break XHTML validation.

13. 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”

14. 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.”

15. Anatomy of XSPF Playlist
Title displays <playlist version="1" xmlns="http://xspf.org/ns/0/"> Starts 10
<title>Example XSPF playlist</title>
in player <tracklist> seconds into
<track> video
<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> Video in root
</playlist>
directory of
domain
Displays in
player as
thumbnail

16. Full-Featured Playlist
Namespace
“rtmp” indicates
extends XSPF
that video is
functionality
streamed
with JW Player
Video segment
starts at the 40
second mark
Unique ID of Video segment
video segment ends at the 55
second mark
Closed
captioning file

17. Playlist “Flow”
1.
Link in document
activates track
within playlist. ...
2.
Playlist provides
information about
the video to the
player.
Player plays
NOTE: JavaScript, including swfobject.js, passes
3. video.
information between the (X)HTML, playlist, and player.

18. OVID Demo
[[[Add png of OVID]]]

19. HTML5 & Mobile
Devices

20. HTML5
Standards Compliance
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.
Open Web
Browser support for royalty-free and open-source video formats such as WebM and Ogg Theora.
Device Variety
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.

21. Mobile Devices
Currently Supported Video Codecs:
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: ?
The Skyfire browser runs on iOS, Android, Win Mobile, and Symbian.
HTML5 provides video format failover for mobile devices.

22. Questions
Check out Taming
Media Blog at
wildbasinmedia.net
shealy@wildbasinmedia.com