Altele – Video 360°

Video de produs în buclă – încorporare

Poți încorpora ușor pe site un videoclip înregistrat la 360° al produsului. Folosește instrumentele de înregistrare din meniul Viewer sau Configurator pentru a captura produsul. Ajustează calitatea înregistrării, dimensiunea browserului și comportamentul camerei în setările de înregistrare, apoi pornește înregistrarea. Când videoclipul în buclă este gata, descarcă-l și urmează exemplul pentru a-l adăuga pe pagină.

Exemplu de setări video

Notă: setările pot varia în funcție de specificațiile dispozitivului, browser și cerințe

  • Codecuri de înregistrare: webm / VP9; consultă compatibilitatea video HTML5
  • Calitate: High
  • Frecvență de cadre: 60 fps
  • Mod de înregistrare: Product 360 - Model Loop
  • Viteză: Medium
Deschide într-o filă nouă
Documentație Altele - Încorporare video 360° — previzualizare live / demo încorporat (Vanilla JS).
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>
Deschide proiectul pe GitHubSigla GitHub