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/
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
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!
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?
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.
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.
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.
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.
Sorry for resurrecting this old thread, but this is exactly what I'm trying to figure out. So far, I'm only using the script snippets and test video from this thread.
Everything works fine when I use the Hype preview function. Once I export, the video won't play and the error is: “The media could not be loaded, either because the server or network failed or because the format is not supported.”
I tried having the files in recources or with the links, both to the same result.
Are you previewing from a server over HTTPS or previewing locally from a hard drive? This can sometimes matter for JavaScript and the permissions they require -- please try loading it from a server.
Testing via netlify, the demo appears to work when uploaded to a server:
Interesting, thank you. That actually works! I had hoped to be able to use this on a system without internet connection, but that doesn't seem to be possible.
(I just wanted to export from Hype to a folder and open the local offline files with a Browser.)
Theoretically, if I had to create an offline Hype project with Pannellum, I would likely explore converting the project to an App or a Progressive Web App.
Another option would be to run a local web server, but I like the app route better. There's are Xcode tutorials on the forum…
I been considering adding a "panorama" mode to my photo game, so I was thinking of using Pannellum to make that game or a new game. But without Pannellum, I've been successful converting Hype projects to apps… which were designed to work offline.
I've also created WebView apps on Android, so perhaps that's a possibility too. Again, the Progressive Web Apps is another possibility… Allow Desktop PWA's
Thank you, I'll look into that. A web app might be pretty good for this little project.
But I might have found another workaround for my usecase.
If I upload the files to a server, everything seems to work as expected.
Then, I can use Pocket in Firefox to download the site.
So far, this seems to make offline use possible.