Video Player
- Variants
- Default
- Full
- Modal
Video is presented as a single component with two parts working together as one unit. The first part is the video poster (thumbnail) and the second is the video player app interface with running video. The poster is the proxy for the actual video playback that’s used as an event trigger to launch the player. Video playback occurs in the video player and includes all playback controls.
Video-Player-Default
Usage
Users need a clear visual indicator and consistent design approach for playing video content. JW Player is the video platform used at Schwab. Large videos (> 500px wide) should play inline on the page. Small videos (<500px or within a carousel) will play in a modal. On mobile, the video will play in full screen with the user’s native device player.
The player will include an image file, title copy, run time, closed caption, play button, and transcript (pop-up). Transcripts are triggered by a link below the video poster. A video description and an eyebrow are optional.
Design Specifications
Poster
Player
Player
Best Practices
Do
- Ensure you’re only using the JW Player and the latest dev release to ensure a good user experience.
- Keep video titles short and concise, 6-8 words maximum.
- Use subtitles if they help with understanding video content.
- Use control icons that are familiar (i.e. audio, play/pause, cc, rewind, full screen, button).
- Provide link to video transcripts and include closed caption.
Don’t
- Use non-JW Player formats.
- Add unnecessary styling or changes to the player design.
Accessibility
Videos should include the word ‘video’ in the title of the video. Example: “Video: Schwab Banking Options”. Video controls, including buttons, must be focusable and users need to be able to tab between video player and controls using the keyboard. Also, ensure users have a way to pause or consume the content at their own pace. Accessible roles can be added to video controls to define the control type.
Videos require both transcripts and closed caption to allow all users the ability to follow the video script. Follow Schwab’s Accessibility guidelines.
Analytics and tagging
The current Adobe integration with JW Player includes tagging at various points in video playback: start, 25%, 50%, 75%, 100%. Additional tagging options include: start, complete, conditional, double-click tagging. Any additional tagging needs to be integrated with existing tagging in Tealium.
SEO
The video component should conform to schema.org video object semantic markup for proper search engine indexing and all video markup and transcript content should be delivered at the time of page load.