Produktschleife – Einbettung
Du kannst ein aufgenommenes 360°-Video deines Produkts ganz einfach auf deiner Website einbetten. Verwende dafür unsere Aufnahmefunktionen im Menü von Viewer oder Configurator. Passe Aufnahmequalität, Browsergröße und Kameraverhalten in den Aufnahmeeinstellungen an und starte die Aufnahme. Sobald die Videoschleife fertig ist, lade sie herunter und füge sie anhand des Beispiels deiner Seite hinzu.
Beispiel für Videoeinstellungen
Hinweis: Die Einstellungen können je nach Gerätespezifikationen, Browser und Anforderungen abweichen
- Aufnahme-Codecs:
webm / VP9, siehe HTML5-Videounterstützung - Qualität:
High - Bildrate:
60 fps - Aufnahmemodus:
Product 360 - Model Loop - Geschwindigkeit:
Medium
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Docs Basics - Video 360° product loop</title>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <style>
8 * { box-sizing: border-box; }
9 html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; }
10 body { display: grid; justify-content: center; align-items: center; }
11 video { background-color: white !important; outline: none; border: none; }
12 .vjs-poster { background-color: transparent !important; }
13 video:focus { outline:none; }
14 </style>
15 <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
16 </head>
17 <body>
18 <video
19 id="my-video"
20 class="video-js"
21 loop autoplay muted
22 preload="auto"
23 width="348"
24 height="348"
25 poster="https://alterproduct.com/media/video-360-loop-poster.png"
26 data-setup="{}"
27 >
28 <source src="https://alterproduct.com/media/video-360-loop.webm" type="video/webm"/>
29 <p class="vjs-no-js">
30 To view this video please enable JavaScript, and consider upgrading to a web browser that
31 <a href="https://videojs.com/html5-video-support/" target="_blank" rel="noopener noreferrer">
32 supports HTML5 video
33 </a>
34 </p>
35 </video>
36 <script src="https://vjs.zencdn.net/8.16.1/video.js"></script>
37 </body>
38</html>