Prebuilt video player setup

React / Next.js
Other Frameworks

Import VeltVideoPlayer component

Import the VeltVideoPlayer component.

import { VeltVideoPlayer} from '@veltdev/react'

Add src to VeltVideoPlayer

Add your video src URL to the src attribute of the VeltVideoPlayer component.There are a few other properties:

darkMode - boolean to enable dark mode
sync - boolean to enable sync mode

<VeltVideoPlayer 
  src={"https://firebasestorage.googleapis.com/v0/b/snippyly.appspot.com/o/external%2Fvelt.mp4?alt=media&token=d8af2697-c797-4610-b886-ca510b231097"} 
  darkMode={false}
  sync={true}
/>

Add your video src URL to the src attribute of the <velt-video-player> component.There are a few other properties:

dark-mode - boolean to enable dark mode
sync - boolean to enable sync mode

<!-- dark-mode="false" - to disable dark mode -->
<!-- sync="true" - to enable sync mode -->
<velt-video-player 
  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
  dark-mode="false"
  sync="true"
>
</velt-video-player>

import {
  VeltVideoPlayer
} from '@veltdev/react';

export default function App() {

  return (
    <div>
      <VeltVideoPlayer 
        src={"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"} 
        darkMode={false}
        sync={true}
      />
    </div>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Video Player documentation</title>
  </head>
  <body>
    <!-- dark-mode="false" - to disable dark mode -->
    <!-- sync="true" - to enable sync mode -->
    <velt-video-player 
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
        dark-mode="false"
        sync="true"
    >
    </velt-video-player>
  </body>
</html>

Lottie Player comments setup Custom video player comments setup

⌘I