Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ami video-player-csun


Published on

Accessible Media Inc. (AMI) has developed the first accessible media player for the Canadian broadcasting industry, providing captioned and described content through an accessible interface.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ami video-player-csun

  1. 1. The Accessible Media Player (AMIPlayer) Accessible Media Inc. (AMI) Chris O’Brien Robert Pearson 30th CSUN Conference San Diego
  2. 2. Accessible Media Inc. (AMI) Make accessible media for all Canadians • Overview
  3. 3. 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
  4. 4. Accessible Media Inc. (AMI) • AMI-audio; magazines, books, local and original programs • AMI-tv; open described, closed captioned TV • • AMI-télé • DV Guide • Scholarship, Research Panel, DV Best Practices
  5. 5. AMIPlayer
  6. 6. 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
  7. 7. • 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
  8. 8. Player highlights • HTML5 ready player with semantic controls. • Universal runtime • Responsive layout • Captioning and transcripts • Full keyboard accessibility • Fullscreen capabilities • Bold interface
  9. 9. 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
  10. 10. HTML 5 and semantics Some examples include: • <header> • <nav> • <section> • <button> • <footer>
  11. 11. HTML 5 and semantics – example time!
  12. 12. 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>
  13. 13. 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>
  14. 14. 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
  15. 15. Universal Runtime
  16. 16. 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
  17. 17. Responsive
  18. 18. Responsive 320px wide
  19. 19. 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)
  20. 20. DEMO
  21. 21. Contact • • • Twitter: @a11ymedia • Facebook: Accessible Media Inc. • YouTube:
  22. 22. Visit for more information on their services. p. +1 206.436.7900 f. +1 206.213.0606 1000 Second Avenue, Suite 1000 Seattle, WA 98104