Play/Pause Interactive H5P Video when watcher switches browser tab or minimize browser window

Submitted by cornertip on Sat, 12/28/2019 - 14:47
Forums: 
Content creation

Hi, 

I searched the forum but I couldn't find anything on this. I upload videos on Vimeo Pro and then I use H5P Interactive Video to generate a shortcode which I insert into the Wordpress page in order to display the H5P Interactive Video to my students.

This is my process: 
a. I upload the video on Vimeo Pro and I have an URL like -->https://vimeo.com/YourVideoID
b. I insert this vimeo video in H5P Interactive Video (your guide: https://h5p.org/documentation/for-authors/vimeo-pro). Now I have an .mp4 extension which is something like: https://player.vimeo.com/external/YourVideoID.sd.mp4?s=a88abddb83ad31962643b6c4dd8270323d80874e&profile_id=165


Now...

I would like the video to pause when a student switches the browser tab or minimize the browser window, because I need to force my student to watch the entire video without changing windows (this is a company request). 

---

I'm not a developer and I have not understood if I should use the Vimeo API or some HTML 5 Video script in this case.

Could you help me please to better understand which code/script should I use and how to insert this?

Thank you in advance!

cornertip

Sun, 12/29/2019 - 05:13

Matt Oestreich answer me on stackoverflow with Page Visibility API method and it works if you target the vimeo video link, but I need to target the H5P Interactive Video Iframe. Any idea? 

This is a page of my website, where I uploaded the H5P Interactive Video Iframe on top (which I need to pause) and the Vimeo Pro video without H5P iframe (which pause correctly thanks to Matt's method) on bottom.

PS: You can find the Matt Oestreich code below:
https://stackoverflow.com/questions/59516224/play-pause-vimeo-video-when-watcher-switches-browser-tab-or-minimize-browser-w/59516724#5951672

 

 

otacke's picture

otacke

Mon, 12/30/2019 - 19:10

Hi cornertip!

I answered your question on StackOverflow and posted the required code. However, please note that StackOverflow is not a "I can't code, please do all the work for me!"-site.

Best,
Oliver

cornertip

Mon, 12/30/2019 - 20:15

Hi Oliver! 

Your code is exactly what I'm searching for. It's amazing and I want to thank you and I want to apologize both here and on StackOverflow since I misunderstood the use of your and their community. 

I'm a beginner with a designer background who wants to change/extend the knowledge towards coding. I will change my approach in the future, thanks for your recommendations.

otacke's picture

otacke

Mon, 12/30/2019 - 20:46

Hi cornertip!

You're welcome :-) Hope I wasn't too harsh.

Best,

Oliver