أخرى – فيديو 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