yanwsh / videojs-panorama

a plugin for videojs run a full 360 degree panorama video.
http://yanwsh.github.io/videojs-panorama/
Other
492 stars 160 forks source link

Working via a CDN in Safari #14

Open sobytes opened 8 years ago

sobytes commented 8 years ago

Hi

This is great but i am struggling to get it to work in safari i know you have listed this as a bug but is there anyway to get the video to play from a cdn in safari?

If i am using Amazon S3 with the link below i cannot get this to work with any setup in safari all other browsers work without issues. https://acloudfrints.s3.amazonaws.com/shark.mp4

My cors headers are completely open.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
       <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Is it every possible or is this something we cannot get around until Apple apply a fix?

Thanks

yanwsh commented 8 years ago

The same issue with you. I tried a lot but unfortunately i can't get this work. Your setting is correct, the problem is safari itself. Hope the coming safari 10 can fix this issue.

For now, is it possible to put a html file on acloudfrints.s3.amazonaws.com? The temporary solution is using iframe. Keep the html and video under same domain. Or you can do something like youtube does, play original video on safari, and play 360 video on other browsers.

I am using amazon s3, too. Put it in iframe and it's working.

Let me know if you have any better solution.

Sorry, I can't help you.

sobytes commented 8 years ago

Hi @yanwsh,

Thanks for the reply sorry i didn't get notified, yeah i managed to get the way you suggested working on AWS.

https://s3.amazonaws.com/acloudfrints/shark.html

But non of the devicemotion events fire when you put it inside a iframe meaning that iframes for mobile are a no go, until safari fixes the bug i see it is related to this three.js post.

https://github.com/mrdoob/three.js/issues/8110

Which there does not currently seem to be a solution for. Tried pretty much every cors setup i could find but nothing worked.

So CDN's serving the video will only work on everything except Safari.

Where you have put.

I am using amazon s3, too. Put it in iframe and it's working.

Have you got a example of this working via a iframe on mobile, with device motion and fullscreen events firing.

Thanks.

sobytes commented 8 years ago

Hi @yanwsh,

I think the solution i am going to settle for which i think is probably the best for now, is bind a event to the play button for safari mobile and just open the .html directly in the browser.

And serve the other browsers with the iframe seem like a solid solution for now.

Thanks

yanwsh commented 8 years ago

Hello, sorry for the late reply, pretty busy this week. Please check my repository, there are two files, iframe and iframe-video. This the example to help you make the mobile orientation work on iframe. Let me know if you have any questions.