...
| Section |
|---|
| Column |
|---|
| Environments | Include Page |
|---|
| fluid: Video Player Browser Support Chartfluid: |
|---|
| Video Player Browser Support Chart |
|---|
|
General QA Guidelines General Use - Does the tool behave the way that you would expect?
- Are you surprised by anything?
- Does something take longer than you would expect?
- When the tool does something unexpected or takes too long to do something, does the tool provide appropriate feedback?
|
| Column |
|---|
| | Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| borderStyle | solid |
|---|
| title | On This Page | borderStyle
|---|
| | solid | toc| 5 | | minLevel | 2 |
|---|
| maxLevel | 5 |
|---|
| indent | 10px |
|---|
|
|
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| borderStyle | solid |
|---|
| title | Specification |
|---|
| borderStyle | solid |
|---|
| |
|
|
QA Tests
Protocol
Perform the following tests using each browser/system environment. Report issues at: http://issues.fluidproject.org/secure/Dashboard.jspa
...
Protocol
Perform these tasks on the following site, perform the tests in order.
Video player sample:
One video player per page
Multiple video players per page
...
Procedure | Expected Results |
|---|
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
- 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
|
Move the mouse away from the video player. | - Scrubber bar and control buttons should disappear. FLUID-4652
- Play symbol overlay should remain. FLUID-4599
|
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
- Pause symbol on the Play/Pause button at the left end of the control buttons should change to a Play symbol.
|
...
Procedure | Expected Results |
|---|
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".
|
Controls: Volume Controls
Procedure | Expected Results |
|---|
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 "MuteVolume" should appear near the Volume button. FLUID-4859
|
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 change to contain "Un-mute".remain unchanged. Should say "Volume". FLUID-4859
|
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 to contain "Mute. Should say "Volume". FLUID-4859
|
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.
|
...
Procedure | Expected Results |
|---|
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.
|
Reload the page
Todo:
- Change transcript language
- Open and close using "X" button.
Controls: Scrubber Bar
Procedure | Expected Results |
|---|
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 the page
Transcript Navigation
Procedure | Expected Results |
|---|
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
- The controls should not appear. FLUID-4785
|
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.
|
Controls: Full-Screen Controls
...
Procedure | Expected Results |
|---|
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.
- (Coming soon: expanded description of expected behaviour)
Click the - 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.
Click - 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.
|
Reload the page
Keyboard Functionality
...
Keyboard Play/Pause
Procedure | Expected Results |
|---|
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
- 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
- The controls should not appear. FLUID-4785
|
Press the Space key. | - Play symbol overlay should disappear. FLUID-4599
- 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
- Video should stop playing.
- Pause button should turn into a Play button.
|
Press Space key | - Play symbol overlay should not reappear. FLUID-4599
- 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.
Procedure | Expected Results |
|---|
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
- The controls should not appear. FLUID-4785
|
Press Tab once more. | - The controls should appear. FLUID-4785
- The Play button should appear white on a blue background.
- Play symbol overlay should not disappear. FLUID-4599
|
Press Space key | - Play symbol overlay should disappear. FLUID-4599
- Video should start playing.
- Play button should turn into a Pause button.
- Pause button should appear as white on blue background.
|
| Warning |
|---|
More to come... For now, use the mouse tests as a guide: All functionality should be available via keyboard-only as well. |
|
Press Space key | - Play symbol overlay should not reappear. FLUID-4599
- 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
|
Repeat the above-mentioned Play/Pause tests using the Enter key instead of Space. | - Results should be the same.
|
Reload the page.
Keyboard Controls: Volume Controls
Procedure | Expected Results |
|---|
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
- The controls should not appear. FLUID-4785
|
Press Tab two more times. | - The controls should appear. FLUID-4785
- 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
|
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
|
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
|
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.
|
Keyboard Controls: Caption Controls
Procedure | Expected Results |
|---|
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
- The controls should not appear. FLUID-4785
|
Press Tab four more times. | - The controls should appear. FLUID-4785FLUID-4863
- 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
|
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
|
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
|
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
|
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
|
Keyboard Controls: Transcript Controls
Procedure | Expected Results |
|---|
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
- The controls should not appear. FLUID-4785
|
Press Tab five more times. | - The controls should appear. FLUID-4785FLUID-4863
- 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
|
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.
|
Todo:
- Change transcript language
- Open and close using "X" button.
Keyboard Controls: Scrubber Bar
Procedure | Expected Results |
|---|
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
- The controls should not appear. FLUID-4785
|
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
|
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.
|
Keyboard Transcript Navigation
Procedure | Expected Results |
|---|
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
- The controls should not appear. FLUID-4785
|
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
- The controls should not appear. FLUID-4785
|
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.
|
Keyboard Controls: Full-Screen Controls
Procedure | Expected Results |
|---|
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
- The controls should not appear. FLUID-4785
|
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.
|