Boucle de produit – Intégration
Vous pouvez facilement intégrer une vidéo enregistrée de votre produit à 360° sur votre site. Utilisez nos outils d’enregistrement disponibles dans le menu de Viewer ou Configurator pour filmer votre produit. Réglez la qualité d’enregistrement, les dimensions du navigateur et le comportement de la caméra dans les paramètres d’enregistrement, puis lancez l’enregistrement. Une fois la boucle vidéo prête, téléchargez-la et suivez l’exemple pour l’ajouter à votre page.
Exemple de paramètres vidéo
Remarque : les paramètres peuvent varier selon les caractéristiques de l’appareil, le navigateur et vos besoins
- Codecs d’enregistrement :
webm / VP9; consultez la prise en charge vidéo HTML5 - Qualité :
High - Fréquence d’images :
60 fps - Mode d’enregistrement :
Product 360 - Model Loop - Vitesse :
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>