Full-screening an onboarding video traps the user with no (visible) way to get back to Courselets

[cjlee112]

I observed this problem in Firefox 64.0; don't know if it happens in other browsers. If I fullscreen a video during Onboarding, when the video ends I'm shown a choice of "More Videos from Christopher Lee" and a few Vimeo buttons (Like, Share, Replay) but no way to exit full-screen mode and get back to Courselets. Even if the user knows to press the Escape key to get out of this "More Videos" view, that still leaves them in full-screen mode -- they then have to know to click on the x in the upper-right corner.

Seems like Vimeo probably provides some way to ensure that a one-click exit-fullscreen control gets shown?

Could this bug also happen to students who watch a video within the Chat UI?

[cjlee112]

if there's no way to avoid this problem within Vimeo, we could of course move the onboarding videos to a different streaming service.

[cmltaWt0]

Added to the current Sprint as an investigate ticket.

[cjlee112]

@cmltaWt0 Have you found a workaround for this using Vimeo?

[cmltaWt0]

@cjlee112 Yes. We will try add the same control as original Vimeo player has. This is not default behavior for Vimeo Embedded videos.

The Exit button should add more transparency for how to exit this fullscreen mode.

[cjlee112]

@cmltaWt0 I actually want an absolutely minimalist UI behavior when the video finishes. I do not want any distracting controls such as Like, Share bla bla bla:

• the best option would be to have the full-screen video just close automatically when the video finishes playing, i.e. exit from fullscreen so the user just sees the onboarding page that launched the video. This is best because the user does not have to do anything to continue with the onboarding, and there is no possibility of getting pulled off-track from the onboarding.

• if there is no way to make fullscreen video exit automatically, the next best option would be for it to show only a single, large button that closes fullscreen mode, returning the user to seeing the onboarding page that launched the video. Again, there should be NO other possibilities that could pull the user off-track from the onboarding.

• if there is no way to completely get rid of buttons such as Like, Share, the key thing is that there must be no buttons that lead to a different video or page. For example, there should be NO "up-next" video or "other videos by Christopher Lee" or other such nonsense. The user should only have one next step from this fullscreen mode, namely to close the fullscreen mode and return to seeing the onboarding page that launched the video.

• if there is no way to completely get rid of "up-next" / "other videos by Christopher Lee" then I think we have to switch to a different streaming service (instead of Vimeo) as we cannot afford injecting anything that deliberately tries to pull our users away from the onboarding!

[cjlee112]

@cmltaWt0 By the way, all the concerns that I have raised here apply equally well to non-fullscreen mode: once the video finishes the player must NOT show any "up-next" / "other videos by Christopher Lee" etc. distractions that could pull users away from the onboarding.

[cjlee112]

@cmltaWt0 Apparently vimeo's player API supplies an event ("ended") that's triggered when the video ends, see the docs: https://github.com/vimeo/player.js#embed-options Here's an example of using it: https://elearning.adobe.com/2017/12/end-of-video-events-with-vimeo/

[cmltaWt0]

@cjlee112 We can configure After Play action easily. I have no access to Vimeo account so I thought you reject this way (to close fullscreen automatically).

[cjlee112]

@cmltaWt0 Staging is still broken exactly as last production release was, I'm attaching a screenshot. We need to talk about how you are planning on fixing this issue in this release.

[cjlee112]

[cmltaWt0]

@cjlee112 The fix is not applied on staging or dev. I want to handle the playback end event to trigger exitFullScreen event for browser.

[cmltaWt0]

@cjlee112 Likes, Share etc. can be configured in Vimeo dashboard in Embedded section.

[cjlee112]

@cmltaWt0 Thanks, I changed the embed settings for all the onboarding videos on Vimeo to hide Like, Share, etc.

[cmltaWt0]

@cjlee112 Fixed. Can be reviewed on dev or staging.

[cjlee112]

@cmltaWt0 Not sure what's going on but I just re-tested this on staging (forced my browser to reload the onboarding page from staging) and I still see exactly the same problem ("More videos from Christopher Lee", see attached ). Argh.

[cmltaWt0]

@cjlee112 I've added additional handler to exit full screen mode after Video end. Did it what you want? So we removed one additional click for Instructors to return back to the onbording page.

On case we want completely avoid any interactions for Instructors I can close Vimeo player completely on video end event.

Also final screen (More video from Chris) can be configured in Vimeo dashboard in embed presets section.

[cmltaWt0]

OK. I see. You want to not distract Instructors at all. I will close fancybox popup just after Video end.

[cmltaWt0]

@cjlee112 Done. Will be deployed on https://dev.courselets.org in a 20 mins.

[cjlee112]

@cmltaWt0 Thanks for telling me about After Video presets in Vimeo dashboard. I changed it to get rid of "More from Christopher Lee" on all our onboarding videos. I think we have now fixed this issue!

[cmltaWt0]

@cjlee112 :) I've just uploaded a fix.

New behavior - Video player closes immediately after playback ends.

Can you check the new behavior on https://dev.courselets.org ?

[cmltaWt0]

If it is ok for you - we can use this behavior and move it to the staging.

[cmltaWt0]

Also it is currently on https://staging.courselets.org too just for test

[cjlee112]

@cmltaWt0 The new behavior on staging (automatically closing the player when the video finishes) looks great. As far as I am concerned this issue is fixed.

[cjlee112]

@cmltaWt0 Unfortunately I just found another place (Create a Courselet page) on staging where it is not automatically closing the viewer when the video ends, as shown in the attached screen shots:

[cmltaWt0]

It was done only for Onboarding page.

If it is desired to has the same behavior everywhere in Instructor UI - will do it quickly.

On Jan 31, 2019, at 10:54 PM, cjlee112 notifications@github.com wrote:

@cmltaWt0 https://github.com/cmltaWt0 Unfortunately I just found another place (Create a Courselet page) on staging where it is not automatically closing the viewer when the video ends, as shown in the attached screen shots: https://user-images.githubusercontent.com/59820/52084566-37cbdb00-2557-11e9-8cce-f65cf376d735.png https://user-images.githubusercontent.com/59820/52084567-38647180-2557-11e9-961e-e8deb312b097.png — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cjlee112/socraticqs2/issues/770#issuecomment-459502843, or mute the thread https://github.com/notifications/unsubscribe-auth/AA1jWRreR3W1ioZhC2Xw2m8uN7P_JQ_mks5vI1ghgaJpZM4aGram.

[cjlee112]

thanks, please fix this page. This page is in fact part of the default Onboarding flow. I hit this simply by clicking the steps shown on the Onboarding page.

[cmltaWt0]

I understand. Just my impression was to enforce this auto-close only for main on-boarding. Going to apply for another pages.

On Jan 31, 2019, at 11:05 PM, cjlee112 notifications@github.com wrote:

thanks, please fix this page. This page is in fact part of the default Onboarding flow. I hit this simply by clicking the steps shown on the Onboarding page.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cjlee112/socraticqs2/issues/770#issuecomment-459506109, or mute the thread https://github.com/notifications/unsubscribe-auth/AA1jWdTojwcg7euVTcIWnYuzXqsRnYLNks5vI1qdgaJpZM4aGram.

[cjlee112]

Same issue on the Courselet Add Threads page, e.g. https://staging.courselets.org/ctms/course/69/courselet/84/units

[cmltaWt0]

@cjlee112 Fixed. Please check.

[cjlee112]

@cmltaWt0 fixed on both Create a Courselet and Add Threads pages. thanks!