Player Events

1import { MP4EPlayer } from '@mp4e/react';
2
3<MP4EPlayer
4  src="/video.mp4"
5
6  // Single event handler for ALL engine events
7  onEvent={(event, data) => {
8    switch (event) {
9      case 'playback:ready':
10        console.log('Player ready, duration:', data.duration);
11        break;
12      case 'state:playing':
13        console.log(data ? 'Playing' : 'Paused');
14        break;
15      case 'object:click':
16        console.log('Clicked:', data.objectId, data.objectLabel);
17        break;
18      case 'variable:changed':
19        console.log(data.variableName, ':', data.previousValue, '->', data.newValue);
20        break;
21    }
22  }}
23/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'playback:ready':
6        console.log('Player ready, duration:', data.duration, 'seconds');
7        break;
8      case 'metadata:loaded':
9        console.log('Objects:', Object.keys(data.objects || {}).length);
10        console.log('Layers:', data.layers?.length);
11        break;
12      case 'playback:firstPlay':
13        console.log('User started watching');
14        analytics.track('video_start');
15        break;
16    }
17  }}
18/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'state:playing':
6        console.log(data ? 'Playing' : 'Paused');
7        break;
8      case 'playback:ended':
9        console.log('Video ended');
10        break;
11      case 'playback:timeUpdate':
12        updateProgressBar(data.time);
13        break;
14      case 'playback:seeking':
15        console.log('Seeking:', data.fromTime, '->', data.toTime);
16        break;
17      case 'playback:seeked':
18        console.log('Seeked to:', data.currentTime);
19        break;
20      case 'playback:buffering':
21        if (data) showLoadingSpinner();
22        else hideLoadingSpinner();
23        break;
24      case 'state:volume':
25        console.log('Volume:', data);
26        break;
27      case 'state:muted':
28        console.log(data ? 'Muted' : 'Unmuted');
29        break;
30      case 'state:playbackRate':
31        console.log('Speed:', data + 'x');
32        break;
33      case 'fullscreen:changed':
34        console.log(data ? 'Fullscreen' : 'Windowed');
35        break;
36    }
37  }}
38/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'object:visible':
6        console.log('Object visible:', data.objectId, data.objectLabel);
7        analytics.track('product_impression', { id: data.objectId });
8        break;
9      case 'object:hidden':
10        console.log('Hidden:', data.objectId);
11        break;
12      case 'object:click':
13        console.log('Clicked:', data.objectId, data.objectLabel);
14        break;
15      case 'object:hover':
16        console.log('Hovering:', data.objectId);
17        break;
18      case 'object:firstSeen':
19        console.log('First time seeing:', data.objectLabel);
20        break;
21    }
22  }}
23/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'overlay:show':
6        console.log('Overlay shown:', data.overlayId, data.overlayType);
7        break;
8      case 'overlay:hide':
9        console.log('Hidden:', data.overlayId);
10        break;
11      case 'overlay:click':
12        console.log('Clicked:', data.overlayId);
13        break;
14      case 'plugin:event':
15        console.log('Plugin event:', data.eventName, 'from:', data.pluginId);
16        if (data.eventName === 'quiz:answer') {
17          handleQuizAnswer(data.data);
18        }
19        break;
20    }
21  }}
22/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'scene:enter':
6        console.log('Entered:', data.sceneId, data.sceneName);
7        updateBreadcrumbs(data.sceneId);
8        break;
9      case 'scene:exit':
10        console.log('Exiting:', data.sceneId);
11        break;
12      case 'scene:start':
13        console.log('Playhead reached start of:', data.sceneId);
14        break;
15      case 'scene:end':
16        console.log('Playhead reached end of:', data.sceneId);
17        break;
18      case 'scene:loop':
19        console.log('Loop #', data.loopCount, 'for scene:', data.sceneId);
20        break;
21    }
22  }}
23/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    if (event === 'layer:activate') {
5      console.log('Layer activated:', data.layerId, data.overlayCount, 'overlays');
6    }
7    if (event === 'layer:deactivate') {
8      console.log('Layer deactivated:', data.layerId);
9    }
10  }}
11/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'variable:changed':
6        console.log(data.variableName, ':', data.previousValue, '->', data.newValue);
7        // Sync with external state
8        if (data.variableName === 'cartTotal') {
9          updateCartUI(data.newValue);
10        }
11        break;
12      case 'timer:start':
13        console.log('Timer started:', data.timerName, 'target:', data.target);
14        break;
15      case 'timer:complete':
16        console.log('Timer completed:', data.timerName);
17        showTimeoutMessage();
18        break;
19      case 'timer:pause':
20        console.log('Timer paused at:', data.currentValue);
21        break;
22    }
23  }}
24/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'state:error':
6        if (data) {
7          console.error('Engine error:', data);
8          errorReporter.capture({ code: 'ENGINE_ERROR', message: data });
9        }
10        break;
11      case 'metadata:error':
12        console.error('Metadata error:', data.message);
13        // Fall back to non-interactive playback
14        break;
15      case 'plugin:error':
16        console.warn('Plugin error:', data.pluginId, data.error);
17        break;
18    }
19  }}
20/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'display:show':
6        console.log('Display shown:', data.displayId, 'type:', data.eventType);
7        if (data.objectId) {
8          console.log('For object:', data.objectId);
9        }
10        break;
11      case 'display:hide':
12        console.log('Display hidden:', data.displayId);
13        break;
14    }
15  }}
16/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'dialog:show':
6        console.log('Dialog opened:', data.type, data.title);
7        break;
8      case 'dialog:hide':
9        console.log('Dialog closed:', data.type, 'result:', data.result);
10        if (data.type === 'confirm' && data.result === true) {
11          console.log('User confirmed action');
12        }
13        break;
14    }
15  }}
16/>

1<MP4EPlayer
2  src="/video.mp4"
3  enableBlobCache={true}
4  onEvent={(event, data) => {
5    if (event === 'blobCache:status') {
6      switch (data.state) {
7        case 'downloading':
8          console.log('Caching video:', Math.round((data.progress || 0) * 100) + '%');
9          break;
10        case 'cached':
11          console.log('Video cached, size:', data.fileSize, 'bytes');
12          break;
13        case 'error':
14          console.warn('Blob cache error');
15          break;
16        case 'skipped':
17          console.log('File too large for caching');
18          break;
19      }
20    }
21  }}
22/>

1<MP4EPlayer
2  src="/video.mp4"
3  onEvent={(event, data) => {
4    switch (event) {
5      case 'tracking:show':
6        console.log('Tracking shown:', data.mode, 'for', data.target, data.targetId);
7        if (data.duration) {
8          console.log('Will auto-hide after', data.duration, 'ms');
9        }
10        break;
11      case 'tracking:hide':
12        console.log('Tracking hidden:', data.target, data.targetId);
13        break;
14    }
15  }}
16/>

1import { MP4EPlayer } from '@mp4e/react';
2
3// Subscribe to ALL events using onEvent
4<MP4EPlayer
5  src="/video.mp4"
6  onEvent={(event, data) => {
7    // 'event' contains the event name (e.g. 'playback:ready')
8    // 'data' contains the event payload
9    console.log(`[${event}]`, data);
10
11    // Forward all events to your analytics or logging system
12    analytics.track('mp4e_event', {
13      eventName: event,
14      payload: data,
15      timestamp: Date.now()
16    });
17  }}
18/>