Custom Video Player Setup
Use this guide to add collaboration into your own custom video player.
Set up Velt Components in your app
You will be using the following components:
Velt Comments
: Renders comments on the DOM.Velt Comment Tool
: Enables or disables adding comments.Velt Reaction Tool
: Enables or disables adding reactions.Velt Comment Player Timeline
: Adds comments bubble over your player seek bar.Velt Comments Sidebar
: Adds a sidebar that shows all comments. Users can also search, filter & navigate to the comments from here.Velt Sidebar Button
: Toggles the sidebar on/off.
Add the Velt Comments
component in the root of your app
Add the Velt Comments
component to the root of your app.
<VeltComments />
Add the Velt Comment Tool
component wherever you want your render the comment tool.
Note you can also provide your own button to this component.
<VeltCommentTool>
<button>
{/* your custom button (optional) */}
</button>
</VeltCommentTool>
Add the Velt Reaction Tool
component wherever you want your render the reaction tool.
- Provide the video player ID on which you want the reactions to be added.
- Add an event handler to handle
onReactionToolClick
events.
<VeltReactionTool videoPlayerId={videoPlayerId}
onReactionToolClick={() => onReactionToolClick()}>
</VeltReactionTool>
Place the Velt Comment Player Timeline
component as a sibling to your video player.
- To show comment bubbles on your player seek bar, add the
Velt Comment Player Timeline
component as a sibling to your video player component. - It will auto adjust to the same width as your video player.
Right now we assume you have a maximum of one velt comment player timeline
component and one sibling video player component per documentID
Ensure that the parent container of velt comment player timeline
doesnt have CSS position value as ‘static’.
<div>
<YourVideoPlayer id="videoPlayerId"/>
<VeltCommentPlayerTimeline videoPlayerId="videoPlayerId"/>
</div>
Add id
to the video player or its parent element.
- If you don’t have access to the raw
<video>
player, you can add anid
to the parent element of the video player.
<div id="videoPlayerId">
<YourVideoPlayer />
<VeltCommentPlayerTimeline videoPlayerId="videoPlayerId"/>
</div>
Add the Velt Comments Sidebar
component.
(Optional) To embed the sidebar in your existing component, set embedMode
prop as true
.
<VeltCommentsSidebar embedMode={true}/>
Add the Velt Sidebar Button
component.
This will open or close the Comment Sidebar.
<VeltSidebarButton>
</VeltSidebarButton>
Set the `total media length` on the `Velt Comment Player Timeline`
You can pass an integer to total media length
using props to represent the total number of frames or seconds in the video:
<VeltCommentPlayerTimeline videoPlayerId="videoPlayerId" totalMediaLength={120} />
Alternatively, you can set this using API method call. This is useful if you first need to grab the total frames from another method before setting it.
const commentElement = client.getCommentElement();
commentElement.setTotalMediaLength(120);
Detect Comment Tool Activation and Set Media Location
- Detect when the user activates the comment tool by adding an event handler to the
onCommentModeChange
event. - Pause your player and set a new
Location
in the Velt SDK. - This ensures that the comments are tied to that particular media frame or timestamp.
- You can pass in a key value pair object that represents the current state of your player.
If you are using the Velt Comment Player Timeline
component, ensure to set the current rounded frame or second in the special key currentMediaPosition
.
currentMediaPosition
is a protected keyword that is used to arrange the comment bubbles on top of the video player timeline in the correct spot<VeltCommentTool onCommentModeChange={(mode) => onCommentModeChange(mode)} />
const onCommentModeChange = (mode) => {
// mode will be `true` if the user has activated the comment tool
// If the comment tool is active, pause the player and set the "location".
if (mode) {
// pause player
setLocation()
}
});
const setLocation = (client) => {
// set currentMediaPosition property on a Location object to represent the current frame
let location = {
currentMediaPosition : 120,
videoPlayerId : "videoPlayerId"
}
//set the Location using the client
client.setLocation(location)
}
Detect Reaction Tool Activation and Set Media Location
- Detect when the user activates the reaction tool by adding an event handler to the
onReactionToolClick
event. - Pause your player and set a new
Location
in the Velt SDK. - This ensures that the reactions are tied to that particular media frame or timestamp.
- You can pass in a key value pair object that represents the current state of your player.
If you are using the
Velt Comment Player Timeline
component, ensure to set the current rounded frame or second in the special keycurrentMediaPosition
.currentMediaPosition
is a protected keyword that is used to arrange the comment bubbles on top of the video player timeline in the correct spot
<VeltReactionTool videoPlayerId={videoPlayerId}
onReactionToolClick={() => onReactionToolClick()}>
</VeltReactionTool>
const onReactionToolClick = () => {
// pause player
setLocation()
});
const setLocation = () => {
// set currentMediaPosition property on a Location object to represent the current frame
let location = {
currentMediaPosition : 120,
videoPlayerId : "videoPlayerId"
}
//set the Location using the client
client.setLocation(location)
}
When the player is played, remove Velt `Location` to remove comments from the media.
Call removeLocation()
when your player starts playing:
const removeLocation = () => {
//remove the location, so the video player can play without comments appearing in frames
client.removeLocation()
}
Navigate to the comment's location in the player from the Sidebar or Timeline.
Add the onCommentClick
event handler on the Velt Comments Sidebar
& Velt Comment Player Timeline
components you added earlier.
The event will give you back the location
object that you had set on the comment.
Use this object to:
- update your player state
- update the SDK’s
location
so the comments associated with thatlocation
are rendered.
Handle click on the Velt Comments Sidebar
:
<VeltCommentsSidebar embedMode={true} onCommentClick={(event) => onCommentClick(event)} />
const onCommentClick = (event) => {
if (event) {
// Get the location object from the event.
const { location } = event;
if (location) {
// Get the media position where the comment was added.
const { currentMediaPosition } = location;
if (currentMediaPosition) {
// Pause the player.
// Seek to the given comment media position.
// Set the Velt Location to the clicked comment location.
client.setLocation(location);
}
}
}
}
Handle click on the Velt Comment Player Timeline
:
<VeltCommentPlayerTimeline videoPlayerId="videoPlayerId" onCommentClick={(event) => onTimelineCommentClick(event)} />
const onTimelineCommentClick = (event) => {
if (event) {
// Get the location object from the event.
const { location } = event;
if (location) {
// Get the media position where the comment was added.
const { currentMediaPosition } = location;
if (currentMediaPosition) {
// Pause the player.
// Seek to the given comment media position.
// Set the Velt Location to the clicked comment location.
client.setLocation(location);
}
}
}
}
The clicked Comment data will be in the following format:
property | type | description |
---|---|---|
documentId | string | The document ID where the comment was added |
location | object | The location where the comment was added |
targetElementId | string | The DOM ID of the target element on which the comment was added |
context | Object | Any context data passed when the comment was added |
Was this page helpful?