产品循环视频 — 嵌入
你可以轻松地在网站中嵌入录制好的 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>