Player 360

Wam · April 17, 2019, 7:58am

Hi,

I have a problem and I would like to see if the experts (like @Pealco, @Whittfield, @Lucas,… ) in code could help me with this.

I have a client who wants me to use the Google viewer for 360º photos and videos.
I have it solved for other clients with the provider’s viewer “360player.io”, but I can not make the Google 360 viewer (VR) work in Blocs.

This is the link where Google gives its instructions to use its 360º player ( VR View for the Web | Google VR | Google Developers )

Could some code expert help me please?

I think that this theme of “player 360º” could also be of interest to the Blocs community.

Thank you in advance for your help.

Best regards.

Español:

Hola,

Tengo un problema y me gustaría ver si los expertos (como @Pealco , @Whittfield , @Lucas , …) en el código me podrían ayudar con esto.

Tengo un cliente que quiere utilizar el visor de Google para el 360º fotos y vídeos.
Tengo resuleto para otros clientes con el visor del proveedor “ 360player.io ”, pero no puedo hacer que el visor de Google 360 (VR) trabaje en bloques.

Este es el link donde Google da sus instrucciones para utilizar su reproductor de 360º ( VR View for the Web | Google VR | Google Developers )

Podría alguien experto en códigos ayudarme por favor?

Creo que este tema de “player de 360º” también podría ser de interés para la comunidad de bloques.

Gracias de antemano por su ayuda.

Atentamente.

Pealco · April 17, 2019, 10:05am

Hello @Wam

I found a solution, can you send me a video, so I make an exemple with your specific video?

Wam · April 17, 2019, 10:10am

Of course.

Due to the size, I send you a Wetransfer link with a video and a photo, both in 360º

https://wetransfer.com/downloads/790a6d59c000b7712f12324a07dcd79720190417100807/a7583cbe2f95261e0284781a2d8ddb8220190417100808/321025

Link tour virtual 360º: https://redecor360.com/tourvirtual/70499/

Best regards

Pealco · April 17, 2019, 3:28pm

OK, it works.

So just open an account in here: https://site.vizor.io

Then upload your video.
After that you have a share button in the video and past it in a html code brick.

And that’s it… hope it works for you…

Wam · April 17, 2019, 4:48pm

Hi @Pealco.

Thanks for you time and dedication.

As I said in my first post I need to do the work with the Google viewer following the code that is in the address ( VR View for the Web | Google VR | Google Developers )

The vizor.io solution is the same as the one I have used for other clients with 360player.io.

I am trying to use the Google code, but I can not get it to work for me.

That’s why I’m looking for someone who understands code like you, to see if it can put the Google code to work.

With the google code you can use my 360º files (videos, virtual tour, photographs, etc …) hosted in the same hosting as the website.

I would be very grateful if you could use the Google code.

With best regards.

En español.
Hola @Pealco.

Gracias por su tiempo y dedicación.

Como le decía en mi primer post necesito hacer el trabajo con el visor de Google siguiendo el código que hay en la dirección ( )

La solucion de vizor.io es igual que la que yo he utilizado para otros clientes con 360player.io.

Yo estoy tratando de usar el código de Google, pero no consigo que funcione para mi.

Por eso busco alguien que entienda de código como usted, para ver si puede poner en funcionamiento el código de Google.

Con el código de google se pueden utilizar mis archivos de 360º (videos, tour virtual, fotografías, etc….) alojados en el mismo hosting que la pagina web.

Yo le estaría muy agradecido si usted pudiera poner en funcionamiento el código de Google.

Pealco · April 17, 2019, 7:00pm

Ok, I will then. Let me get my laptop…

Pealco · April 19, 2019, 5:11pm

Hello @Wam, as you can see I put it working,

Just add a bloc, then inside the bloc add a html code bric, and inside that add the following code:

<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

<div id="vrview"></div>

<script>
window.addEventListener('load', onVrViewLoad);

function onVrViewLoad() {
  // Selector '#vrview' finds element with id 'vrview'.
  var vrView = new VRView.Player('#vrview', {
    video: './70499_360_music.mp4',
    is_stereo: false
  });
}
</script>

But then probably you will get the following screen:

And it was here that I really struggled…
Then after a lot of research I found the 2 missing points to make this work:

you have to load the content to a host,
you have to allow (Access-Control-Allow-Origin)

So to the 1) just export your project and host it in your/client normal domain.
For the 2) point you have to change the .htaccess file and add the following:

Header add Access-Control-Allow-Origin "*"

In my case I have a few domains in my cpanel, so I simply create a .htaccess file with this line:

Header add Access-Control-Allow-Origin "*"

And paste the file inside the folder of that domain.

And voila: 360 WITH YOUR FILE

Wam · April 19, 2019, 7:02pm

Hi @Pealco,

Thanks for your solution, I will perform the tests and I will tell you the result of everything.

Best regards.

Wam · April 19, 2019, 7:31pm

Hi @Pealco,

I tried your link (360 WITH YOUR FILE) and it works on my Mac as a 360º still image but not as 360º video, also without sound and the mobile phone does not work and the ERROR screen of your message appears.

I will continue testing and I will comment.

Best regards

Pealco · April 19, 2019, 9:01pm

I don’t know, there is a video showing that is working, but I only follow the instructions from VRVIEW, I will try to find out a different way to achieve this, yes to work in mobile, we have to add some more plugins. This one is difficult.
Its easier to upload it to youtube and embed a youtube video in blocs…

http://blocs.pt/examples/v2/Sem%20nome.mov

Wam · April 19, 2019, 11:05pm

Thanks @Pealco.

I have applied your 360º video solution for a 360 image and it works correctly.

I will test your solution using several 360 photos as if it were a carrousel, as Google explains on its page.

There is also another possible solution that you could use by applying what is explained in this web ( https://photo-sphere-viewer.js.org ) and that surely will be better solution than Google’s.

The idea of YouTube for the video is a good idea for me and I think that it will solve the problem of sound … I’ve done the Youtube tests and the video has sound but it does not have the 360º movement. Any possible solution?

In case you want to test, the iframe of the video on YouTube is this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/mD7GoyjO77w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

EDITED: In the preview of Blocs does not work the movement of the Youtube video, but on the website, it works perfectly.

ES:

Gracias @Pealco.

Su solución de video 360º la he aplicado para una imagen de 360 y funciona correctamente.

Voy a hacer pruebas con tu solución utilizando varias fotos de 360º como si fuera un carrousel, tal y como explica Google en su página.

También hay otra posible solucion que podrías utilizar aplicando lo que se explica en esta web ( x ) y que seguramente será mejor solucion que la de Google.

La idea de Youtube para el vídeo es buena idea para mi y creo que asi se solucionará el problema del sonido…… He hecho las pruebas de Youtube y el vídeo tiene sonido pero no tiene el movimiento de 360º. Alguna idea??

Por si quieres hacer pruebas, el iframe del video en Youtube es este:

Editado: En la previsualizacion de Blocs no funciona el movimiento del video de Youtube, pero en la pagina web, funciona perfectamente.

Wam · April 19, 2019, 11:29pm

In this link (https://redecor360.com) you can see a test of the different combinations that I mentioned earlier.

You will see that in the Google solution the video has no movement.

In the Youtube solution, everything is perfect (movement and sound). Good idea.

And on the “View Virtual 360” button, you can see a virtual tour with Hotspots to move around the house.

ES:

En este enlace ( x ) puedes ver una prueba de las distintas combinaciones que te he comentado anteriormente.

Verás que en la solucion de Google el vídeo no tiene movimiento.

En la solucion de Youtube, todo perfecto (movimiento y sonido). Buena idea.

Y en el botón “View Tour Virtual 360”, puedes ver un tour virtual con Hotspots para moverte por toda la casa.

Pealco · April 20, 2019, 1:38am

and did you have to change the .htaccess file?
Very nice solutions, glad that you found a solution…
The only thing is that iPhone and iPad, at least mines, doesn’t work with the you tube 360.

And when I open the you tube address it appears a yellow banner saying that my browser don’t support 360 you tube video,
But if I open the video in the YouTube app, everything works, looked for a solution, and found this:

https://www.omnivirt.com/blog/en/omnivirt-solves-youtubes-360-video-embed-issues-on-safari-ios/

I try’d their demos and work in all my equipments and plataforms, but don’t know it could be me equipments only. Or a localization issue.

Wam · April 20, 2019, 10:20am

Hi @Pealco.

If I had to modify the .htaccess file, without modifying the file, the solution does not work. Thanks.

I’m going to take a look at his idea about the problem of 360º videos on the iPhone and on the iPad. Thanks.

I just do not have any of those devices.
All the tests on my sample website work well in my browsers (Firefox, Safari y Chrome), with the following exceptions:

COMPUTER:
Firefox:
1 - Google’s solution for 360 videos does not work, no movement, no sound. Error message, black screen and white letters.
2 - Error in the Google solution for 360 photos. Error message, black screen and white letters.
3 - “Virtual Tour 360” button, starts the Toggle, but when you close it by pressing the button, it closes the Toggle, but the sound continues to be heard.
4 -The Youtube 360 video, works full (image, movement and sound)

Safari:
1 - Google solution for video, image yes, no movement and no sound.
2 - Google solution for 360 image, works correctly.
3 - “Virtual Tour 360” button, starts the Toggle, but when you close it by pressing the button, it closes the Toggle, but the sound continues to be heard.
4 -The Youtube 360 video, works full (image, movement and sound)

Chrome:
1 - Google solution for video, image yes, no movement and no sound.
2 - Error in the Google solution for 360 photos. Error message, black screen and white letters.
3 - “Virtual Tour 360” button, starts the Toggle, but when you close it by pressing the button, it closes the Toggle, but the sound continues to be heard.
4 -The Youtube 360 video, works full (image, movement and sound).

MOBILE PHONE:
1 - Google’s solution for 360 videos does not work, no movement, no sound. Error message, black screen and white letters.
2 - Error in the Google solution for 360 photos. Error message, black screen and white letters.
3 - “Virtual Tour 360” button, starts the Toggle, but when you close it by pressing the button, it closes the Toggle, but the sound continues to be heard.
4 -The Youtube 360 video, works full (image, movement and sound).

It seems that a common error (number 3) to all the devices is to remove the sound or to stop the Virtual Tour activated by means of the “Virtual Tour 360” button to see the Toggle.

You think that maybe the solution that was proposed on the web (https://photo-sphere-viewer.js.org) could be a better solution for the problems posed by the Google code.

Your opinion would be greatly appreciated.