embed iframe in interactive video

Submitted by Guitarman4 on Tue, 06/09/2020 - 20:37
Forums: 
General discussion

I see references in the past that the iframe embedder used to be avialable within the interactive video but was discontinued due to the difference in interaction ability between 3rd party and H5P. I really need this function for my personal use will need to customise the libaries. I was wondering if one of the developers still has the original source code still on their local computer that they could share rather than starting from scratch?

otacke's picture

otacke

Mon, 06/15/2020 - 02:07

Hi Guitarman4!

All the source code including all previous versions is on github  (https://github.com/h5p/h5p-interactive-video), but you'll have to build it yourself. However, I don't think the IFrameEmbedder was ever included in Interactive Video.

Best,

Oliver 

Guitarman4

Mon, 06/15/2020 - 16:36

Hi Oliver

Sorry, I must have misread it was once part of IV. Psrhaps it might help if I explain what I'm trying to achieve. I want to use some third party html interactive content in github which if the user completes correctly goes back to a certain timecode in the interactive video. If they get it wrong goes back to the same timecode they were previously at. I suppose another option could be linking to an external URL and then returning to the IV using the startAt timecode. Would this work? If so, any suggestions on how you could alter the Startat timecode when returning from the external URL? Thanks

BV52's picture

BV52

Mon, 06/15/2020 - 19:06

Hi Guitarman4,

Why not use the built-in 'Adaptivity' feature of Interactive Videos. 

-BV

 

Guitarman4

Mon, 06/15/2020 - 23:25

I can't see how that would work as I thought the adaptivity startat feature can only be set to one value?The user will have already started the IV. So the startAt would have to be altered when they come back from another URL? I think it would need to be more along the lines of using the 3rd party URL to transfer variable data that would dynamically alter the StartAt variable? 


If they come back it 

otacke's picture

otacke

Tue, 06/16/2020 - 01:43

Hi Guitarman4!

I think it'd be simple to add some URL fragment checking for a start time parameter, but still, someone would have to find the time to implement it.

It's also not complicated to add new content types to IV (or other H5P compound content types). However, in this case that'd require customizing, because the H5P core team has ruled IFrameEmbedder out from being included. And if you go for customization, you will run into the very issues that are the reason for IFrameEmbedder not being included.

Best,

Oliver 

Guitarman4

Tue, 06/16/2020 - 13:40

Hi oliver,

Thanks for response. Can I get your opinion on another ( perhaps better ) option to accomplish the same task. I have the 3rd party content interaction stored on on the same WP site as the H5P content. ( it is also opensoure on github ). It has a variable called 'score'.  If I was to convert that into a global variable, then I guess it would be a simple case of of adding a line of code to the h5p-interactive-video.js. Something like ....If 'score' = 10 then startAt = 0:25. etc  Sorry!  I don't know javascript so not sure the correct terminology. What would be the correct line of code for this? also is h5p-interactive-video.js the correct place for this code? I noticed there seems to be two variables 'startAt' and 'startVideoAt'. Which one would you use and which line in the js file would I insert this code? 

Thanks so much

 

otacke's picture

otacke

Tue, 06/16/2020 - 22:47

Hi Guitarman4!

You wouldn't want to hardcode timestamps into H5P ...

The simplest solution would be to let IV check window.location.href property (that yields what's in the URL address bar) at startup for something like t=100 as a URL fragment (to be consistend with popular YouTube notation) and then to set startAt to this value if it's there. That should be enough. Then you could use https://something.foo/myh5pfile?t=100 to let the video begin at 1:40.

Best,
Oliver

Guitarman4

Sat, 06/20/2020 - 22:52

Hi Oliver. That worked a treat ! Thanks. In fact I also got it working with storing a variable in localstorage of the 3rd party content and retrieving in IV.js file. But I think the window.location.href property is much better and more flexible way of doing it. Another questions please?

1. Is there a js command to remove an image interaction from the IV? So that if the user is moved back and forth in timecode I can remove certain image interactions? ( so they don't see unnessesary ones twice ! )

otacke's picture

otacke

Mon, 06/22/2020 - 10:46

Hi Guitarman4!

Nice! I think using the window.location.href property for setting a start time would be a great addition to H5P.InteractiveVideo. Don't forget to creare e pull request :-)

I don't think that's possible out of the box, but it should be quite straightforward to add a feature for something like:

"As an author, I want to be able to define an upper bound to how often an interaction can be viewed."

It's not complicated per, but there are some things to keep in mind and steps involved that should be taken:

1) Amend the popup window of interactions (https://github.com/h5p/h5p-interactive-video/blob/master/semantics.json#L158), so it has a field of type "number" (optional: true, min: 1, not set by default) that authors can use to optionally limit the number of how often the interaction would pop up.

2) Whenever an interaction pops up, check whether the upper limit has reached already and ignore the call in that case - and increment the counter for that interaction by one.

3) Remember to give the user some feedback if he/she cannot view some interaction - he/she may not know that the number of popups is limited. Could be some visual change on the slider dots + showing the numbers left (as in Dictation with tries), a toast message, etc. Might be good to check with the H5P core team on that one.

4) Remember that interactions can be opened in different ways: by reaching some time code, by clicking on the slider dots, by clicking on the name of the interaction on the endscreen. This needs to be taken care of, too, ideally just in one place in the code and not in three different occasions - then it would probably work with each of them right away.

5) Remember to update all language files - each one needs to reflect the changes in semantics.json.

Just a note: Whenever you change semantics, you should check whether you need to amend the upgrade.js script and bump the minor version number - not in this case, because the new field is optional.

I think this would also be a nice addition to IV. Don't forget a pull request :-)

Best,
Oliver

Guitarman4

Tue, 06/23/2020 - 12:03

Thanks for detailed response. This would be a good pull request. However, it won't really accomplish excatly what I need In my project. Rather than an interaction poping up a set number of times, I want it to keep poping up until the user carries out a particular interaction. So is there code to simply hide a pop if certain conditions are met? Thanks again.

BTW - will you save content state without login pull request work with the tunapanda standalone project?

otacke's picture

otacke

Tue, 06/23/2020 - 16:50

Hi Guitarman4!

This could be done as well by listening to xAPI statements and blocking/unblocking the popus as you like - but I believe that would make a complicated user interface to set up the rules.

Best,
Oliver

p. s.: About the tunapanda standalone project: I've never had a look at that project, but it probably provides some form of setting the H5PIntergration parameter and then would only require minor changes.