उत्पाद लूप – एम्बेडिंग
आप अपने उत्पाद का रिकॉर्ड किया गया 360° वीडियो आसानी से वेबसाइट पर एम्बेड कर सकते हैं। उत्पाद रिकॉर्ड करने के लिए viewer या configurator मेनू के रिकॉर्डिंग टूल इस्तेमाल करें। रिकॉर्डिंग सेटिंग में गुणवत्ता, ब्राउज़र का आकार और कैमरे का व्यवहार तय करें, फिर रिकॉर्ड दबाएँ। वीडियो लूप तैयार होने पर डाउनलोड करें और उदाहरण के अनुसार पृष्ठ पर जोड़ें।
वीडियो सेटिंग का उदाहरण
नोट: डिवाइस के विनिर्देश, ब्राउज़र और आवश्यकताओं के अनुसार सेटिंग बदल सकती हैं
- रिकॉर्डिंग कोडेक:
webm / VP9के लिए html5 वीडियो समर्थन जाँच सकते हैं - गुणवत्ता:
High - फ़्रेम दर:
60 fps - रिकॉर्डिंग मोड:
Product 360 - Model Loop - गति:
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>