Ami video-player-csun
•Download as PPTX, PDF•
0 likes•337 views
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.
Recommended
More Related Content
Similar to Ami video-player-csun
Similar to Ami video-player-csun (20)
Recently uploaded
Recently uploaded (20)
Ami video-player-csun
- 1. The Accessible Media Player (AMIPlayer) Accessible Media Inc. (AMI) Chris O’Brien Robert Pearson 30th CSUN Conference San Diego
- 2. Accessible Media Inc. (AMI) Make accessible media for all Canadians • Overview
- 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
- 5. AMIPlayer
- 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>
- 11. HTML 5 and semantics – example time!
- 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. 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. 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
- 17. Responsive
- 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. DEMO
- 21. Contact • Chris.obrien@ami.ca • http://www.ami.ca • Twitter: @a11ymedia • Facebook: Accessible Media Inc. • YouTube: http://www.youtube.com/accessiblemedia/
- 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
Editor's Notes
- 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
- - We use SRT