360 degree video - video.js?

video

#1

Hi,

I would like to use 360 degree video in Hype so I can use it as an html5 360 video player. Safari will not play Youtube 360 so I am looking for a more universal solution.

I read that you could use pannellum and video.js to accomplish that. But maybe other software is better suited for this?
Would that be possible to incorporate in Hype and how can it be accomplished? A examplefile would be great, but any pointers are much appreciated! Here’s an Pannellum example html-file: https://pannellum.org/documentation/examples/video/

Thanks!

Olav


(Jonathan Deutsch) #2

I don’t know the best 360 player, but it is pretty easy to incorporate that into Hype. Here’s what you’d do:

  1. Add a HTML Widget
  2. Take the example code provided on the site and paste into the Widget’s Inner HTML
  3. Any specific references (in this case the absolute, not https, paths) should be replaced with ‘${resourcesFolderName}/’ for the path.

For example,

<script src="/js/videojs-pannellum-plugin.js"></script>

becomes:

<script src="${resourcesFolderName}/videojs-pannellum-plugin.js"></script>

(do this for the poster image and videos)

  1. Then drag in those files into the Hype Resources Library.

Here’s an example from their page I threw together:

Pannellum.hype.zip


#3

Awesome Jonathan,

thank you very much for your help!!


(David Guillermo Escalante Trinidad) #4

I may be a bit late, but pannellum seems to be what you are looking for.

I was able to make pannelum to run using Hype JavaScript tools, so it loads internally within Hype (nav buttons are the grey one on top)
http://heuristic.center/#espacios

And its great to trigger events within hype too (drag the picture)
http://zanate.com.mx/clientes/cuv/#valladolid


(Alex) #5

Hello @Davirus,

Great work, and I checked the JS of pannellum.js.zip pannellum.js.zip (19.4 KB)

but I did not found the way to make that js work, or how to make the js to connect with the id of image, would you like to share a demo hype document?

Thanks


(PJ Collins) #6

Hello Jonathan,

This hype file you’ve attached is exactly what I was after but once I export, the video will not play either locally or if I place the files on a web server.

Uncaught ReferenceError: videojs is not defined
at videojs-pannellum-plugin.js:5

Hoping you might be able to provide a relatively easy solution!


(Jonathan Deutsch) #7

Are there other errors you see after that? I see that error even on working previews in Safari. That specific error does seem to indicate it needs the videojs object reference, so there might be more videojs scripts you need to load.

If I try to open the export .html as a file:/// URL in Chrome, I get a lot of other CORS (cross origin) policy errors that are probably the problem. This is common when opening as a file, as the URL scheme is has different security requirements and AJAX requests aren’t allowed this way.

Usually on the server this isn’t a problem though; can you provide a link to where you have it posted?


(PJ Collins) #8

Thanks for getting back to me! Yes I got a lot of CORS warnings too, though once on a proper web server the issues went away and I got it all working.

However, what I was actually trying to do was create an iPad app with Hype that showcased some 360 footage using Pannellum. I have access to 6th gen iPads (A1893), but Safari on those does not support the WebGL needed for the Pannellum player for video, though ok with images… so now looking for another solution. Hopefully a useful FYI for someone out there in the future.


(Jonathan Deutsch) #9

Ah, I had forgotten how this worked… the code all mostly resides in the Inner HTML of the HTML Widget.

The videojs is not defined log is definitely a red herring; you can clean that up by just unchecking Include in document <head> in the Resource Library for the video-js-pannellum-plugin.js file.

If you choose Edit > Edit Element’s Inner HTML for the HTML Widget, you’ll see a lot of https URL references for the .js and .css files. If you are going to be accessing this via a file:/// URL, you’ll instead need to have each of the external resources be local files.

So in the case of:

<script src="https://vjs.zencdn.net/5.4.6/video.js"></script>

You’ll want to:

  1. Download the the video.js file referenced by the src URL
  2. Drag this into the Resouces Library
  3. Uncheck Include in document <head> for the file
  4. Change the reference to look like:
    <script src="${resourcesFolderName}/video.js"></script>
    

This will need to be repeated for each remote resource.