Produktloop – inbäddning
Du kan enkelt bädda in en inspelad 360°-video av din produkt på webbplatsen. Använd inspelningsverktygen i menyn för Viewer eller Configurator för att spela in produkten. Justera inspelningskvalitet, webbläsarstorlek och kamerabeteende i inspelningsinställningarna och starta sedan inspelningen. När videoloopen är klar laddar du ner den och följer exemplet för att lägga till den på sidan.
Exempel på videoinställningar
Obs! Inställningarna kan variera beroende på enhetens specifikationer, webbläsare och krav
- Inspelningskodekar:
webm / VP9, se stöd för HTML5-video - Kvalitet:
High - Bildfrekvens:
60 fps - Inspelningsläge:
Product 360 - Model Loop - Hastighet:
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>