360-Grad-Fotos und -Videos auf meinen Webseiten einbinden

(Dieser Beitrag enthält Werbelinks, die mit einem Sternchen (*) versehen sind. Wir finanzieren unsere Arbeit auch über sogenannte Affiliate-Links. Hier erfährst Du mehr.)

Reisen schafft neue Horizonte, Reisen bildet und Reisen ist (fast immer) schön. Und meine schönen Eindrücke möchte ich natürlich auch anderen mitteilen, meinen Lieben, meinen Freunden oder auch den Lesern meiner Webseiten. Bleibende Eindrücke hinterlassen die Erlebnisse, die ich in eindrucksvollen Fotos und Videos einfangen kann. Und Fotos lassen sich auf jeder Webseite relativ einfach veröffentlichen. Viele Webseiten – auch WeltReisender Magazin – basieren auf dem weltweit führenden Content Management System (CMS) WordPress. Deswegen beziehe ich mich in diesem Beitrag auf WordPress, wobei viele Ausführungen generell gelten.

Videos kann ich auch in WordPress-Artikeln und Seiten einfach einfügen, sofern ihre Dateigröße nicht zu groß ist. Ich gehe ohnehin meist den „Umweg“ über die größte Videoplattform der Welt: Youtube. Dort lade ich die Videos hoch und verlinke oder bette sie ein. So schlage ich zwei Fliegen mit einer Klappe: auf Youtube finden zusätzliche Zuschauer der Youtube-Community meine Videos und ich schone Speicherplatz, Bandbreite und Server-Zeit bei meinem Hoster. Man könnte auch Vimeo als Alternative nehmen.

360-Grad-Fotos und -Videos als sinnvolle Ergänzung

So weit, so gut. Komplizierter wird die ganze Sache mit 360-Grad-Fotos, -Videos und Panorama-Fotos. 360-Grad-Videos und -Fotos scheinen nicht der Hype geworden zu sein, den die Hersteller sich wohl gerne erhofft hätten. Es ist vermutlich eher ein Markt für Spezialanwendungen, zum Beispiel für die Immobilien-Branche. Wo dann auch richtig teure 360-Grad-Kameras zum Einsatz kommen. Aber es gibt natürlich auch Anwendungen im Consumer oder semi-professionellen Bereich, bei denen Rundumaufnahmen eine sinnvolle Ergänzung sind. Beispielsweise um Räumlichkeiten vorzustellen, das Innere eines Autos oder einfach die fantastische Rundumsicht an einem schönen Ort.

Derzeit sind einige, relativ preiswerte 360-Grad-Kameras auf dem Markt erhältlich. Die Auswahl ist überschaubar. Ich setze zum Beispiel seit einiger Zeit auf die Samsung Gear 360 /2017 (SM-R210)*. Sie belegt in Tests häufig das hintere Mittelfeld. Als Begründung für die Platzierung wird dann meist angegeben, dass für das Stitching – das Zusammenfügen der beiden Kamerabilder – eine separate (kostenlose) PC-Software erforderlich ist, das Programm Gear 360 Action Director. Die Software funktioniert zugegeben auch etwas hakelig, was den Stitching-Prozess betrifft. Allerdings kann man aus 360-Grad-Clips und -Fotos ein Video mit untergelegter Musik und Text-Titeln schneiden. Das ist Klasse.

Falls jemand über einen Kauf der Samsung Gear 360 (2017) nachdenken sollte, hier einige Daten:

Effektive Pixelanzahl, beide Kameras zusammengerechnet: 15 MP

Maximale Auflösung für Videoaufnahmen: 4096×2048 bei 24fps. Das ist nicht viel. Youtube empfiehlt einer Auflösung von mindestens 7.168 x 3.584 bei 24, 25, 30, 48, 50 oder 60 Bildern pro Sekunde und höchstens 8.192 x 4.096. Aber keine Sorge, Youtube akzeptiert auch Videos mit kleinerer Auflösung.

Die Fotogröße beträgt 5472×2736 Pixel

Mehr Infos über die Samsung Gear 360 R210

Wer ein modernes Samsung-Handy sein eigen nennt, kann in Verbindung mit der App Samsung Gear 360 das Stitchen über die App vornehmen. Die App findet ihr im Google App Store.

Ein Entwickler hat es geschafft, dass die offizielle Samsung-App auch mit anderen Handys funktioniert. Eine gute Beschreibung liefert dieser Artikel. Hier könnt ihr den Samsung Gear Manager für viele andere Handys herunterladen.

Fotos und Videos übers Handy oder den PC bzw. Mac stitchen

Ich besitze ein Samsung S8* und kann somit Fotos und Videos der Gear 360 einfach stitchen. Während ich Fotos oder Videos von der Kamera mithilfe der App auf dem Handy speichere läuft nebenher der Stitching-Vorgang. Wobei große Videos ihre Zeit brauchen. Ein Clip mit einer Größe von ungefähr 500 Megabyte brauchte bei mir rund 10 Minuten. Also planen Sie entsprechend Zeit ein, wenn Sie Ihre Urlaubsvideos von der Kamera aufs Handy übertragen wollen. Eine Alternative ist wie schon erwähnt der Action Director. Sie laden die Fotos von der Kamera auf den PC und stitchen diese dann im Stapel. Das geht auf jeden Fall schneller.

Eine andere Möglichkeit wäre auch, sofern die Speicherkapazität eures Handys dieses hergibt, dass ihr in einer freien Minute oder direkt nach der Aufnahme die Clips überspielt.

Interessanterweise sind die mit dem Handy umgerechneten Clips von der Dateigröße her doppelt so groß wie die Ausgangsclips. Anders als das Programm Action Director verdoppelt die Handy-App nämlich einfach den Bitstream. Prinzipiell ist ein höherer Bitstream besser. Doch hier hat das keinen Nutzen, denn aus einem geringeren Bitstream einfach einen höheren zu berechnen, bringt nichts. Andererseits ist es, abgesehen von der Dateigröße, auch nicht schädlich.

Wer die 360-Grad-Clips mit einem Schnittprogramm weiterverarbeitet, beispielsweise mit Adobe Premiere*, kann bei der Ausgabe die gewünschten Parameter ohnehin einstellen. Wenn ich den Clip unbearbeitet direkt auf eine Social Media-Plattform laden will, ist diese enorme Größe aber unter Umständen hinderlich.

So binden wir unsere 360-Grad-Kunstwerke in die Webseite ein

Kommen wir wieder auf das Einbinden unserer 360-Grad-Produkte auf unsere (Reise-) Webseite zurück. Auch beim 360-Grad-Video empfiehlt es sich, Youtube oder Facebook als „Hoster“ zu verwenden (siehe oben). Denn diese beiden großen Social Media-Plattformen bieten diese Funktionalität mit an. Wir bräuchten sonst zum Abspielen einen besonderen Player.

Damit Youtube unser 360-Grad-Video als solches erkennt, muss dies in den Metadaten vermerkt sein. Manche 360-Grad-Kameras markieren die Metadaten entsprechend. Und das Schnittprogramm gibt diese Daten hoffentlich weiter. Youtube erkannte bei mir ein 360-Grad-Video, das ich mit der Samsung Gear 360 (2017) aufgenommen und mit Action Director geschnitten hatte. Auf der sicheren Seite seid ihr mit dem Spatial Media Metadata Injector. Mit dieser kleinen App können wir den Clip entsprechend vorbereiten für den Upload auf Youtube oder Facebook. Mehr Infos über die Spezifikationen findet ihr in dem Artikel von Youtube.

Plugins, die helfen könnten

Prinzipiell könnten wir die 360er-Videos auch auf dem Server unseres Providers hosten, aber, wie schon erwähnt, brauchen wir dann dafür einen speziellen Player. Glücklicherweise sind wir in der großen weiten WordPress-Welt unterwegs, in der es (gefühlt) nahezu unendlich viele Plugins für jeden Zweck oder jede Funktionalität gibt.

Für unsere 360-Grad-Welt werden wir auch fündig. Schauen wir uns mal an, was es so in Sachen Rundum-Videos und -Fotos so gibt. Wobei wir nur einen Blick auf die kostenlosen App-Schnipsel werfen. Meine Auswahl ist zudem nicht vollständig.

Hinsichtlich Funktionalität und Benutzerfreundlichkeit nimmt sicher das Plugin WP-VR-view eine Spitzenposition ein. Es kann Fotos und Videos wiedergeben. Mehr als 10.000 aktive Installationen sprechen für seinen Einsatz. Das Handling ist gut und das Rating liegt bei 3,8 von 5 Punkten.

Ein Problem für mich ist, dass es das letzte Mal vor zwei Jahren aktualisiert wurde. Eigentlich setze ich Plugins, die so lange nicht gewartet wurden, nicht ein. Dennoch mache ich eine Ausnahme, auch weil die Auswahl nicht so groß ist.

Im PC-Browser sehen meine 360-Grad-Fotos wirklich toll aus, super. Aber im Chrome-Browser meines Samsung S8 ist nur ein Flackern zu erkennen. Keine Ahnung, ob es am WP-VR-view liegt oder am verwendeten Theme oder ob andere Plugins die Verursacher sind. Fazit: Ich deinstalliere es wieder.

DImage 360 mit mehr als 2000 Installationen und einem Rating von 4,5 von 5 macht auch einen guten Eindruck. Über Shortcodes lassen sich die Fotos in den Posts oder auf den Seiten einfügen. Als Parameter muss man die ID des Fotos oder die vollständige URL eingegeben. Beides hat bei mir leider nicht funktioniert, ich erhielt stets die Fehlermeldung „Image Not Found.“ Auch, dass ich die betreffenden Beiträge vom Cachen ausgeschlossen habe, änderte nichts.

Dann gibt es noch das Plugin PanoPress. Das weist immerhin über 10.000 aktive Installationen und ein Rating von 4,5 von 5 auf. Aber es wurde vor drei Jahren letztmalig aktualisiert. Also eigentlich Hände weg davon, aber ich wollte endlich 360-Grad-Fotos auf WeltReisender sehen. „Glücklicherweise“ führte schon die Installation direkt zu Fehleranzeigen im Backend, so dass ich mir weiteres Probieren ersparen konnte.

Das Marzipano Tool

(Wichtiger Hinweis: Ein User hat mir über Facebook mitgeteilt, dass in der erzeugte Zip-Datei des Marzipano-Tools von der Virschutzsoftware McAfee ein Virus erkannt wurde. Ihr solltet das Marzipano Tool erst einmal nicht mehr nutzen. In der nächsten Zeit will ich den Beitrag überarbeiten und den Sachverhalt prüfen. Stand: 23.4.23)

Im Zuge meiner Suche bin ich jedoch endlich auf eine richtig coole Seite gestoßen: Das Marzipano Tool. Vielleicht schaut ihr euch erst einmal einige Demos an, was so möglich ist. Man muss händisch mehr Schritte erledigen als bei einem Plugin, aber es funktioniert bestens.

Zunächst klickt ihr auf den Button Marzipano Tool, dort könnt ihr 360-Grad-Bild hochladen. Mit der Auswahl links oben können wir dem Projekt einen Namen geben. Wir können anklicken, ob Steuerungs-Buttons und ein Fullscreen-Button angezeigt werden sollen. Außerdem ob das Bild automatisch rotieren soll. Ein Titel lässt sich ebenfalls eingeben. Rechts unten finden sich weitere Möglichkeiten. Ihr könnt beispielsweise angeben, wo das Bild beim automatischen Lauf starten soll. Es lassen sich auch einzelnen Bildabschnitte mit Beschriftungen versehen.

Anschließend auf den Export-Button rechts oben drücken und der Browser spuckt eine zip-Datei mit dem Namen des Projekts aus. In der zip-Datei befindet sich der Ordner „app-Files“, den Sie mit einem FTP-Programm, z.B. FileZilla, auf Ihren Server kopieren. Wenn ihr mehr als ein 360-Grad-Foto auf eurer Webseite veröffentlichen wollt, solltet ihr den Ordner vorher eindeutig umbenennen. In dem Ordner befindet sich die Datei index.html. Den vollständigen Link inlusive der index.html in dem Beitrag einfügen. Der Klick darauf öffnet das 360-Grad-Foto.

Beispiel: Lissabon, Aussichtspunkt Pilar 7

Noch besser sieht eine Einbettung aus. Dazu kann man den iframe-Befehl verwenden.

Dann sieht das Ganze so aus.

Ich bin kein Code-Profi. Vermutlich gibt es inzwischen eine elegantere Methode der Einbettung, die sich mir nach Studium der komplexen Marzipano-Dokumentation aber nicht erschließt.

Beim 360-Grad-Video, das wir auf Youtube heraufgeladen haben, ist alles viel einfacher. Wir müssen lediglich die URL einfügen, fertig.

Nachtrag

Inzwischen gibt es das WordPress-Plugin WP VR, das auch super funktioniert. Es hat über 7000 Nutzer und ein Rating von 4,7 von 5.0. (Stand: 19.9.20)

Auch in der kostenfreien Version ist schon viel möglich. Mein Beispiel ist ein 360-Grad-Foto in der Region Marken in Italien:

[wpvr id=“73489″]

Ingo Paszkowsky

360-Grad-Video – Lissabon Aussichtspunkt Pilar 7 – Video auf Youtube

Titelbild / Lissabon Pilar 7. Aufnahme mit Samsung Gear 360 (2017). Die beiden Einzelbilder der zwei Kameras. Die Aufnahme muss noch zu einem Bild zusammengeführt werden (Stitching). / Foto: Ingo Paszkowsky