Load the "One video player per page" demo in a browser window.

• Page should show video player container.
• Video should not play automatically.
• Video player container should show a symbol overlay. FLUID-4599@JIRA
• Control menu should not be visible.
• Transcript area should not be visible.
• Captions should not be displayed.

Using the mouse, hover over the video player.

• On hover, the scrubber bar and control buttons should appear.
• Play symbol overlay should not disappear. FLUID-4599@JIRA

Move the mouse away from the video player.

• Scrubber bar and control buttons should disappear. FLUID-4652@JIRA
• Play symbol overlay should remain. FLUID-4599@JIRA

Click somewhere in the centre of the video area. Leave the cursor over the video area.

• Play symbol overlay should disappear.
• Video should play.
• Play symbol on the Play/Pause button at the left end of the control buttons should change to a Pause symbol.

Click again somewhere near the centre of the video area

• Video should stop playing.
• Play symbol overlay should NOT re-appear. VP-273@JIRA
• Pause symbol on the Play/Pause button at the left end of the control buttons should change to a Play symbol.

Move the mouse cursor over the video; controls will appear. Hover over the Play button.

• Play button should get a darker background.
• Tooltip containing "Play" should appear near the Play button.

Click on the Play button. Keep mouse positioned over the button.

• Video should play.
• Play button should change to a Pause button.
• Tooltip text should change to contain "Pause".

Click the Pause button.

• Video should stop playing.
• Pause button should change to a Play button.
• Tooltip should change to contain "Play."

Click the Play button.

• Video should resume playing where it was paused.
• Play button should change to a Pause button.
• Tooltip text should change to contain "Pause".

Move the mouse cursor over the video; controls will appear.
Hover over the Volume button.

• Volume button should get a darker background.
• Vertical volume slider at should appear above Volume button.
• Slider thumb should be at roughly 50%.
• Slider under the thumb should be a different colour than the slider above the thumb.
• Tooltip containing "Volume" should appear near the Volume button. FLUID-4859@JIRA

Click the Volume button. Keep mouse positioned over the button.

• Volume button should change to a Muted button (speaker symbol with an X).
• Slider thumb should drop to bottom.
• Tooltip should remain unchanged. Should say "Volume". FLUID-4859@JIRA

Click the Volume button again. Keep mouse positioned over the button.

• Muted button should change to back a Volume button).
• Slider thumb should return to original position.
• Tooltip should not change. Should say "Volume". FLUID-4859@JIRA

Use the mouse to drag the volume slider thumb control up or down.

• The colours above and below the thumb should continue to fill the available space.

Slide the Volume slider up almost to the top of the slider.
Click the Volume button to mute.
Click the Volume button again to un-mute.

• While muted, the volume slider thumb should drop to the bottom.
• Once un-muted, the volume slider should return to where you left it, near the top of the slider.

Slide the Volume slider all the way to the bottom of the slider.

• Volume button should change to a Muted button (speaker symbol with an X).

Slide the Volume slider up away from the bottom of the slider.

• Muted button should change back to a Volume button.

Start the video playing (either by clicking in the video area or on the Play button).
While listening to the audio, slide the Volume slider up and down.

• The volume of the video should be raised and lowered according to the slider.

Move the mouse cursor over the video; controls will appear.
Hover over the Caption (CC) button.

• Caption button should get a darker background and "CC" should appear inverted (light text on dark background).
• Tooltip containing "Captions" should appear near the Captions button.

Click the Caption (CC) button

• The caption menu should appear above the button.
• The Caption menu should include a list of languages (English and French) and a "Show Caption" option at the bottom of the menu.
• The English menu item should be bolded.

Click the Caption button again.

• The caption menu should disappear.

Click the Caption button again.

• The caption menu should reappear.

Click the "Show Captions" menu item.

• The caption menu should disappear.
• The Captions button should switch to orange on a darker background.
• An overlay should appear briefly confirming that captions are turned on, then disappear. The overlay should mention the current language, English. FLUID-4601@JIRA

Play the video

• English captions should appear, synchronized to the audio.

Click the Captions button and select French.

• Caption should continue to display, but should switch to French captions.
• An overlay should appear briefly confirming the new language choice, French (and that captions are on) then disappear. FLUID-4601@JIRA

Click the Captions button and select "Hide Captions"

• The caption menu should disappear.
• The captions should disappear.
• The "CC" symbol should return to dark grey text on lighter grey background.
• An overlay should appear briefly confirming that captions are turned off, then disappear. The overlay should mention the current language, French. FLUID-4601@JIRA

Click the Captions button and select "English"

• The caption menu should disappear.
• English captions should display with the video.
• An overlay should appear briefly confirming that captions are turned on, then disappear. The overlay should mention the current language, English. FLUID-4601@JIRA

Move the mouse cursor over the video; controls will appear.
Hover over the Transcripts button.

• Transcripts button should get a darker background.
• Tooltip containing "Transcripts" should appear near the Transcripts button.

Click on the Transcript button

• The transcript menu should appear above the button.
• The Transcript menu should include a list of languages (English and French) and a "Show Transcript" option at the bottom of the menu.
• The English menu item should be bolded.

Click the Transcript button again.

• The transcript menu should disappear.

Click the Transcript button again.

• The transcript menu should reappear.

Click the "Show Transcripts" menu item.

• The transcript menu should disappear.
• The transcript area should appear to the right of the video area, containing English transcripts.
• The icon in the Transcripts button should switch to orange.

Click the Transcript button and select French.

• Content of transcript area should switch to French transcripts.

Click the Transcript button and select "Hide Transcript"

• The transcript menu should disappear.
• The transcript area should disappear.
• The icon in the Transcripts button should switch to back to white.

Click the Transcript button and select "English"

• The transcript menu should disappear.
• The transcript are should appear on the right, containing English transcripts.

Move the mouse cursor over the video; controls will appear.
Use the Captions button to show captions.
Use the Transcripts button to show transcripts.
Click anywhere in grey area of scrubber bar.

• From the beginning of the scrubber bar to where the click happens, the background color turns yellow.
• The start time on the time box gets updated to a reasonable new time reflecting the click location.
• The video jumps to another clip reflecting the click location.
• The caption shows up with the text that's associated with the new video clip.
• The transcript text scrolls to the transcript text that's associated with the new video clip.

Click elsewhere in the scrubber bar; try different locations.

• The results described above should always happen, adjusted to be relevant to the correct spot in the timeline.

Reload page

Move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Activate and show English Transcripts

• The transcript menu should disappear.
• The transcript area should appear to the right of the video area, containing English transcripts.
• The icon in the Transcripts button should switch to orange.

Hover over "David Kelley...human centered" in the transcript.

• The text "David Kelley...human centered" should appear blue.

Select "David Kelley...human centered"

• "David Kelley...human centered" should now be white text on blue background.
• Yellow progress bar should appear on the left of the timeline.
• Timecode thumb should say "0:18/5:43".
• Image in video player should show text "David Kelley says.... Most experts agree." and an image of Mr. Kelley on a YouTube video.
• Video should not be playing.

Press the play button on the video player

• Video should start playing from 0:18

With video still playing, select transcript text below the text currently being played.

• The video and audio should jump to the position with the corresponding selected text.
• Time code should change respectively.
• The video progress bar should change respectively.

Reload the page

Move the mouse cursor over the video; controls will appear.
Hover over the Full-screen button.

• Full-screen button should get a darker background.
• Tooltip containing "Full screen" should appear near the Full-screen button.

Click the Full-screen button

• The video should switch into full-screen mode.
• The video controls should be visible along the bottom of the screen.
• The Full-screen button icon should switch to a 'small-screen' icon.
• A message that states "Press ESC to return to exit full screen" (or similiar) should appear along the top.

Do not move the mouse or press any keys for a short time.

• The controls should disappear.

Move the mouse.

• The controls should reappear.

Test the mouse functionality as described above:

• Play / pause
• Volume
• Captions

• All controls should function as they would in non-full-screen mode. Example:
  • Tooltips appear properly
  • Button colours change according to state
  • Controls work as expected
  • Positioning and rendering appears correct
  • etc.

Play the video

• Video should play.
• Play button should change to a Pause button.
• Tooltip text should change to contain "Pause".

While video is playing, click the Full-screen button again.

• The video should switch back to its original size.
• Video should continue playing during this transition

Stop video and click the Full-screen button again.

• The video should stop playing.
• switch into full-screen mode again.
• remain in a stopped state
• controls visible, with "ESC to exit full screen" message at top

Press the Escape key.

• The video should switch back to its original size.

Load the "One video player per page" demo in a browser window.

• Page should show video player container.
• Video should not play automatically.
• Video player container should show a symbol overlay. FLUID-4599@JIRA
• Control menu should not be visible.
• Transcript area should not be visible.
• Captions should not be displayed.

Using only the Tab key on the keyboard, move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Press the Space key.

• Play symbol overlay should disappear. FLUID-4599@JIRA
• Video should start playing.
• Play button should turn into a Pause button.

Press the Space key again.

• Play symbol overlay should not reappear. FLUID-4599@JIRA
• Video should stop playing.
• Pause button should turn into a Play button.

Press Space key

• Play symbol overlay should not reappear. FLUID-4599@JIRA
• Video should stop playing.
• White on Blue background pause button should be replaced by a play button.

Repeat the above-mentioned Play/Pause tests using the Enter key instead of Space.

• Results should be the same.

Reload the page

Using only the Tab key on the keyboard, move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Press Tab once more.

• The controls should appear. FLUID-4785@JIRA
• The Play button should appear white on a blue background.
• Play symbol overlay should not disappear. FLUID-4599@JIRA

Press Space key

• Play symbol overlay should disappear. FLUID-4599@JIRA
• Video should start playing.
• Play button should turn into a Pause button.
• Pause button should appear as white on blue background.
• Tooltip should change to say "Pause" FLUID-4743@JIRA

Press Space key

• Play symbol overlay should not reappear. FLUID-4599@JIRA
• Video should stop playing.
• White on Blue background pause button should be replaced by a play button.
• Tooltip should change to say "Play" FLUID-4743@JIRA

Repeat the above-mentioned Play/Pause tests using the Enter key instead of Space.

• Results should be the same.

Reload the page.

Using only the Tab key on the keyboard, move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Press Tab two more times.

• The controls should appear. FLUID-4785@JIRA
• The Volume button should appear white on a blue background.
• Volume slider should appear vertically above the volume button.
• Slider thumb should be at roughly 50%.
• Slider under the thumb should be a different colour (i.e. yellow) than the slider above the thumb (i.e. white).
• Tooltip should say "Volume". FLUID-4859@JIRA

Press and hold Down arrow

*The volume slider should move down.
*Yellow colour under the slider should decrease while white colour above slider should increase.

Press and hold Up arrow

*The volume slider should move up.
*Yellow colour under the slider should increase while white colour above slider should decrease.

Press Enter

• Volume button should change to a Muted button (speaker symbol with an X).
• Slider thumb should drop to bottom.
• Tooltip should say "Volume". FLUID-4859@JIRA

Press Enter again (Focus should still be on Volume button).

• Muted button should change to back a Volume button.
• Slider thumb should return to original position.
• Tooltip should not change and should still say "Volume". FLUID-4859@JIRA

With Volume focused, press Up arrow until the slider is almost to the top of the slider.
Press Enter key button to mute.
Press Enter key button again to un-mute.

• While muted, the volume slider thumb should drop to the bottom.
• Once un-muted, the volume slider should return to where you left it, near the top of the slider.

Press Down arrow so slider is all the way to the bottom.

• Volume button should change to a Muted button (speaker symbol with an X).

Slide the Volume slider up away from the bottom of the slider.

• Muted button should change back to a Volume button.

*Start the video playing (either by clicking in the video area or on the Play button).
*Put focus back onto the Volume button by pressing Tab until focused.

• While listening to the audio, press Up and Down arrow keys to slide the Volume slider up and down.

• The volume of the video should be raised and lowered according to the slider.

Reload the page.

Using only the Tab key on the keyboard, move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Press Tab four more times.

• The controls should appear. FLUID-4785@JIRAFLUID-4863@JIRA
• Caption button should get a darker background and "CC" should appear inverted (light text on dark background).
• Tooltip containing "Captions" should appear near the Captions button.
• Play symbol overlay should not disappear. FLUID-4599@JIRA

Activate the Caption (CC) button by pressing Space or Enter

• The caption menu should appear above the button.
• The Caption menu should include a list of languages (English and French) and a "Show Caption" option at the bottom of the menu.
• The English menu item should be bolded.

Deactivate the Caption (CC) button by pressing Space or Enter again.

• The caption menu should disappear.

Activate the Caption (CC) button by pressing Space or Enter again.

• The caption menu should reappear.

Activate the "Show Captions" menu item.

• The caption menu should disappear.
• The Captions button should switch to orange on a darker background.
• An overlay should appear briefly confirming that captions are turned on, then disappear. The overlay should mention the current language, English. FLUID-4601@JIRA

Play the video by shift-tabbing back to the Play button, or by tabbing until the video player is focused and pressing Enter/Space.

• English captions should appear, synchronized to the audio.

Tab back to Captions Activate the Captions button and select French.

• Caption should continue to display, but should switch to French captions.
• An overlay should appear briefly confirming the new language choice, French (and that captions are on) then disappear. FLUID-4601@JIRA

Click the Captions button and select "Hide Captions"

• The caption menu should disappear.
• The captions should disappear.
• The "CC" symbol should return to dark grey text on lighter grey background.
• An overlay should appear briefly confirming that captions are turned off, then disappear. The overlay should mention the current language, French. FLUID-4601@JIRA

Activate the Captions button and select "English"

• The caption menu should disappear.
• English captions should display with the video.
• An overlay should appear briefly confirming that captions are turned on, then disappear. The overlay should mention the current language, English. FLUID-4601@JIRA

Reload page

Using only the Tab key on the keyboard, move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Press Tab five more times.

• The controls should appear. FLUID-4785@JIRAFLUID-4863@JIRA
• Transcript button should get a darker background and transcript icon should appear inverted (light text on dark background).
• Tooltip containing "Transcripts" should appear near the Transcript button.
• Play symbol overlay should not disappear. FLUID-4599@JIRA

Activate the Transcript button by pressing Space or Enter

• The transcript menu should appear above the button.
• The Transcript menu should include a list of languages (English and French) and a "Show Transcript" option at the bottom of the menu.
• The English menu item should be bolded.

Activate the Transcript button again.

• The transcript menu should disappear.

Activate the Transcript button again.

• The transcript menu should reappear.

Activate the "Show Transcripts" menu item.

• The transcript menu should disappear.
• The transcript area should appear to the right of the video area, containing English transcripts.
• The icon in the Transcripts button should switch to orange.

Activate the Transcript button and select French.

• Content of transcript area should switch to French transcripts.

Activate the Transcript button and select "Hide Transcript"

• The transcript menu should disappear.
• The transcript area should disappear.
• The icon in the Transcripts button should switch to back to white.

Activate the Transcript button and select "English"

• The transcript menu should disappear.
• The transcript are should appear on the right, containing English transcripts.

Reload page

Using only the Tab key on the keyboard, move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Using only the keyboard, activate and show English Captions

• The caption menu should disappear.
• The Captions button should switch to orange on a darker background.
• An overlay should appear briefly confirming that captions are turned on, then disappear. The overlay should mention the current language, English. FLUID-4601@JIRA

Using only the keyboard, activate and show English Transcripts

• The transcript menu should disappear.
• The transcript area should appear to the right of the video area, containing English transcripts.
• The icon in the Transcripts button should switch to orange.

Using only the Tab key, tab until the scrubber bar is in focus.

• Timecode scrubber thumb appears blue with white text and white border.
• Time should say: "0:00/5:43"

Press and hold the right arrow key for 3 seconds.

• The timecode scrubber should move steadily to the right.
• The start time on the time box gets updated to a reasonable new time reflecting the click location.
• The video image changes reflecting the changing time / location.
• The caption shows up with the text that's associated with the new video clip.
• The transcript text scrolls to the transcript text that's associated with the new video clip.

Press and hold the Left or right arrow key to go back and forward on the timeline.

• The results described above should always happen, adjusted to be relevant to the correct spot in the timeline.

Reload page

Using only the Tab key on the keyboard, move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Using only the keyboard, activate and show English Transcripts

• The transcript menu should disappear.
• The transcript area should appear to the right of the video area, containing English transcripts.
• The icon in the Transcripts button should switch to orange.

Press Tab 4 more times

• Blue outline should appear around "Eeny, meeny,miny,moe"

Press Down Arrow 7 times

• Blue outline should appear around "David Kelley...human centered".

Press Enter

• "David Kelley...human centered" should now be white text on blue background.
• Yellow progress bar should appear on the left of the timeline.
• Timecode thumb should say "0:18/5:43".
• Image in video player should show text "David Kelley says.... Most experts agree." and an image of Mr. Kelley on a YouTube video.
• Video should not be playing.

Using only the tab button, tab until the video player has focus.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not appear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Press Enter on the Video Player

• Video should start playing from 0:18

With video still playing, press tab 4 times

• Blue focus outline should appear around the string of text currently being played.

Press down arrow 4 times

• A blue outline should appear around the 4th selectable item below the string of text being played.

Press Enter key

• The video and audio should jump to the position with the corresponding selected text.
• Time code should change respectively.
• The video progress bar should change respectively.

Press the down arrow key until the selected text is well "below the fold". Wait a moment for the video to progress.

• Focus should remain on the selected text and not shift to the text currently being spoken.

Reload the page

Using only the Tab key on the keyboard, move focus to the video player.

• When tab focus arrives at the video player, the video area should show a blue border around it.
• Play symbol overlay should not disappear. FLUID-4599@JIRA
• The controls should not appear. FLUID-4785@JIRA

Press Tab key 7 times

• Focus should appear on the full screen button.
• Button should appear white on blue.
• Tool tip "Full screen" should appear.

Press Enter.

• The video should switch into full-screen mode.
• The video controls should be visible along the bottom of the screen.
• The Full-screen button icon should switch to a 'small-screen' icon.
• A message that states "Press ESC to return to exit full screen" (or similiar) should appear along the top.

Do not move the mouse or press any keys for a short time.

• The controls should disappear.

Press Space bar or Enter

• The video should start playing.
• Time bar should advance.

Press and hold Up arrow

• The volume should increase.

Press and hold Down arrow

• The volume should decrease.

Press Space bar or Enter

• The video should stop playing.

Press Tab key.

• The controls should reappear.
• Focus should be on the Play button.
• Play button should appear

Test the keyboard functionality as described above:

• Play / pause
• Volume
• Captions
• Transcripts

• All controls should function as they would in non-full-screen mode. Example:
  • Tooltips appear properly
  • Button colours change according to state
  • Controls work as expected
  • Positioning and rendering appears correct
  • etc.

Press tab until focus is back on the Play button. Play the video.

• Video should play.
• Play button should change to a Pause button.
• Tooltip text should change to contain "Pause".

• While video is playing, press tab until the exit full-screen button is in focus.
  *Activate the exit full-screen button.

• The video should switch back to its original size.
• Video should continue playing during this transition

Press Enter or Space to stop video and activate the Full-screen button again using keyboard only.

• The video should stop playing.
• switch into full-screen mode again.
• remain in a stopped state
• controls visible, with "ESC to exit full screen" message at top

Press the Escape key.

• The video should switch back to its original size.