The Accessible Media Player(AMIPlayer)

Accessible Media Inc. (AMI)

Chris O’BrienRobert Pearson

30th CSUN ConferenceSan Diego

Accessible Media Inc. (AMI)

Make accessible media for all Canadians

• Overview

Accessible Media Inc. (AMI)

• A not-for-profit

• Three broadcast channels, 2 websites

• Mandated as must-carry services for all providers

• 20+ years of making media accessible

Accessible Media Inc. (AMI)

• AMI-audio; magazines, books, local and original programs

• AMI-tv; open described, closed captioned TV

• AMI.ca http://www.ami.ca/

• AMI-télé http://www.amitele.ca/

• DV Guide http://www.ami.ca/dvguide/

• Scholarship, Research Panel, DV Best Practices

AMIPlayer

AMIPlayer

• Bilingual capable (English / French) media player providing an Accessible Broadcast Experience (ABE)

• Structurally accessible with accessible content

• AMI Original Programming

• Capable of playing both audio and video*

• Powered by thePlatform

• Online Video Publishing and Manage Solution offering a suite of products and services to enable video management and publishing across multiple devices.

• Workflow: Ingest, Transcode, and Smart Publishing to Web, Devices & OTT

• Control: Entitlements, Content Protection, Commerce, Syndication

• Playback: Multi-device/screen playback, measurement & monetization with standards based SDK/Players

Player highlights

• HTML5 ready player with semantic controls.

• Universal runtime

• Responsive layout

• Captioning and transcripts

• Full keyboard accessibility

• Fullscreen capabilities

• Bold interface

HTML 5 and semantics

• Semantics is the study of meaning

• In context of the web it refers to reinforcing meaning of specific tags.

• HTML5 provides new set of “meaningful” tags interpreted by browsers as well as accessible technology

HTML 5 and semantics

Some examples include:

• <header>

• <nav>

• <section>

• <button>

• <footer>

HTML 5 and semantics – example time!

Sorry, what???

<div class="tpPlay" style="position: absolute; overflow: visible; pointer-events: auto; cursor: pointer; width: 44px; height: 33px; left: 0px; top: 0px; display: block;"><canvas width="44" height="33" class="ButtonSkin" style="display: block; width: 44px; height: 33px; position: absolute; left: 0px; top: 0px;"></canvas><table cellspacing="0" cellpadding="0" style="position: relative; left: 0px; top: 0px; margin-right: auto; margin-left: auto; height: 33px;"><tbody><tr><td align="center" style="vertical-align: middle;"><canvas width="14" height="14" class="IconPlay" style="display: block; width: 14px; height: 14px;"></canvas></td></tr></tbody></table></div>

Ah, that’s better

<button class="play" id="play"><span><img src="/Style Library/AMI/Images/controls.svg" alt=""></span><span class="tooltip" aria-hidden="true">Play<span class="arrow" style="left: 20px;"></span></span><span class="visuallyhidden">Play</span></button>

Universal Runtime

• Allows developers to code against a common JavaScript API that renders down to either HTML5 or Flash.

• HTML 5 controls always present regardless of whether Flash video is being rendered

Universal Runtime

Responsive

• AMIPlayer capable of adapting to various screen sizes

• Leverages SVG (Scalable Vector Graphics) instead of traditional raster (bitmap) images for player controls

• REM units for relative sizing

Responsive

Responsive

320px wide

Captions and transcripts

• thePlatform supports many captioning formats: SMTPE-TT, SAMI 1.0, DFXP 1.0, SRT

• Transcripts are available for consumption directly from the player itself

• Players caption customization (size, positioning, font, etc)

DEMO

Contact

• Chris.obrien@ami.ca

• http://www.ami.ca

• Twitter: @a11ymedia

• Facebook: Accessible Media Inc.

• YouTube: http://www.youtube.com/accessiblemedia/

Visit thePlatform.com for more

information on their services.

p. +1 206.436.7900f. +1 206.213.0606

sales@theplatform.com1000 Second Avenue, Suite 1000Seattle, WA 98104