Ürün döngüsü — Yerleştirme
Kaydettiğiniz 360° ürün videosunu sitenize kolayca yerleştirebilirsiniz. Ürünü kaydetmek için Viewer veya Configurator menüsündeki kayıt araçlarını kullanın. Kayıt ayarlarından kaliteyi, tarayıcı boyutunu ve kamera davranışını düzenleyip kaydı başlatın. Video döngüsü hazır olduğunda indirin ve sayfanıza eklemek için örneği izleyin.
Örnek video ayarları
Not: Ayarlar cihaz özelliklerine, tarayıcıya ve gereksinimlere göre değişebilir
- Kayıt kodekleri:
webm / VP9; HTML5 video desteğini kontrol edebilirsiniz - Kalite:
High - Kare hızı:
60 fps - Kayıt modu:
Product 360 - Model Loop - Hız:
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>