People are used to being able to search for a keyword and go directly to that passage of text. When watching a video, it can be extremely frustrating to scroll back and forth trying to find a specific clip to review or share. But what if you could make every word of your video searchable and interactive? In this webinar, we will go through strategies for implementing video search on your website. We will walk you through how to install an interactive transcript as well as how to customize it with our SDK (software development kit). We will also show live demos and examples that highlight the features and benefits of video search. This presentation will cover: Benefits, impact on user engagement, and features of video search How to install an interactive transcript How to customize video search using the SDK Studies of interactive transcripts in higher education Live demos and downloadable examples How to apply video search tools across a large library of videos Video player compatibility Resources for getting started with interactive transcripts

1. Quick Start to Video Search
www.3playmedia.com
twitter: @3playmedia
live tweet: #a11y
 Type questions in the control panel during the presentation
 This presentation is being recorded and will be available for replay
 To view live captions, please follow the link in the chat window
Lanya Butler
Product Engineer
CJ Johnson
CTO
Lily Bond
Director of Marketing

3. Agenda
‣ The Basis for Video Search
‣ Benefits of Captions, Transcripts, & Video Search Tools
‣ P3 SDK Interactive Transcript Architecture
‣ Examples
– Basic: switching from old embed to SDK embed
– Responsive
– Changing color schemes
– Advanced example: interactive audio book

4. The Basis for Video Search
‣ Transcription

5. The Basis for Video Search
‣ Transcription
‣ Closed captioning

6. The Basis for Video Search
‣ Transcription
‣ Closed captioning
‣ Interactive transcripts
‣ Video library search

7. What Are Interactive Transcripts?
‣ Use captions to make videos
searchable and interactive
‣ Not a replacement for captions
‣ Easy to set up
‣ Lots of customization options
‣ Top 3 innovations in online
video

8. Benefits
‣ Accessibility for hard of hearing
48 Million
Americans with hearing loss

9. Benefits
‣ Accessibility for hard of hearing
‣ Better comprehension
‣ Flexibility to view in noise-sensitive
environments
80%Of people who use captions
don’t have hearing disability

10. Benefits
‣ Accessibility for hard of hearing
‣ Better comprehension
‣ Flexibility to view in noise-sensitive
environments
‣ SEO: more inbound traffic
7.3%
Increase in views
from captions

11. Benefits
‣ Accessibility for hard of hearing
‣ Better comprehension
‣ Flexibility to view in noise-sensitive
environments
‣ SEO: more inbound traffic
‣ Reusability
50%
Students who use
transcripts for study guides

12. Benefits
‣ Accessibility for hard of hearing
‣ Better comprehension
‣ Flexibility to view in noise-sensitive
environments
‣ SEO: more inbound traffic
‣ Reusability
‣ Translation to foreign languages

13. Survey About Interactive Transcripts
Significantly enhances (57%)
Enhances (40%)
Detracts (1.7%)
Greatly detracts (3.4%)
97% of MIT OpenCourseWare students said interactive
transcripts enhanced their learning experience

14. New plugin architecture
‣ Response to previous P3 version
‣ Flexible customization options
– Color schemes
– Layout
– Event listeners and handlers
– Asset hosting
‣ Focus on activating features with HTML class
names

15. Examples: Basic
‣ p3sdk-container
– YouTube player embed
– p3sdk-interactive-transcript
• p3sdk-interactive-transcript-content
‣ Basic styling
– Transcript paragraphs justified alignment
– Current word is red
http://interactive.3playmedia.com/p3sdk/basic.html
PICTURE

16. Examples: Changing Color Schemes
‣ Basic CSS modifications
‣ Components
– Currently spoken word
– Progress bar
– Download link
– Search box
– Collapse button
PICTURE
http://interactive.3playmedia.com/p3sdk/custom.html

17. Examples: Responsive
‣ Twitter Bootstrap responsive layout
‣ Remove components for mobile display
‣ Hide features that are not compatible with iOS
PICTURE
http://interactive.3playmedia.com/p3sdk/responsive/index.html

18. Advanced Example: Interactive Audiobook
‣ Advanced CSS
‣ Advanced Javascript binding to events
‣ External Controls
http://interactive.3playmedia.com/p3sdk/audiobook/index.html

19. 119
CJ Johnson
CTO
Lanya Butler
Product Engineer
Lily Bond
Director of Marketing
lily@3playmedia.com
617-764-5189 x119
Q&A
Register for upcoming webinars at:
http://www.3playmedia.com/webinars/
Upcoming Webinars
 Legal Year in Review – Digital Accessibility Cases
 The Road to Sustainable Corporate Accessibility
 The Future of Captioning in Higher Ed (Coming soon!)
 Examples seen today can be found at:
 http://interactive.3playmedia.com/p3sdk/basic.html