Integrating Rich Media with Dita Technology on the Move December 2010 Wild Basin Media, Inc. Simplicity in Motion
Presentation OverviewSnapshot of OVID OutputA case for Flash PlayersDITA and the Object/Embed Method Problems with the Object/Embed MethodSolution Online Video-integrated Documentation (OVID) DemoHTML 5 & Mobile Devices (Time Allowing)
Flash Player• Cross-platform viewership: 97%• Plays *.ﬂv, *.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 • 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
<object> in DITA Lang. Spec.objectDITAs <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 renderingafter transformation to HTML.To support Flash video, the value swﬂash.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
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 difﬁcult with every new video. Example: What happens when associated text changes? Limited Overall Control of Video Presentation Expanded in following slides...
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
PlaylistsA playlist is a ﬁle, usually an XML ﬁle, that tells the player where to ﬁnd 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 AdvantagePlaylists...•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.”
Anatomy of XSPF PlaylistTitle 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 ﬁlm 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>Butterﬂy</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>Butterﬂy_2.mp4</location> <image>butterﬂy_1.png</image> </track> </tracklist> Video in root </playlist> directory of domain Displays in player as thumbnail
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 segmentvideo segment ends at the 55 second mark Closed captioning ﬁle
HTML5Standards 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.
Mobile DevicesCurrently 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 Skyﬁre browser runs on iOS, Android, Win Mobile, and Symbian.HTML5 provides video format failover for mobile devices.
QuestionsCheck out Taming Media Blog atwildbasinmedia.net firstname.lastname@example.org