Video Meets Documentation

Presentation for Boulder Writers Alliance

Wild Basin Media, Inc.

November 2010

Creating Effective Web-Based Learning Tools

• Basic Components of Video Integration

• Video

• Video Player (and Playlist)

• Document

• OVID Demo

• Mini Walk Through

• Video & DITA (Time Allowing)

• Questions

Presentation Overview

DocumentVideo

Player

Playlist (optional)

Basic Com

ponents

Video

The Big Picture

Google reports that YouTube streams Two billion videos per day. On

average, everyone on the Internet is watching one YouTube video per day.

From Techcrunch.com:

Recording Video

Camera-Generated VideoScreen-Captured Video

iShowU (Mac)

Captivate (Win/Mac Beta)

Camtasia Studio (Win)

Camtasia for Mac

Jing (Win/Mac)

Screenflow (Mac)

...

(Out of Scope)

More Info: Video Production WikiPanasonic DVX100B Tutorial

Concepts to Know:

StoryboardShot List

Rule of ThirdsThree Point Lighting

Depth of FieldSD vs. HD

Frames per SecondProgressive vs. Interlaced

Shooting Tips The Screencasting Handbook

Editing VideoWindows

Mac

• Kino

More Info: Top 5 Linux Video Editor Software

• Premiere Pro• Sony Vegas• Windows Live Movie Maker• Captivate• Camtasia

• Final Cut Pro• Final Cut Express• Premiere Pro• iMovie• Captivate• Camtasia

Linux

Ken Stone’s FCP Tutorials Creative Cow Tutorials

Video DeliveryProgressive Download

Streaming

Pseudo Streaming

Web Server vs. Streaming Server

• 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

More Info: xmoovStream

Hosting Video

• Your company’s server

• Free services:

YouTube, Vimeo, MetaCafe, etc.

• Content Delivery Networks (CDN):

Influxis, CloudFront, HighWinds, etc.

More Info:

Server-Side Hosting Options:

Free Alternatives to YouTube Flash CDNs

(Out of Scope)

Video Players

•Silverlight (Microsoft)

•QuickTime (Apple)

•HTML 5 (Open Source)

•Flash (Adobe)

...

Client-Side Player Options:

Flash Player

More Info:

•Cross-platform viewership: 98%

•Consumes *.flv, *.f4v, *.mp4 video formats

•Ways to acquire the 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 FormatsSWF vs. FLV Flash Video FAQ

Playlists

Creating Video Playlists for JW Player

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.

More Info:

Examples:• ASX (Microsoft)

• iTunes Library Format (Apple)

• Atom (W3C)

• MRSS

• SMIL (Open Source)

• XSPF (Open Source)

...

Why Playlists Rock

Playlists...

• Centralize media managementExample: Assigning start/end values

• Can be versioned, tracked

• Contain metadata that can be searched

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 activates track within

playlist.

Playlist provides information about the video to the

player.

Player plays video.

NOTE: JavaScript passes information between the (X)HTML, playlist, and player.

Alternative to Playlist

<object id="flashplayer1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" height="360" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" 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&amp;playlistsize=200&amp;playlist=right"/> <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&amp;playlistsize=200&amp;playlist=right"/> </object>

Object Tag:

XML

Authoring

PDF

HTMLHelp

(X)HTML

•DITA•Docbook•TEI•S1000D ...

Structured Documentation

Why use DITA to produce HTML deliverables?More Info:

Transform

EclipsePlugin

DocumentVideo

Player

Playlist (optional)

Basic Com

ponentsReview

[[[Add png of OVID]]]

OVID Demo

Mini Walk Through

1. Use Camtasia to record/edit video.

2. Export video in .mp4 format.

3. Construct playlist.

4. Play video using playlist within document.

Video/Doc Integration

Video & DITAD

arw

in In

form

atio

n Ty

ping

Arc

hite

ctur

e

DITA

• Darwin Information Typing Architecture

• A publishing solution created by IBM that allows writers to reuse information, reduce writing cycles and improve content management.

DITA Learning and Training

• Dita Learning and Training Specialization is a customization of the DITA core content models.

• Purpose: To create online courses.

More Info: DITA Learning Specialization

Information Architect

• Information architect (IA) and videographer coordinate on project.

• IA & videographer must determine level of granularity.

• Ditamap: Blueprint for the video storyboard or shot list.

Technical Communicator

• Technical Communicator (TC) can use the video reference (e.g., <xref>) key, which includes a preview of video playlist tracks.

• TC inserts video references into XML source.

• Video production uncovers topics that were not prefigured by IA or TC.

Reuse

• Like their text-based counterparts, playlist tracks may be reused across topics and documentation sets.

• Reuse of playlist tracks drives down overall cost of producing video.

QuestionsThese slides and other resources can be downloaded from Wild Basin Media:media.wildbasinmedia.com/bwa2010.zip.

shealy@wildbasinmedia.com

Check out Taming Media Blog at

wildbasinmedia.net