360 degree video - video.js?

#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

1 Like
#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

7 Likes
#3

Awesome Jonathan,

thank you very much for your help!!

1 Like
#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

1 Like
#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

#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!

#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?

#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.

#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.

1 Like
#10

Sorry, I totally forgot about this, if you or someone still need it, here is the demo file I made to test it.

DEMOPanellum.hype.zip (691.9 KB)

1 Like
#11

3 posts were split to a new topic: Embedding Panellum in Wordpress

#12

Hello @jonathan ,

What is the different between the above way and the one of action to run javascript of “ON Scene Load” ? or do you think it will work by running several Js actions on scene load?

If yes, which one would be better for access speed please?

Actually, I am trying to make it work on our wordpress site by localizing all of those JS&CSS, but I am little confused by which one I should try.

Your instruction would be much helpful for me to avoid time spent on it.

Thanks

#13

I’m not exactly sure what you’re asking… are you debating between using an HTML Widget (aka iframe) or a Rectangle element?

The Rectangle will be more efficient from a download perspective; iframes require a separate download of another .html page and may not be able to reuse resources in the same way. Browsers also need to do more memory allocations for iframes.

However it can sometimes be a little trickier to get them to work properly if you have multiple ones on a page; the iframe method is perhaps a little bit easier since everything is self-contained in that page. I’m not sure how localization would factor into it.

In general I always favor trying to use a Rectangle element.

Products
Company
Social
Hype Support
Whisk Support
Store

Copyright © 2010-2022 Tumult Inc. All rights reserved.
Handcrafted in San Francisco.