Guest

Cisco.com User Experience Guidelines and Standards

Video

Before you begin

Video provides an engaging, near face-to-face experience for our customers and partners, creating a powerful relationship between them and the company. Two options exist for placing video on Cisco.com as described below.

Video on Demand (VoD)

Cisco Video on Demand (VoD) uses streaming technology to provide any time, any where delivery of information to a global audience. VoDs can consist of synchronized video, voice, slides, transcript, and software demonstrations. Uploading a VoD using the standard Cisco Template and UI will result in the launch of a new browser window by clicking a link on a Cisco.com page. This is option is best for transferring information that includes PowerPoint slides and other links to media in addition to the video.

The Content Upload Tool (CUT) is used to load the video into the standard template and on to the Cisco TV VoD servers, where it can be retrieved for placement on Cisco.com. CUT is a web-based application that is part of the Cisco TV VoD management infrastructure. For more information:

Learn about VoD
Partner with Cisco TV on VoD Production


Embedded Video

With this option, the video will be embedded in your Cisco.com page and is viewed within the context of the page. The video loads on a paused still frame which will also be displayed at the end of the video. The Play button is coded within the .html file to be trackable by Visual Sciences.


Use the embedded video option when:

  • Your video has been approved by Brand Strategy and Identity (corpvideo@cisco.com).
  • You have Flash Video (flv) that matches the embedded video specs or you can provide a source video file in uncompressed .AVI, .MPEG-4, or .MOV format to Cisco TV for conversion to Flash Video.
  • Your video contains marketing-type content with people talking rather than just text or slides.
  • Your video is around 2-4 minutes in length. Embedding videos that are longer than five minutes is not recommended.

Learn more about usage guidelines for Embedded Videos.



Screen shot of standard cisco.com embedded video player: JW Player


Video Encoding & Still Frames


To get high quality FLV output, it's best to start with a high bit rate source video file. Ideally, this would be an uncompressed AVI, MOV (QuickTime), or MPEG 4.
Work directly with Cisco TV to process video files, video tapes or DVDs via their Global Request Form: http://wwwin.cisco.com/it/services/ciscotv/ctv-request-form.shtml
On the request form, click the "Start a new request" button at the bottom-left. Then select "Media Processing: Video only to media file or VoD". You can also email them at: ciscotv-projects@cisco.com

FLV Encoding Settings (recommended)

  • Video Codec: On2 VP6
  • Video Bit Rate: 500 kbps
  • Frame Rate: Same as source
  • Audio Codec: MP3
  • Audio Bit Rate: 96 kbps
  • Video Dimensions: 480x360 (for 4:3 aspect ratio) or 480x270 (for 16:9 aspect ratio)

Still Frame


For your still frame, play the FLV file using any free FLV Player and do a screen capture of an appropriate frame. Or copy a frame from the source video using QuickTime or another video editing program. Resize the still frame to the same dimensions as the video (480x360 or 480x270) and publish the files.

Publishing Video Files


Publish the video (FLV) and still frame (JPG) via CCEWP to the "CDC Content Admin" branch. Place files in an appropriate sub-directory of /cdc_content_elements/embedded-video/ (create a new sub-directory if necessary).

All Video Data Sheets should be placed into /cdc_content_elements/embedded-video/video-data-sheets/.

We recommend that you append any flv with the CIS# if known (such as asa-5580-CIS-76866.flv). Such a number will exist for any project done by CiscoTV and can be found in the url when they deliver video files.

Example URL from CiscoTV: \\171.71.88.155\shared\cmn_projects\01_08_2008_CIS-77812_Custom_Video_Data_Sh
The CIS# in this example is CIS-77812.

Embedding Code

The Addvid Script is the current video embedding code that requires less HTML coding for web developers and provides error checking. Details and sample code can be found here: http://www.cisco.com/cdc_content_elements/scripts/addvid/docs.html.

See the Legacy Code page for help with embedded video using earlier version of code or for any instance when Addvid Script can't be used.

Video Dimensions on Web Page (includes control bar height: 20 pixels)

These are the actual width and height used on the web page - NOT the size of the video or jpg files themselves. Always follow the FLV Encoding Settings listed above for video file creation. The embedded video player scales the flv and jpg down to the appropriate size.

4:3 Aspect Ratio

  • Lightbox 480 x 380
  • Large 320 x 260
  • Medium 240 x 200
  • Small 164 x 143

16:9 Aspect Ratio (Widescreen)

  • Lightbox 480 x 290
  • Large 320 x 200
  • Medium 240 x 155
  • Small 164 x 112

NOTE: The small size is not recommended for videos with screenshots, graphics or other detailed information. Small size does NOT support legible captions

Captions


The Cisco embedded video player displays closed captions from Timed Text (DFXP) XML files (example: http://www.cisco.com/cdc_content_elements/embedded-video/video-data-sheets/nexus_5000_CIS-77671-captions-US.xml).

See Embedding Code for details on how to display captions.

Captions are created for all Video Data Sheets by the embedded video team. If you need to create your own captions, we recommend AutomaticSync Technologies.

Final Step


Email the url for your preview or recently published live page with a new Video Data Sheet to embeddedvideo@external.cisco.com so we can:

  • QA the code and catch any tracking mistakes
  • Add the video to our inventory spreadsheet
  • Create captions for Video Data Sheets
  • Publish new Video Data Sheets to 3rd party video sites

Additional Resources


Embedded Video Community Alias
embeddedvideo@external.cisco.com

Official Site of SWFObject
http://blog.deconcept.com/swfobject/

JW Media Player Official Site
http://www.jeroenwijering.com/?item=JW_FLV_Media_Player