H5P Video - Wordpress - Video Completion

Hi,

I'm usisng the video-interaction with wordpress. I use Vimeo for my videos.

Everything is working fine.

However, I would like to capture the video completion even if the video hasn't ended. For example, if there is only like 10seconds left of the video, I would like to be able to mark it as complete.

I know that the event isn't triggered until the end of the video. So I thought that maybe adding some other activity - like the summary - 10s before the video ends and capturing that activity as attempted would be close enough and I could mark my video as completed.

But unless the user actually attempts the activity I cannot capture the event.

Is there some way I can get the status of the video to determine if it's almost complete?

 

Thank you!

thomasmars's picture

Hi,
Let me check if I got this right, you want to be able to make Interactive Video trigger the 'completed' or 'finished' event before the user has watched the video to the last second. This sounds very reasonable in many cases, but is not supported yet.

If you are a developer you may listen to xAPI events from Interactive Video and add some logic to it to be able to determine when the video was finished according to your criterias, or even better create a pull request. However, this is not a trivial task.

I suggest checking if an issue already exist for this in the "feature request" forum, and creating one if you can't find something covering this use case already.

"you may listen to xAPI events from Interactive Video and add some logic to it to be able to determine when the video was finished according to your criterias" - yes this is what I'm doing  :)  and what I'm thinking is that  - as a  "hack" -  I could add an activity near the end and when the event is triggered for that activity I can log the video as complete. I have a user-progress-table where I log individual user progress. It logs when they watch the video as well as when other non-h5p activities are complete.

I don't think that I need to trigger the 'completed' or 'finished' event before the user has watched the video. But now that I think about it,  it might be good in the future to have a setting where you can say "Mark Video Complete x-seconds before it finishes" - I think many users don't get to the end, but close the video a few seconds before.  But I have no idea as to how doable this is or how difficult it could be to implement.

Right now I'm trying to figure out a way to get that the user at least got to a certain point. And I was wondering if somebody had this problem before and had already figured out a way.  Is there a way to get the number of minutes/seconds that have played?

Thanks!

 

 

thomasmars's picture

Hi, one solution you could use is H5P.instances[0].video.getCurrentTime(), which will return the current time of the Interactive Video. You can poll for this in regular intervals to have a good idea when the user stopped watching.

I will try that! But sounds to me that this is just what I need. I use the bootstrap  modal window to show the video, and I already have code when it closes, I'll just get the time at that point.

THANK YOU!!

thomasmars's picture

Glad to hear it worked out for you :)

The code is pretty simple, but I copied the code in case somebody wants to use it.

When the modal closes, I get the currentTime and video duration. I calc. the %played, after that if the %played is close to 95%(tbd) I'll log it as complete.

            $('#h5pModal').on('hidden.bs.modal', function (e) {
                  var duration = document.querySelector('.h5p-iframe').contentWindow.H5P.instances[0].video.getDuration();
                  var timeplayed = document.querySelector('.h5p-iframe').contentWindow.H5P.instances[0].video.getCurrentTime();
                  document.querySelector('.h5p-iframe').contentWindow.H5P.instances[0].pause();
                  console.log( timeplayed);
                  console.log(' % played: '  + timeplayed/duration*100 + ' %' );

                  //TODO - mark as complete if % > 95%
            });