Pętla produktu – osadzanie
Możesz łatwo osadzić nagrany film 360° swojego produktu na stronie internetowej. Skorzystaj z narzędzi nagrywania dostępnych w menu viewer lub konfiguratora, aby uchwycić swój produkt. Dostosuj jakość nagrania, rozmiar przeglądarki i zachowanie kamery w ustawieniach nagrywania, a następnie rozpocznij nagrywanie. Gdy pętla wideo będzie gotowa, pobierz ją i postępuj zgodnie z przykładem, aby dodać ją do strony.
Przykładowe ustawienia wideo
Uwaga: ustawienia mogą się różnić w zależności od specyfikacji urządzenia, przeglądarki i wymagań
- Kodeki nagrywania:
webm / VP9możesz sprawdzić obsługę wideo HTML5 - Jakość:
High - Liczba klatek:
60 fps - Tryb nagrywania:
Product 360 - Model Loop - Prędkość:
Medium
index.html
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
8 <style>
9 * {
10 box-sizing: border-box;
11 }
12
13 html,
14 body,
15 #root {
16 width: 100%;
17 height: 100%;
18 margin: 0;
19 padding: 0;
20 }
21
22 body{
23 display: grid;
24 justify-content: center;
25 align-items: center;
26 }
27
28 video {
29 background-color: white !important;
30 outline: none;
31 clip-path: inset(-10px);
32 outline:none;
33 border: none;
34 }
35
36 .vjs-poster{
37 background-color: transparent !important;
38 }
39
40 video:focus {
41 outline:none;
42 }
43 </style>
44 <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
45 </head>
46 <body>
47 <script src="https://unpkg.com/focus-visible"></script>
48 <video
49 id="my-video"
50 class="video-js"
51 loop autoplay muted
52 preload="auto"
53 width="348"
54 height="348"
55 poster="https://raw.githubusercontent.com/alterproduct/examples-vanilla-js/refs/heads/main/other-video-360-product-loop/assets/video-360-loop-embeding-poster.png"
56 data-setup="{}"
57 >
58 <source src="https://github.com/alterproduct/examples-vanilla-js/raw/refs/heads/main/other-video-360-product-loop/assets/video-360-loop-embeding.webm" type="video/webm"/>
59 <p class="vjs-no-js">
60 To view this video please enable JavaScript, and consider upgrading to a web browser that
61 <a href="https://videojs.com/html5-video-support/" target="_blank">
62 supports HTML5 video
63 </a>
64 </p>
65 </video>
66 <script src="https://vjs.zencdn.net/8.16.1/video.js"></script>
67 </body>
68 </html>