Interactieve 360 video en foto op je eigen site (simpel)
Hoe embed je een interactieve, Immersive, Cardboard compatible en werkende 360° video of foto op je eigen website zonder het gebruik van plugins, pano-viewers etc etc?
Het antwoord is: met VR Views, een eind maart door Google gepresenteerde Tool die de VR content zo op je site tevoorschijn tovert, dit door eenvoudig weg 1 regel iframe te gebruiken.
Het resultaat is een 360° foto of video op je eigen website waar de bezoeker met "vegen" of "mousedrag" in kan rondkijken, bezoekers die je site via een Smartphone bekijken kunnen de telefoon gewoon bewegen om rond te kijken in de foto.
Als men het Cardboard icoontje aantikt is de foto of video zelfs in een Cardboard of andere mobiele VR bril te bekijken.
Wij doken hier uiteraard gelijk uitgebreid in en testen een en ander. Hieruit komt een stap voor stap handleiding tot stand die we uiteraard graag met je delen
Dit is Mono[/caption]
Dit is Stereo[/caption]
Plak nu de volledige code in je pagina of bericht en zet de selectie terug van "tekst" naar "visueel". Als alles goed is zie je nu in ieder geval een grijs vlak verschijnen met een "Play" symbooltje in het midden.
Wie kunnen hier wat mee?
- Makelaars kunnen nu zelf 360° maken en zo op hun eigen website zetten zonder tussenkomst van dure fotografen, programmeurs of software
- Bedrijven zetten eenvoudig een 360° virtuele tour op hun website
- Bloggers bieden hun bezoekers net dat stukje extra, verbaas je bezoekers met de mooiste 360° content op je blog (lees bijv hier hoe je zelf een 360° video kan maken)
- Evenementen geef je aankomende bezoekers vast een kijkje op het festivalterrein of complex met slechts 1 regeltje code
Compatibiliteit:
Eigen VR content op je eigen site is natuurlijk mooi maar het is goed om eerst te bepalen wie het straks wel of niet kan zien. Internetbrowsers:- Up to date versie van Chrome ope: Windows, OSX, Linux, Android, en iOS.
- Up to date versie van Safari op OSX en iOS.
- Up to date versie van Firefox op Windows, OSX, and Linux.
- Up to date versie van IE 11 en Edge op Windows.
Stap 1: Zorg voor een foto of video
De foto of video dient aan een aantal eisen te voldoen. VR Views ondersteunt zowel Mono als Stereo 360° foto's en video's. Foto en video moeten opgeslagen zijn in het "Equirectangular-Pano" formaat. Dit klinkt redelijk ingewikkeld maar dit is de gangbare standaard op de meeste 360° Camera's. Als je die niet bezit is er geen man overboord: de Google Cardboard Camera android-app gebruikt hetzelfde formaat. Voor iPhone gebruikers: De Google Cardboard Camera app zit tegenwoordig verstopt in de Streetview App. (open de app, tik het plusje rechtsonderin en selecteer: camera). Het formaat en type waarin de foto opgeslagen (of geresized) dient te worden Let op; er worden meerdere problemen gemeld bij het gebruik van monofoto's, wij raden dan ook aan om gebruik te maken van het stereoformaat. Dit kan je eenvoudig zelf creeren met behulp van bijvoorbeeld Paint.Foto:
[caption id="attachment_2595" align="alignright" width="207"] Dit is Mono[/caption]
- VR View foto's kunnen opgeslagen worden in PNG, JPEG of GIF (JPEG wordt aangeraden)
- Voor maximale compatibiliteit worden foto's van 2048 of 4096 px aangeraden
- Mono foto's dienen in 2:1 aspect ratio te zijn (bijvoorbeeld: 4096 x 2048) (af te raden formaat)
- Stereo foto's dienen in 1:1 aspect ratio te zijn (bijvoorbeeld 4096 x 4096) (dit zijn feitelijk 2 x 2048 px foto's op elkaar gestapeld)
Video:
[caption id="attachment_2596" align="alignright" width="202"] Dit is Stereo[/caption]
- VR View video's dienen opgeslagen te zijn als MP4 met een h264 encoding.Mono videos dienen een 2:1 aspect ratio te hebben.
- Mono videos dienen een 1:1 aspect ratio te hebben
- Aangezien sommige oudere apparaten last hebben met het decoden van videomateriaal groter dan 1080P (1920x1080) en je wil het op safe spelen is dit ook het aan te raden formaat
Stap 2: Maak de foto of video online beschikbaar
We hebben Wordpress als basis genomen, om hier een foto te uploaden ga je als volgt te werk: Ga in de linker menubalk naar Media/nieuw bestand en selecteer de gewenste foto/video om te uploaden. LET OP: zorg dat je image-optimalization plugins als WPSmush uitschakelt bij het uploaden, dit kan namelijk op een later moment voor problemen zorgen. Als de foto of video is geüpload klik je deze, in de bibliotheek een keer aan. Kopieer vervolgens de volledige URL van de foto of video en plak deze ergens in een notepad bestandje of iets dergelijks. Je hebt deze URL zo nodig in de volgende stap.
Stap 3: Gebruik van de VR View iframe code
Tijd om het iframe te bewerken, dit is ook de enige code die je zo hoeft toe te voegen in je pagina of bericht.<iframe width="100%" allowfullscreen frameborder="0" src="//storage.googleapis.com/vrview/2.0/index.html?image=//www.de_de_volledige_url_van_jouw_bestand.jpg&is_stereo=true"></iframe>
Het rode gedeelte vervang je voor de URL die je in de vorige stap in een notepad bestandje (of ergens anders) hebt geplakt. LET OP: verwijder het HTTP:// gedeelte, deze wordt er over het algemeen automatisch bijgezet als je de URL plakt. Je ziet een paar parameters terug in deze iframe (de code zoals die hier staat is voor gebruik met een mono foto als eerder aangegeven) width="100%" Dit zorgt voor een 100% breedte weergave allowfullscreen : Dit maakt de "volledig scherm" optie beschikbaar. (tip: dit geeft de beste gebruikerservaring) frameborder="0" :dit verbergt het kader rondom de iframe (gangbaar, dit staat over het algemeen beter dan met kader) image : als het om een video gaat, je raadt het al.. moet daar video staan is_stereo=true: deze staat, omdat we een stereofoto gebruiken op true, wijzig dit in false als je een monofoto gebruikt.We zijn nu klaar om de code te implementeren.
Open de pagina of het bericht waar je de VR content wilt laten zien. (nieuw of bestaand) Zet vervolgens de selectie in je tekstverwerkings gedeelte op "tekst"
Plak nu de volledige code in je pagina of bericht en zet de selectie terug van "tekst" naar "visueel". Als alles goed is zie je nu in ieder geval een grijs vlak verschijnen met een "Play" symbooltje in het midden.
Stap 4: Publiceren en testen
Publiceer je post of pagina en controleer de volgende zaken:- Zie je de foto of video?
- Kan je "rondkijken" in deze foto of video door middel van het slepen van je muis?
- Open de pagina of bericht vervolgens op je mobiel.
- De preview die je als eerste ziet zou je moeten kunnen "rondslepen" door middel van "vegen"
- Tik vervolgens de "Full screen" optie (het vierkantje rechtsonderin), je moet nu een full screen krijgen en je moet kunnen "rondkijken" door je telefoon te bewegen.
- Als laatste tik je het cardboard symbooltje aan, er moet nu een een scherm "Place your phone into your Cardboard Viewer" verschijnen, draai je telefoon in "landschaps modus" en er verschijnen, als alles goed is gegaan, 2 beelden naast elkaar.