Fast Track To Streaming

1Slide

12 April 2023© Shell IT International

Fast Track to Streaming Corporate Communications

Gerald “G” Tyler

Shell IT International

2Slide


Pre-Production

• Scope – ”Over the shoulder” DV interview or BetaSP with a set and teleprompter?

• Outline / Script – Describe the production / write script or topics of discussion

• Budget – How much funding is available?

• Schedule – Timeline? Deadline? Resource availability?

• Staff – Clarify roles and expectations

• Production Crew – Individual cameraperson? External crew? Cost?

• Equipment – Available in-house? Rental… 3-CCD camera, tripod, and lights. Post-production workstation? Outsourced? Cost?

• Location – Available light, noise, booking, logistics (HSE forms)?

3Slide


Pre-Production – Streaming

• Business Requirements– Business case / purpose– Usability requirements– Live-live, scheduled live, on-demand, download– Audience size, global reach, estimated concurrent users– Available bandwidth > concurrent user limit– Use external CDN?

• Assess Target Audience– Platform > Windows Media Player v6.4, v8 codecs

– Connection Speeds > 56k to broadband

– Available Bandwidth > 1 Mb

4Slide



• Usability– Slide / URL flips– Markers– Related Links– Feedback– Polls

• Parameters– Target bitrates > Audio Only 23k, Low 33k, Med 100k

– Balancing audio/video bitrates > Importance of audio

– Codecs > WMV v8, WMA v8 for music, ACELP.net for voice

– Metadata > Title, Author, Copyright, Description, Markers, Scripts, and don’t forget html Metatags!

– Image size > Low 240x180, Med 240x180, Widescreen 320x180

– Frame rate > Low 10fps, Med 25fps

– Create ‘profiles’ > Store parameters for repeated use

5Slide



• Media Output Requirements– Stream– Download– CD?– DVD?– Tape?

6Slide


Production

• Use broadcast production best practices – Proper lighting– Quality audio– 3-CCD camera– White balance– Turn off auto-focus and auto-iris– Good tripod– Close-ups and proper headroom

• Verify quality audio and levels with headphones before recording!

• Acquire elements – branding, slides, transcript, related links

• Create animations or Flash, if necessary

7Slide


Post-Production

• Involves everything after shooting…– Capture– Pre-process– Edit– Output– Encode– Metadata– GUI design– Web design– Test– Publish– Backup

8Slide


Acquire Footage

• Sometime’s you’ll be capturing your own footage

• Other times you’re acquiring footage or an edited master from a Post house or customer

• If outputting to tape, DVD, or CD, request an MPEG-2 file(s)

• For streaming only, MPEG-1 will do. But ask for the MPEG-2 anyway so you can off it to tape

• Setup an FTP space to transfer files quickly

• If the Post house doesn’t digitize, request a miniDV tape

• If the tape comes from overseas, you’ll probably need to convert to NTSC. Have them put the conversion on miniDV

9Slide


Capture

• Use AV hard drives – Firewire, RAID, etc.

• Research your capture card – consumer, prosumer, pro

• Conserve CPU power

• Optimize your hard drive – defrag often

• Capture at highest quality – 720x480, 29.97fps, 16-bit audio

• Keep a tape archive

• Avoid dropped frames– Use external drive– Backup projects to DVD or tape, then delete from drive– Defrag often… did I say Defrag often?– Capture after a fresh boot with no other apps loaded– Or outsource capture to video conversion / duplication house,

especially for longer videos

10Slide


Capture

• Acquire adequate workstation and peripherals – Firewire interface– Hard drive size / speed – external 120+Gb, 7200+ rpm– DVD+RW or tape drive for backup– RAM – 1-2Gb– 3-CCD DV camera (or cheaper miniDV camera for playback)– Analog-to-Digital converter (Canopus ADVC-100)– S-VHS deck– TV / Monitor– Possibly a multi-format VCR (NTSC/PAL/SECAM)

11Slide


Take a Break

12Slide


Edit – Video Pre-processing

• Understand video level differences for Web and tape… video looks brighter on tape, darker on a PC monitor

• Brightness – Controls the overall luminance value

• Contrast – Increases or decreases the range of difference between the darkest and lightest portions of the video

• Levels – Uses a valuable histogram to evaluate video levels such as black, white and grey points

• Gamma Correction – Used to adjust video brightness levels for playback on Macs which look brighter than PCs

• Saturation – Used to adjust the amount of color

13Slide


Edit – Audio Pre-processing

• Export audio to SoundForge or dedicated audio application

• Always check audio levels of source footage… don’t just turn your speakers up or down

• Normalize – Maximizes the volume level without causing distortion if set properly

• Volume – The overall level of the signal. Better adjusted through normalization

• Compression – Evens out the dynamic range of the audio. Useful for controlling level spikes and adding ‘presence’

• Equalization – Adjusts the tonality of the audio. Better to cut than boost

• Resampling – Files may need to be resampled to 48k. Premiere handles multiple sampling rates if you select “Best” in the Enhanced Rate Conversion dropdown in Audio Settings

14Slide


Edit

• Typically involves…– Applying pre-processing effects– Arranging various sections of captured clips into a timeline– Trimming In/Out points– Inserting transitions– Incorporating graphics or visual effects– Mixing and synchronizing audio– Adding titles

• Professional video editing is a learned skill through knowledge and experience

• Create quality transitions… cuts or fades that are properly timed

• Preview edits carefully before committing to them. Output to a short clip to verify before moving on

15Slide


Edit

• Confirm appropriate pixel width is specified

• Stick to cuts and fast dissolves

• Use titling in an external graphic, not in the video – think 160x120

• Export a frame of video for the Audio Only video area and web link

• Have someone transcribe the video for a downloadable transcript and assisting with CC

• Specify the default transition / duration and inserted graphic duration before starting

16Slide


Output

• Determined during Pre-production (Output Requirements)

• Image Size – Output to the highest size you’ll be offering online.– 240x180 AVI for encoding– 720x480 DV tape for master tape archive (for full-size video)– 720x480 MPEG-2 for DVD– 640x480 for CD

• Pixel Width – For streaming or CD, output square pixels. For tape or DVD, output DV pixels (0.9)

• Cropping – Crop out any tearing or black bands around the video. Maintain the aspect ratio. Crop on output vs. in the timeline

• Output audio to 16-bit stereo

• Use the MPEG-4 v2 codec with max settings for the encoding AVI file so file sizes are manageable

17Slide


Output

• Widescreen – Output to 320x180 with square pixels for a 16:9 version. For a 4:3 version, crop 40 pixels off each side. Sometimes you’ll need to vary the amount on each side so the speaker is centered

• Deinterlacing – Combines the odd and even fields (or deletes one set) to create progressive scan video

• Inverse Telecine – Used to discard the additional 6 frames the 3:2 pulldown process adds to film-to-tape transfers

• Calibrate your monitor

• Notate marker timecodes in ASI text file (if markers are implemented)

18Slide


Encode

• Various Methods– Windows Media Encoder– Real Presenter– Plugins for both through editing software– Standalone encoders… Procoder, Cleaner, Squeeze

• Encoding from editing software – advantages / disadvantages

• Profiles – create and share profiles for target audiences / bitrates

• Image Quality setting – Create a couple Low profiles with alternate settings between Smoother and Clearer. Smoother will stay more true to the frame rate but will appear smudgy with action. Clearer will keep minimal movement sharper but will drop the frame rate with action

• Pre-process video – De-interlace if over height of 240, inverse telecine if necessary

19Slide


Encode

• Encode to Med, Low, and Audio Only bandwidth options– Medium: 93k, 240x180, WMV v8, ACELP.net (voice) or WMA v8

(music), 25fps– Low: 33k, 240x180 (or 160x120), WMV v8, ACELP.net, 10 fps– Audio Only: 23k, ACELP.net

• Some companies just provide Audio Only versions to save video production costs

• WM9 warning – deletes v7 and v8 codecs, video not upward-compatible, renders ASI useless. Be wary of new software with v9 or DirectX embedded

20Slide


Take a Break

21Slide


Integrate

• Metadata – title, author, copyright, description

• Markers and Scripts – chapterization and page / URL flips

• Media Player Interface Design– Implement defined controls– Closed caption space

• GUI Design – Photoshop comp (770x475)

• Web Interface Design– Develop html files– Use generic filenames to minimize changes after copy / paste– Embed Media Player to web pages– Use ‘includes’ for repeated info / files

• Metafiles – metadata, playlists, and rollovers

22Slide


Integrate

• Markers– Allows users to view content in an interactive, non-linear fashion,

sometimes called Chapterization– Well-suited to training apps and long-form video– Embedded via Advanced Script Indexer, ASF Indexer, or ASFChop– The GoTo Bar is no longer supported in WM9. Use an area of the

web page to display markers and use Javascript to call them

• Scripts– Facilitates page / URL flips– Trigger anything from URLs to slides, JPGs, GIFs, PDFs, Office docs,

etc.– Implemented via a SAMI file and a little code… more flexible than

ASI

23Slide


Integrate

• Output slides to graphics– Open Powerpoint with slide file– Save As…– Scroll down to TIFF format in the Save As dropdown menu (TIFF won’t

compress it… compress to JPG or GIF from Photoshop)– Click Yes if you want all slides converted or No if you only want the one

slide converted– They will be output to the size specified in Page Setup at 96dpi– If you have full Acrobat, you can print to Distiller and have a PDF file with

high resolution… helpful for detailed slides

• Slide aspect ratio– Powerpoint slides can be in various sizes / aspect ratios… Letter, A4,

screen, custom, etc. It probably won’t match the size you’ve allocated in your web page. Open in Photoshop then crop

– For simple text slides, create them in Photoshop at the specific size you want

24Slide


Integrate – Player Interface Design

• Determine desired controls

• Embed Media Player code

• Add additional height for various controls– Controls – add 45– Status Bar – add 26– Display – add 74

• Include <EMBED> code for Netscape compatibility

• Put all files into a single folder to negate having to use the BaseURL parameter

• To load media into your Media Player (not a browser), just link to the metafile

25Slide


Windows Media Parameters

<OBJECT ID="MediaPlayer" WIDTH="240" HEIGHT="322" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/

nsmp2nf.cab#Version=6,4,7,1112" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject"><PARAM NAME="DefaultFrame" VALUE="main"><PARAM NAME="FileName" VALUE="med.asx"><PARAM name="SendKeyboardEvents" value=“True"><PARAM name="SendMouseClickEvents" value=“True"><PARAM name="SendWarningEvents" value=“True"><PARAM name="SendErrorEvents" value=“True"><PARAM NAME="ShowControls" VALUE="False"><PARAM name="ShowCaptioning" value="True"><PARAM name="ShowGotoBar" value="True"><PARAM NAME="ShowStatusBar" VALUE="True"><PARAM NAME="ShowDisplay" VALUE="False"><PARAM name="SAMIFileName" value="captions.smi"><PARAM NAME="AutoSize" VALUE="False"><PARAM NAME="EnableContentMenu" VALUE="True"><PARAM NAME="InvokeURLS" VALUE="True">

26Slide


Windows Media Parameters

Insert Netscape-compatible Embed code

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer1" src="med.asx"

width="240"height="322"animationatStart=1autoStart=1DefaultFrame=mainInvokeURLs=1showStatusBar=1showgotobar=1 showControls=1showDisplay=0

showPositionControls=1 volume=0></embed></OBJECT>

27Slide


Integrate – Closed Captioning

• Suggested so challenged users have the same opportunity to experience multimedia

• Mandatory on federal sites

• The SAMI file

• Converting minutes:seconds to milliseconds

• Inline stylesheet to format text

• Implementing scripts via the SAMI file

• Can be used for different languages

• Don’t create the SAMI file until your edit is approved and signed off

28Slide



Sample SAMI File<SAMI><BODY> <HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD>

29Slide



Sample SAMI File (cont’d)

<SYNC Start="2000"><P ID="Source">Malcolm Brinded</p><P Class="Captions">Hello, I’m here to talk to you about information security and why I believe </P></SYNC>

<SYNC Start="8000"><P Class="Captions">it’s very important that you take this training very seriously. </P></SYNC>

<SYNC Start="10000"><P ID="Source"> </p><P Class="Captions"> </P></SYNC>

</BODY></SAMI>

30Slide


Integrate – GUI Design

• Now comes the fun part…

• Start with a Photoshop comp sized to 770x475… effectively 800x600

• Open your branding elements and place them in… name the layers

• Plan on popping a new window so you can control how the presentation is viewed… no menu, toolbars, etc. Here’s the cleanest code I’ve found…

<a onclick="window.open('med.htm','videoView', 'width=770,height=475,noresize,scrollbars=no');return false;" href="#">

• When you’re done, don’t worry about cutting it up. Use absolute positioning via a CSS. Just save the entire design as a nicely compressed JPG. Use Save For Web instead of Save As

31Slide



Example

32Slide



Example

33Slide



Example

34Slide



Example

35Slide



Example

36Slide



Example

37Slide


Integrate – Web Design

• Create web pages for each bandwidth option based on your GUI design

• Layout your pages with absolute positioning with a stylesheet vs. html. MUCH more flexible!

#bg {position:absolute; left:0px; top:0px; width:771px; height:471px; z-index:1}#video {position:absolute; left:58px; top:14px; width:240px; height:50px; z-index:2}#cc {position:absolute; left:58px; top:220px; width:240px; height:72px; padding:5px;

background: Black; border:0; z-index:3}#buttons {position:absolute; left:58px; top:293px; width:240px; height:20px; z-index:4}#markers {position:absolute; left:25px; top:365px; width:300px; height:100px; z-index:5}#ppt {position:absolute; left:356px; top:14px; width:415px; height:287px; z-index:6}#links {position:absolute; left:364px; top:402px; width:220px; height:35px; z-index:7}

• Build your html with simple <div> tags… <div id=“bg”></div>

• Keep all the files in the same folder to negate having to use the BaseURL parameter

38Slide


Integrate – Web Design

• Metatags! Don’t forget to include descriptive metatags in the html such as Title, Description, Author, etc. but more importantly, Keywords… this is how people will find your video through the search engines

<html><head><title>IT for Shell Communications - Video Library</title><meta name="Description" content=“The IT for Shell Video Library"><meta name="Keywords" content="IT for Shell, video, audio, stream, streaming,

streaming media, video library"><meta name="Language" content="English"><meta name="Company" content="Shell Information Technology International"><meta name="Subject" content="IT for Shell Video Library, streaming media"><meta name="Author" content="G Tyler [email protected]"><meta name="Contributor" content="G Tyler [email protected]"><meta name="Owner" content="Hazel Gray [email protected]"><meta name="Effective date" content=“01Oct2004"><meta name="Review date" content="01Oct2005"><meta name="Robots" content="index, follow">

39Slide


Integrate – Metafiles

What is a metafile?• Small text files that trigger streaming media player

playback using MIME types. Different platforms have different names for them…– Windows Media .asx ‘redirector files’

<asx version="3.0"> <entry> <ref ref="mms://your.wmserver.com/YourStream.wmv" /> </entry>

</asx>

– RealSystem .ram ‘metafiles’rtsp://your.realserver.com/YourStream.rm

– Quicktime .qtl ‘reference movies’ rtsptext

rtsp://your.quicktimeserver.com/YourStream.mov

• Used as a redirector to point to the encoded files on the streaming server

40Slide



• Can also contain other information, such as metadata, a playlist, or conditional statements that offer the player choices about what file to play back

• Will play clips one after the other with minimal buffering time or interruption between them

• Can also be used as a ‘rollover’ to different streaming servers for redundancy, load balancing, and increasing concurrent users

• Specifies the desired transfer protocol for the stream, and can be used as a rollover to different protocols, such as http to get through firewalls

41Slide



• Windows Media metafile as a Playlist

<ASX version = "3.0">

<Title>2003 ITPS Academy Awards</Title>

<Author>G Tyler</Author>

<ENTRY>

<Ref href="mms://streamingserver.com/video1.wmv"/>

</ENTRY>

<ENTRY>

<Title>Video 2</Title>

<Copyright>2004 Shell IT International</Copyright>


</ENTRY>

<ENTRY>


</ENTRY>

</ASX>

42Slide



• Windows Media metafile as a Rollover

<ASX version = "3.0">

<Title>2003 ITPS Academy Awards</Title>

<Author>G Tyler</Author>

<ENTRY>

<Ref href="mms://streamingserver1.com/Video.wmv"/>



</ENTRY>

</ASX>

43Slide


Distribute

• Live-live, scheduled live, on-demand, download?

• Internal server(s) or external CDN?

• Serve– FTP encoded files to streaming server(s) or CDN– Test– Publish html, metafiles, and downloadables to web server– Broadcast communications

• Manage– Stagger communications – keep hundreds of viewers from hitting server

simultaneously– Content Management – keep it fresh, zip older videos as a download,

archive to a separate web page, and delete from the streaming server– Statistics / Quality of Service – monitor traffic via log files

• For more detailed info, get Steve Mack’s “The Streaming Media Bible”

44Slide


Requirements

• What to ask for when building a presentation– Official name of the video program– Deadline or broadcast date– Branding elements and page colors, if required– Approved slogans to include– Names of people in the video, if applicable, for CC name titles– Slides or slide text to include– Marker names / times of video sections, if applicable– Transcript for CC– Related links to include– Descriptive text to include– Streaming server publishing point for FTPing the videos.

45Slide


Business Applications

0% 10% 20% 30% 40% 50% 60% 70% 80%

Webcasting

Web Conferencing

Video Email

Surveillance/Security

Sales Force Training

Product Anncmts

Int Exec Comm

Ext Corp Anncmts

Distance Learning

Company Meetings

Collaboration

SM3. Current and Planned Use for Streaming Media

Currently use No current use, Plan to use in next 12 months

46Slide


Q & A

Gerald “G” TylerShell IT International

(713) [email protected]

47Slide


Enterprise-Related Sessions

• Other enterprise streaming panels of interest…– Tools and Strategies For Content Creation & Encoding

A - Great America J (A101) Tuesday, 10:00 AM - 11:00 AM

– Outsourcing Versus Building An In-House Streaming Media InfrastructureA - Great America J (A102) Tuesday, 11:15 AM - 12:15 PM

– The Evolution of Enterprise Communications: What’s Next?A - Great America J (A104) Tuesday, 2:45 PM - 3:45 PM

– Building An Internet Or Intranet Streaming StudioA - Great America J (A201) Wednesday, 10:45 AM - 11:30 AM

– Effective Streaming Media Strategies For The EnterpriseA - Great America J (A302) Thursday, 11:30 AM - 12:30 PM

48Slide


Thank You For Coming

• Drop off your business card for a copy of the presentation

• Contact me anytime for questions during the conference or later at [email protected]

• Get “The Streaming Media Bible” by Steve Mack!

• Enjoy the conference

Fast Track To Streaming

Technology

Transcript of Fast Track To Streaming