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.
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. 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
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. • 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. Player highlights
• HTML5 ready player with semantic controls.
• Universal runtime
• Responsive layout
• Captioning and transcripts
• Full keyboard accessibility
• Fullscreen capabilities
• Bold interface
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. HTML 5 and semantics
Some examples include:
• <header>
• <nav>
• <section>
• <button>
• <footer>
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
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
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)
22. Visit thePlatform.com for more
information on their services.
p. +1 206.436.7900
f. +1 206.213.0606
sales@theplatform.com
1000 Second Avenue, Suite 1000
Seattle, WA 98104
Notes de l'éditeur
Collaborative initiative between AMI and Simply Accessible to optimize the viewing experience of our audience consuming our content online.
Released in October 2014
Structurally Accessible – HTML5
Accessible content examples include embedded DV, captioning and transcripts directly from the player.
Don’t want to get too far into the weeds
A robust service offering a multitude of options for your media needs
Offers a Player Development Kit (PDK) which we used to create our player
Simply Accessible leverage PDK to transform existing OOTB player and enhance the user experience for the
HTML5 semantic controls: vital to ensuring viability across platforms and devices
Universal Player
common JS api for interacting with our PDK; automatically decides whether to render video in Flash or HTML5 based on the features of the device/browser and available formats
Simplifies development – only one API to interact with, no longer has to worry about feature parity between Flash or HTML5
Completely built for fastest speed: sub 2 second rendering
Responsive layout: seamless access on whatever device you throw at it – leverages SVG (scalable vector graphics) for all buttons
Bold Controls: Enhanced for low vision users. Maintain their size even after resizing
Captioning: Transcripts can be accessed directly from the player
Embedded DV
These tags have defined properties and actions that browsers and AT leverage
Previously developers used ambiguous tags to define blocks of functionality
This depiction of a play button is a familiar to most of us
When we see it we inherently understand that by activating it we are going to consume some sort of multimedia content
A simple design pattern is not always represented as elegantly in the code (see above)
An example of code from a play button from a default player from thePlatform
No discernable meaning to be had from the code perspective
Not only cleaner code example, the fact we are using an actual button tag ensures that this control will work in traditional devices
example taken from the AMIPlayer
- Saves development time
- Controls maintain consistency and accessibility
- Cannot be appreciated in current iteration of site. Developed for future state
SVG is an XML based format where images are defined through the use of XML documents.
Raster images, eg gifs, jpegs and pngs are pixel based
REM: root em
Ems are relative to the font size of the parent where rems are relative to the root. Resolves issues with compound font sizing