Media Format Guidelines - PBS
Transcript of Media Format Guidelines - PBS
Media Format GuidelinesThis section outlines the guidelines for submitting media files to PBS LearningMedia via the . Please adhere to these guidelines to ensure the CMS toolcontent submission process goes smoothly. Media files that can be included in your resource include:
AudioDocumentsImagesInteractivesVideoClosed CaptioningTranscript
Audio
Acceptable audio file format: MP3.
Documents
The following document formats are supported for import:
Supported document formats
Import File Type Supported
DOC (Microsoft Word) / DOCX
TXT (Text)
PDF (Adobe's Portable Document Format)
XLS (Excel File) / XLSX
PDF-A
OpenDocument ( )ODT
Because documents need to be downloaded for use, they will not be converted and will maintain their original format. If you and you would like it to retain the layout and formatting you've applied, submit it in the print-do not want your document to be editableready PDF format PDF-A ( ).https://en.wikipedia.org/wiki/PDF/AIf , you can:your document should be editable
use the Save As option on your computer to save it as an ODT ( ) before you upload it, orhttps://en.wikipedia.org/wiki/OpenDocumentupload it as a .doc file which is compatible with more systems than the .docx
Viewing documents will generally be done with Microsoft Open Viewer https://view.officeapps.live.com/op/view.aspxDocuments with the following extensions will be viewed using the standard browser behavior: .pdf, .html, .notebook, .htm, .swf, .txt, .do, .pub, .3ds, .epub, .psd. Any other invalid format is included here.After uploading a new document, the user must check that it is correctly displayed in the viewer or uncheck this option in the CMS otherwise.Word and PowerPoint documents bigger than than 10 MB plus Excel documents bigger than 5 MB will be opened using the standard browser behavior.
Images
File types supported: EPS, AI, TIF, BMPNOT
Acceptable image formats
Type of Image Supported File Type
Logo PNG, JPG
Poster Image JPG
Collection images JPG
Support Materials images JPG
Key: = supported = not supported
Type of Image Requirements
Poster Images (and thumbnails) LearningMedia requires a poster image for all assets. If a poster image is not added to an asset, the poster image
from the media file displays.File format: JPGPoster images should be 1920 pixels wide by 1080 pixels high and have a 16:9 aspect ratio. Minimum image size accepted is 700 pixels wide by 394 pixels high.The poster image is resized automatically for lists (thumbnail size) and resource pages (poster image size, i.e. the image you see before you hit the play button).For videos, a representative frame should be chosen.For documents and audio, we would like to have a representative image, or icon.See more about poster images
LogosPlease attach your logo to an email and send to [email protected] strongly recommend including at least one logo on each resource (typically the Contributor logo).Please add logos in the Attributions field at the Content Project level. All logos should be submitted with a .minimum width of 250 pixelsFile format: (must be transparent)PNG.AI and .EPS files can be submitted to PBS if you are unable to provide .PNG files, however, these file types require reformatting by our design department and may take more time to process.All brand logos display in color; all other logos display in grayscale.You can include an unlimited number of Brand, Contributor, Funder, and Producer logos.See more about logos
Image sizes
All sizes are displayed as width x height.
Image File format
Minimum size
Preferred size
Aspect ratio
Additional Notes Example
(click to enlarge)
Resource Poster Image
JPG 700 x 394 1920 x 1080 16:9 LearningMedia requires a poster image for all assets. If a poster image is not added to an asset, the poster image from the media file displays.
For videos, a representative frame should be chosen
For documents and audio, we would like to have a representative image, or icon
Thumbnail on Search Results
JPG 116 x 65 1920 x 1080 16:9 The poster image is resized automatically to create the thumbnail image
Collection Feature Image
JPG 500 x 500 500 x 500 1:1
Collection Banner
JPG 1170 x 150 1170 x 150 ---
Collection Thumbnail
JPG 600 x 338 1920 x 1080 16:9
Support Material Poster Image
JPG 450 x 364 450 x 364 ---
Interactives
HTML Guidelines
HTML may be written according to the HTML 4.01 Transitional, XHTML 1.0, or HTML5 doctype.All HTML files must declare a valid doctype. (HTML will be validated against . It is suggested that all files are validated before W3C guidelinessubmitting to PBS. There are free utilities available to achieve this.)HTML must be Section 508 compliant.Interactive developers should follow best practices of web development for HTML, CSS, JavaScript and Flash/Action script including the use of non-blocking JavaScript loads and supporting the widest array of browser technologies possible.
Pointer assets open in a pop-up of 1045x810 and LTIs open in a pop-up of 1200x756. From the console, click the Open in new tabcheckbox to have your asset open in a new browser tab. Learn more
When targeting a version of Flash, it is suggested that interactive developers target the lowest version number that supports the technology needed to produce the interactive.
Target browsers
The following is a list of target browsers:
Google ChromeInternet Explorer 11.0Firefox 52+, Safari 9+Microsoft Edge.
Interactive Package Construction
Interactives that should be delivered in ZIP archives containing all required files and directory structures needed to contain multiple filesexperience the object.At the root of the ZIP archive should be a manifest file called manifest.txt. The manifest should contain the following information, and nothing else:
Title: Title of interactiveCreator: Creator of interactive CreatorEmail: Email of interactive CreatorDescription: Short description of interactiveDate Created: Date interactive was createdThe ZIP archive should also contain an index.html file at the root of the archive
Only the index.html and the manifest.txt files should be located in the root of the archive. All other files should be contained in a subdirectory called .contentWithin the content directory, interactive creators may use whatever directory structure they choose, as long the guidelines outlined below are followed:
Reference files and directories with the correct letter case. Filesystems are case sensitive. Capital letters may be used, but it is imperative for developers to realize that they must reference files and directories with the correct letter case. If the HTML, JavaScript, CSS or Actionscript of your interactive references "filename.jpg" and the actual file is called "fileName.jpg" then your interactive may appear broken to the end user. This would cause your interactive to be rejected by PBS staff. (This is generally only a problem for developers working on case insensitive platforms such as Windows.) To avoid complications with filename references, it is recommended to avoid any uppercase letters in filenames.Do not include spaces or special characters in file or directory names. No spaces or special characters are allowed in file or directory names. The only special characters that are permitted are: dash ( - ), underscore (_), and period (.). So this-file_name.txt is valid, but this file~name.txt is not valid.All linkage in any interactive should be self-contained and relative to the pathing within the zip archives. For example, the index.html file may embed the object content/swf/main.swf as a valid path and file. However, /content/swf/main.swf will not be a valid path or file on the production system.
All interactives will be loaded via the index.html file in the root directory. This file should bootstrap the interactive to run for the user.
The structure of the content directory may take on a much wider variety of appearances. Figure 1 demonstrates a sample content directory.
Figure 1
content/jQuery/jQuery_min.jsimg/image1.jpgimage2.jpgcss/styles.cssbase.cssswf/main.swfmenu.swfvideo/video1.mp4video2.mp4
FLASH IS NOT RECOMMENDED. Schools and institutions do not always run the most cutting-edge version of the Flash Player and .swf files do not work on many tablets.
LearningMedia Technical Requirements can be found here: .http://www.pbslearningmedia.org/help/technical-requirements/
Learn how to create a single file interactive
UI/UX Guidelines
It is imperative to realize that the interactives will be experienced through many different platforms and devices. In addition to designing the interactive for the appropriate audience, it is helpful to keep in mind some tips to make the interactive accessible for a variety of platforms and interfaces.
TIPS
Variable display resolutions
The interactives may be viewed on a wide variety of displays with varying resolutions so, where possible, use . Vector graphics vector graphicsare especially friendly for developers when using Flash, although features such as SVG and the canvas tag enable HTML-based interactives to leverage scalable graphics. It is recommended that wherever possible, HTML-based interactives utilize a fluid layout in order to make the best use of available display resolution.
Avoidhoverevents
A hover event is any event that occurs upon hovering the mouse cursor over an object on the screen. Both JavaScript and Flash allow for this type of event. These types of events should be avoided in order to better support touch-based interfaces. If an onHover event does not impact the actual functioning of a interactive, it is allowed. However, if an onHover event prevents users on a touch-based device from experiencing the core functions of a interactive, then those onHover events will require alteration.
Provide user -friendly interface
Although mouse pointers and other interface devices provide a high level of accuracy, it is recommended that interactive developers try not to position linked objects too closely together. Give some room to linked elements of your interactive, and allow hot zones to be as large as possible. This will make the interactive more accessible to differently abled users, will ease interaction with the interactive on touch-based devices, and will expand the audience to a wider age range (younger children tend not to be as precise with the mouse as adults and older children).
HTMLlinks
When featuring HTML links as assets, provide the URL that takes the user closest to the media. PBS LearningMedia intentionally tries to avoid cataloging entire websites since we aim to feature discrete resources, so please avoid URLs to home pages, especially if the websites are large.
Video
Standard HD Mezzanine Spec HD 1080p Mezzanine Spec
File Format MPEG-4 (.mp4)
*.mov files are acceptable, however, .mp4 is the preferred format.
MPEG-4 (.mp4)
*.mov files are acceptable, however, .mp4 is the preferred format.
Total Stream BitRate 5 Mbps 6.5Mbps
Video Stream
Codec AVC (H.264) AVC (H.264)
Frame Size 16/9: 1280 x 720 16/9: 1920 X 1080
Frame Rate 30 fps 30 fps
Video Standard NTSC NTSC
Scan Type Progressive Progressive
Video Stream BitRate 4808 Kbps 6308 Kbps
Video Stream BitRate Mode
VBR VBR
Video audio
Videos should not contain web links, hash tags or embedded captions.
360° Videos are also supported but not automatically detected. After uploading this content, the 360° flag must be enabled so the player displays the content correctly.
Mezzanine is the preferred format, however, web delivery is acceptable if mezzanine is not available.
Audio Stream Mezzanine** Web Delivery/COVE Spec
Codec AAC AAC
Audio Stream BitRate 192 Kbps 48 Kbps
Audio Stream BitRate Mode CBR CBR
Number of Audio Channels 2 (Stereo) 1 (Mono)
Audio Channel's Positions L, R C
Sampling Rate 48 KHz 44.1 KHz
Bit Depth 16 bits 16 bits
** Preferred format.
Closed Captioning
When you use one of the caption formats that are supported for ingest, your caption file is automatically converted and stored in the CMS as VTT.Caption positioning will be stripped if not supported.Embedded captions are not supported.
Acceptable caption formats
File Type Supported for ingest Supported for positioning
VTT**
DFXP
SRT
SAMI
SCC
SMPTE-TT
QuickTime text
** Preferred format.
When a user mouses over your video, a variety of icons appear at the bottom of the screen. If the bar contains a CC icon (Figure 1.1), that means your video contains closed captions. If the CC icon does not appear, closed captioning is not available for your video. When activated, captions display at the bottom of the video. Learn more about closed captioning
Figure 1
Video files must have audio tracks.
FCC Online Captioning Regulations
Full-length and chapterized video programming shown with closed captions on TV must now have captions when distributed online. Captions of online video programming must be at least the same quality as the captions shown on TV. The FCC requires the copyright holder of the content to notify the distributor as to whether captions are needed for a particular program and to provide the digital captioning file if needed. In addition, digital closed captioning will be required to be present and accurate for as of January 1, 2016. The following exemption applies as of clips, excerpts and segments January 1, 2016 for that are lifted from a broadcast television program: all clips, segments, and excerpts
Captions are not required for online from , until July 2017.clips near live or live broadcastsCaptions are not required for clips and segments broadcast before January 1, 2016, however, if something is aired as a rerun, captions are ONLY required.
Full text of the online closed captioning regulations can be found here: FCC regulations
Transcript
Acceptable caption formats
File Type Supported for ingest
ASCII
What is ASCII?