Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Section
Column
width65%

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
width35%
solid
Panel
borderStyle
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleOn This Page
Table of Contents
toc
maxLevel
5
minLevel2
maxLevel5
indent10px
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSpecification
borderStylesolid

...

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 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.

(warning) 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.

...

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.

  • Blue outline should appear around 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.

...

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
  • Full screen / exit full screen
  • 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.

...

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.

(warning) Todo:

  • Change transcript language
  • Open and close using "X" button.
Keyboard Controls: Scrubber Bar

...

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
  • Full screen / exit full screenTranscripts
  • 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,
click the Full
  • press tab until the exit full-screen button
again
  • 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

Stop Press Enter or Space to stop video and click 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.
Warning

More to come...