# General Translation Integrations: Riproduzione delle registrazioni
URL: https://generaltranslation.com/it/docs/integrations/rrweb/guides/replaying-recordings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Come incorporare un bundle gt-rrweb con il componente React o con l'API del player DOM e come controllare il cambio di impostazione regionale.

Incorpora un tour guidato registrato e permetti agli spettatori di guardarlo nella propria impostazione regionale.

Il player renderizza la registrazione con controlli di riproduzione, un cursore basato sui clic, lo scorrimento della timeline, temi chiaro e scuro, riproduzione a schermo intero e controlli dell'impostazione regionale quando il bundle contiene metadati sull'impostazione regionale. Usa il componente React nelle viste React oppure la funzione DOM quando gestisci autonomamente il ciclo di vita del player; entrambi provengono da `gt-rrweb/replay`.

## Replay in React [#react]

Renderizza [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer) con il bundle. Il player occupa tutta la larghezza del contenitore. Una registrazione con riquadro fornisce le proprie proporzioni, mentre una registrazione senza riquadro mantiene l'altezza fornita dall'elemento genitore: dimensiona quindi l'elemento genitore oppure passa `style`.

```tsx title="src/Walkthrough.tsx"
import { GTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

export function Walkthrough() {
  return (
    <GTReplayer
      bundle={bundle}
      initialLocale="fr"
      switchLocalesAllowed
      style={{ height: '480px' }}
    />
  );
}
```

`initialLocale` viene applicato solo se tale impostazione regionale è presente in `bundle.locales`; in caso contrario la riproduzione parte con la sorgente impostazione regionale. Il componente ricrea il player quando `bundle`, `initialLocale`, `switchLocalesAllowed` o `debug` cambiano.

Se hai memorizzato solo `bundle.events`, passa quegli eventi come bundle:

```tsx
<GTReplayer bundle={{ events }} />
```

Le registrazioni create con `gt-rrweb` incorporano nel flusso di eventi i metadati di impostazione regionale e di overlay, perciò anche un export contenente i soli eventi può riprodurre contenuti localizzati.

## Replay con la DOM API [#dom-api]

Chiama [`createGTReplayer()`](/docs/integrations/rrweb/reference/replayer#create-gt-replayer) passando un elemento del DOM in qualsiasi applicazione browser. Conserva l&#39;handle restituito e chiama `destroy()` quando la vista host viene rimossa.

L&#39;entry point `gt-rrweb/replay` esporta anche il React wrapper, quindi il tuo progetto deve installare React e React DOM 18 o versioni successive anche quando chiami direttamente la DOM API.

```ts title="src/walkthrough.ts"
import { createGTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

const container = document.querySelector<HTMLElement>('#walkthrough');
if (!container) throw new Error('Missing walkthrough container');

const player = createGTReplayer(container, bundle, {
  initialLocale: 'fr',
});

// Quando la vista host viene rimossa:
player.destroy();
```

## Controllare il cambio di impostazione regionale [#locale-switching]

I controlli delle impostazioni regionali compaiono quando il bundle include `locales` e `switchLocalesAllowed` non è `false`. Il cambio sostituisce l&#39;overlay di testo in-place, senza ricostruire la sessione rrweb.

* Imposta `switchLocalesAllowed={false}` per vincolare un embed a un&#39;unica impostazione regionale.
* Un bundle privo di metadati sulle impostazioni regionali o di overlay riproduce la sorgente registrata così com&#39;è.

## Ispezionare i bundle in locale [#debug]

Attiva `debug` durante lo sviluppo per trascinare un file JSON di registrazione sul player e sostituire il bundle attivo. I JSON non validi e i file che non sono registrazioni mostrano un avviso anziché sostituire la sessione.

Lascia `debug` disattivato per gli embed comuni; il valore predefinito è `false`.

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/recording-walkthroughs

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.