Video control and manipulation; filter-based hit zone
To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
To note: All major browsers support playing video using the HTML <video> element. For most uses (eg: background animation in a website banner; advert with an additional Call-To-Action button) this - or a third-party video solution - will be sufficient. We should only resort to displaying video in a <canvas> element when we need to add additional functionality - in this demo we add keyboard-navigable controls and link areas to the video to make it more interesting/accessible.
Each browser implements the HTML <video> element in their own way, with differences in how the video data (eg captions, subtitles) and controls look, and their accessibility. The MDN website has a series of articles on how to create a cross-browser video player. Remember that if we add a video to a canvas for any reason beyond decoration, then we will need to implement much of the functionality described in these articles ourselves:
Further useful accessibility-related links:
Test purpose
- Import a video programmatically
- Display the video in a responsive canvas
- Add controls to play/pause and listen/mute the video
- Add a progress bar to the canvas display
- Filter the video output with a chroma effect in the Picture entity
- Add a link to the Picture entity - opens the "swan" page on Wikipedia
- Check that link works only when user clicks on visible (non-transparent) parts of the Picture entity
- Check that the user can navigate to each action (play/pause, listen/mute) and link (swan/goose) using the keyboard. When the action button or link is focussed, the graphical representation for that action/link should appear as if the user had hovered the mouse cursor over the entity
- Check that the user can invoke each link and action using the keyboard; when the user toggles the play/pause or listen/mute buttons the associated Label entity's underline should not disappear
- Examine the source code; check that the ordering of the actions and links is as expected
- Check that as the video plays one of the wikipedia-goose-article links gets removed from the DOM at the same time as that goose moves out of the video; when the video loops, the link should be added back into the DOM
Touch test: should work as expected. Known issue: hover effects - such as underlining links - may remain present after touch ends.
Annotated code