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
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>React - App.js
import React, { useEffect, useRef } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import './Styles.css';
const App = () => {
const videoRef = useRef(null);
const playerRef = useRef(null);
useEffect(() => {
if (!playerRef.current && videoRef.current) {
const videoElement = document.createElement('video-js');
videoElement.classList.add('video-js');
videoElement.setAttribute('poster', 'https://alterproduct.com/media/video-360-loop-poster.png');
videoElement.style.width = '348px';
videoElement.style.height = '348px';
videoRef.current.appendChild(videoElement);
playerRef.current = videojs(videoElement, {
autoplay: true,
loop: true,
muted: true,
controls: false,
preload: 'auto',
responsive: false,
fluid: false,
sources: [
{
src: 'https://alterproduct.com/media/video-360-loop.webm',
type: 'video/webm',
},
],
});
}
return () => {
if (playerRef.current && !playerRef.current.isDisposed()) {
playerRef.current.dispose();
playerRef.current = null;
}
};
}, []);
return <div className="videoContainer" ref={videoRef} />;
};
export default App;React - Styles.css
* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; }
.videoContainer {
width: 100%;
height: 100%;
display: grid;
justify-content: center;
align-items: center;
}
video {
background-color: white !important;
outline: none;
border: none;
}
.vjs-poster { background-color: transparent !important; }
video:focus { outline: none; }