Live Media on Your BlogMike @drnormal Gebhardt

http://drnormal.com/about

Design Acknowledgements: Cami Kaos StrangeLoveLive.com

Rick Turoczy 30HourDay.orgDarin Richardson RefreshMedia.com

All trademarks and logos are the property of their respective owners.

The Early Years of Online Media in 90’s

• Lack of Bandwidth Online– Downloading not Streaming

• Audio Online– mp3 extension (1995)– Ripping CD’s– WinAMP (1997)– The pre-iPod Years (2001)– Shoutcast AOL (1999) + DSL = “Internet Radio”

• Video Online– Low quality for online video– Real Player (1995) Streaming Client (rm & ram)

A Golden DecadeTechnology and Content 2000-2010

• Wired “Weblogs” article (2000) http://is.gd/eWlYN– Personal Web Publishing Communities http://is.gd/eWmjA

• Hosted Blogs and Software– LiveJournal & Blogger (1999)– Wordpress (2003)

• Technology: RSS & Web Coding– RSS 1.0 (2000) / RSS 2.0 (2003)– Web "standards" driven to server side!

Flash Makes Live Web Media a Reality

• Flash 1 (1996) / Flash 4 (1999)

• Flash 8 (2005): Full video streaming support

• Flash Media Live Encoder (FMLE)– 1.0/2.0 (2007) RTMPFMS/FVSS– 2.5 (2008): H.264– 3.0 (2009): VP6/H.264/MP3/AAC Codecs

My Blog Is Now My Media Empire!

My Blog Is Now My Media Empire!

TIP: Embedding a Live Event into Your Blog

• I’m at a Live Event!– What Type of Real Time Media Stream?

WebVisions 2010Embed a Live Event into a Blog Post

Add a Watch It Live Tab

Add a Watch It Live TabLive Content Not on Main Page & 3rd Party Chat Embed

Livestream and JustinHave Embed Codes Too - Just Look for Them Below the Player!

TRICK: Producing a Live Event Integration into Your Blog

• Public or Private CDN?

• Players and “Social Streams”

Word Camp Portland 2010With Twitter Hashtag “Social Stream”

FMLE to FVSS

Service Provider and FMLEDownload FMLE XML Config File for Your Channel

Embed Code in a Custom Header

Embed Code in Custom Header

Embed Code in Custom HeaderLive Content in Header – Posted Content Below

Embed Code in Custom HeaderThis is my Blog! http://drnormal.com

CHICANERY: Design ConsiderationsConsider Audience Experience when Choosing a Theme

HTML5 Video and going mobile!

HTML5 Video and going mobile!

• <video> </video> & Native Browser Support

• Codecs & Licensed IP (e.g. H.264)– MPEG LA– http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC

• Apple, Adobe & Google (On2/VP8/WebM)

• Live Services Starting to Support Natively– http://iphone.livestream.com/

HTML5 Video: Codecs not Codex