Λοιπά — Βίντεο 360°

Επαναλαμβανόμενο βίντεο προϊόντος — Ενσωμάτωση

Μπορείτε εύκολα να ενσωματώσετε καταγεγραμμένο βίντεο 360° του προϊόντος σας στον ιστότοπο. Χρησιμοποιήστε τα εργαλεία καταγραφής από το μενού Viewer ή Configurator. Προσαρμόστε ποιότητα καταγραφής, μέγεθος παραθύρου και συμπεριφορά κάμερας στις ρυθμίσεις καταγραφής και ξεκινήστε την καταγραφή. Όταν είναι έτοιμο το επαναλαμβανόμενο βίντεο, κατεβάστε το και ακολουθήστε το παράδειγμα για να το προσθέσετε στη σελίδα.

Παράδειγμα ρυθμίσεων βίντεο

Σημείωση: Οι ρυθμίσεις μπορεί να διαφέρουν ανάλογα με τη συσκευή, το πρόγραμμα περιήγησης και τις απαιτήσεις

  • Κωδικοποιητές καταγραφής: webm / VP9· ελέγξτε την υποστήριξη βίντεο HTML5
  • Ποιότητα: High
  • Ρυθμός καρέ: 60 fps
  • Λειτουργία καταγραφής: Product 360 - Model Loop
  • Ταχύτητα: Medium
Άνοιγμα σε νέα καρτέλα
Τεκμηρίωση λοιπών — Ενσωμάτωση βίντεο 360° — ζωντανή προεπισκόπηση / επίδειξη ενσωμάτωσης (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>
Άνοιγμα έργου στο GitHubΛογότυπο GitHub