360/VR Picture and Video Support

Image Hotspots and Interactive Video could benefit greatly by adding in support for 360/VR images and video.

Content types: 
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
otacke's picture

Guess what this is intended for: https://github.com/h5p/h5p-three-sixty :-)

icc's picture

Feel free to check out the three-sixty-video-support branch of h5p-interactive-video, h5p-editor-interactive-video, h5p-video and h5p-drag-n-bar – and, of course, you'll need h5p-three-sixty and h5p-three-js as well.

Note that while 360 support is fully doable, it gets more complex with VR. The main issue being that you'll have to display a duplicate of each interaction for each eye – meaning that when you click the interaction displayed for the left eye, the interaction on the right eye won't automatically animate. I guess this is why many just drop HTML and stick to WebGL only when creating stuff for VR.

Hopefully, the experimental 360 branch will find its way to the master branch soon. 

gpakat's picture

I can see the 360 support is now available in H5P. But is there any documentation available for how to create object in 360 mode?

icc's picture

Currently, it's only available in a development branch. There is still some work left before this can be released, i.e. you cannot expect any content created using this branch to be compatible with future versions of IV.

If you are using the branch there should be a checkbox when adding the video and also one on each interaction for making it part of the 3D world :-)

gpakat's picture

main question is how to edit the content in 360 mode, i understand that this is an experimental release

Thank you for showing the beta version at the H5P-con (which was incredible, btw)! At our university college we just started several projects to explore the many uses of 360 in education. Two questions:

  • We would love to dive into the content type you developed / are developing. However, we can't manage to install the branch you mentioned. Is there a way we could use this development branch that doesn't involve npm?  
  • Is there a way we can contribute to this 360/VR content type? We would love to get involved and collaborate to help with the development, examples and/or use of 360 content in H5P.

Feel free to contact me with a comment or by email.

Kind regards
and greetings to the core team


icc's picture

Hi Thomas,

Thank you for showing an interest.
To work with the prototype you have to checkout out the three-sixty-video-support branch of the following libraries: h5p-interactive-video h5p-editor-interactive-video h5p-video h5p-drag-n-bar
In addition, you need to add the following libraries to your site: h5p-three-sixty h5p-three-js
You can read more about setting up a development environment here: Development Environment

I'll try to update the prototype on Labs later today so that it's working.

The creation of the prototype was funded but since then all of the work has been happening in the spare time – making progress slow. Hopefully, will find more time and resources to focus on this project next year.
Feel free to try out the prototype and contribute in any way you can.


I managed to install all libraries needed. I get the checkbox '360', but see no 360 capabilities once checked. Could it be that https://github.com/h5p/h5p-video/tree/three-sixty-video-support is missing some 360-information? I cannot find anything in the scripts that would render 360 video or that is different from the regular branch.

Kind regards


Is there an option to add 360 video to moodle?

Can I ask for more details (steps) how to do it?

Thank you

Best Regards


thomasmars's picture


As ICC mentioned earlier the 360 video is under development, so there is no official release yet. To try out the experimental version you have to checkout the "three-sixty-video-support" branch of the following libraries: "h5p-interactive-video", "h5p-editor-interactive-video", "h5p-video" and "h5p-drag-n-bar". However Moodle does not provide a development mode for H5P, so you would have to pack and upload the libraries through library administration instead of using H5P Development Folder. If you're running a production site I don't recommend this, since it will overwrite your IV and Video libraries for all content types, which can cause content to break.

If you want to try it anyway I suggest looking at the H5P CLI to learn how you can package H5P git repositories into uploadable H5P library packages: https://h5p.org/h5p-cli-guide.

Good luck, Thomas

looking forward to this feature :)

juliandavis71's picture

Hi guys - really looking forward to seeing this in action. We are looking at using Marzipano, but if H5P supports similar functionality, we don't need to look anywhere else! :)

Do you have a timeline? Happy to be part of the testing if needed.

Thanks - Julian


otacke's picture

Hi Julian!

No, we unfortunately can't give a date, but it might still make it to this world this year. If you want to help out. you're warmly welcome to join the group of beta testers!


Is there any news about getting this great feature into the standard releases of h5p? 

BV52's picture

Hi Juergen,

I wish I have good news but currently we do not have any updates on this yet.


Benoit Bergeron's picture

Hi guys! I'm not sure if I'm in the good place for talking about this but I try it!!! Do you have a issue for looking H5P 360 Activity with my VR Samsung head set. I does somthing in my Moodle cours in 360° like the demo in the garage for my student. For dragging eith mouse it's ok but with VR is bad looking... Thanks! Sorry for my english! ;-)

BV52's picture

Hi Benoit,

Can you please elaborate what you are seeing? Does the image get cut off or it doesn't respond smoothly?



After 1 year of the last comment, I'm posting this comment to ask if it's now supported in the main release or not yet?

BV52's picture

Hi ramiouanes,

I'm afraid not. This feature is more of a side project that the developer works on in his free time.


Hi BV,

Thank you for your reply.

Do you think it's possible to use this project even in dev mode? If yes, can you point me to how to install or use it? That'll be extremely appreciated.

I'm using the node js library from Lumieducation and I want to inclue the possibility to add mp4 360 videos with going through youtube.

Thank you in advance for your reply.

icc's picture

The last time I checked YT does not offer any API controls for 360 so using that as a source will not work.

Yes, you can set up the development environment and checkout this branch of IV to see how it works: https://github.com/h5p/h5p-interactive-video/tree/three-sixty-video-support
But if you're not familiar with H5P or JavaScript you'll probably have a hard time.

Please see my previous post: https://h5p.org/comment/15496#comment-15496

Hi there. Any progress on this? 

Can development be boosted with funding? Will it support also subtitles from Vimeo or we will have to import them from H5P?