VideoPlayer component

The VideoPlayer component displays and controls playback of meeting recordings captured by Notetaker. It wraps a native HTML5 video element and supports common features like autoplay, mute, looping, and native controls.

Using the VideoPlayer component

This is only a preview.

import React from "react";
import { VideoPlayer } from "@nylas/react";
// import '@nylas/react/style.css' // to style the component
function App() {
  return (
    <VideoPlayer
      videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      className="custom-video-player"
      poster="https://via.placeholder.com/640x360.png?text=Video+Poster"
      autoPlay={false}
      muted={false}
      loop={false}
      videoType="video/mp4"
      onTimeUpdate={(currentTime) => console.log("Time update:", currentTime)}
      onSeek={(newTime) => console.log("Seeked to:", newTime)}
      onPlay={() => console.log("Video started playing")}
      onPause={() => console.log("Video paused")}
      onEnded={() => console.log("Video ended")}
    />
  );
}

export default App;

Integrating with Transcript component

When you use the VideoPlayer and Transcript components on the same page, they automatically synchronize. This means…

• Clicking on a timestamp in the transcript will seek the video recording to that position.
• The transcript will automatically scroll to and highlight the current segment as the recording plays.
• Seeking in the video player updates the active transcript segment.

VideoPlayer properties

autoPlay?

Description	Set the video to start playing automatically.
Type	boolean
Default	false

className?

Description	One or more additional class names for the video element.
Type	string

loop?

Description	Set the video to loop back to the beginning when it ends.
Type	boolean
Default	false

muted?

Description	Mute the sound on the video.
Type	boolean
Default	false

onEnded?

Description	A callback generated when the video playback ends.
Type	() => void

onPause?

Description	A callback generated when the user pauses the video.
Type	() => void

onPlay?

Description	A callback generated when the video starts playing.
Type	() => void

onSeek?

Description	A callback generated when the user moves to a new time in the recording. Receives the new time in seconds.
Type	(newTime: number) => void

onTimeUpdate?

Description	A callback generated for every time update. Receives the current playback time in seconds.
Type	(currentTime: number) => void

poster?

Description	The URL of the image that displays before the video plays.
Type	string

videoType?

Description	The MIME type of the video (for example, 'video/mp4'). Used for the <source> tag if videoUrl is provided.
Type	string

videoUrl

Description	The URL of the video. If provided, a <source> tag is rendered with this URL.
Type	string