Video Controls & Media Management

Manage video content within your virtual spaces to create dynamic, multimedia experiences. Video controls are essential for interactive presentations, product demonstrations, and immersive storytelling within virtual environments.

getVideos

getVideos([callback: Function])

Returns an array of all video IDs currently available in the virtual space. Use these IDs to control individual video elements.

api.getVideos(function(videoIds){
  console.log('Available videos:', videoIds); // ['video_1', 'video_2', ...]
  
  // Create video control interface
  videoIds.forEach(videoId => {
    console.log('Video available:', videoId);
  });
});

---

getVideoProgressionEvents

getVideoProgressionEvents(videoId: string, [callback: Function])

Enables progression events for a specific video, allowing you to track playback progress and create synchronized experiences.

api.getVideoProgressionEvents('video_1', function(){
  console.log('Video progression events enabled for video_1');
});

// Listen for progression events
api.on('video.progression', function(data) {
  console.log('Video progress:', data.currentTime, '/', data.duration);
});

---

stopVideoProgressionEvents

stopVideoProgressionEvents(videoId: string, [callback: Function])

Disables progression events for a specific video to reduce event overhead when detailed tracking is not needed.

api.stopVideoProgressionEvents('video_1', function(){
  console.log('Video progression events stopped for video_1');
});

---

playVideo

playVideo(videoId: string, [callback: Function])

Starts playback of the specified video. Perfect for creating interactive video experiences and synchronized presentations.

api.playVideo('video_1', function(){
  console.log('Video playback started');
  
  // Update UI to show playing state
  updateVideoControls('video_1', 'playing');
});

---

pauseVideo

pauseVideo(videoId: string, [callback: Function])

Pauses playback of the specified video while maintaining the current playback position.

api.pauseVideo('video_1', function(){
  console.log('Video playback paused');
  
  // Update UI to show paused state
  updateVideoControls('video_1', 'paused');
});

---

setVideoTime

setVideoTime(videoId: string, time: number, [callback: Function])

Sets the current playback time for a video in seconds. Useful for creating chapter navigation or synchronized video experiences.

// Jump to 30 seconds into the video
api.setVideoTime('video_1', 30, function(){
  console.log('Video time set to 30 seconds');
});

// Skip to specific chapters
function jumpToChapter(videoId, chapterTime) {
  api.setVideoTime(videoId, chapterTime, function(){
    console.log(`Jumped to chapter at ${chapterTime}s`);
  });
}

---

muteVideo

muteVideo(videoId: string, [callback: Function])

Mutes the audio of a specific video while continuing visual playback. Useful for creating silent video backgrounds or managing audio conflicts.

api.muteVideo('video_1', function(){
  console.log('Video audio muted');
  
  // Update UI to show muted state
  updateVideoMuteButton('video_1', true);
});

---

unmuteVideo

unmuteVideo(videoId: string, [callback: Function])

Enables audio for a specific video, restoring sound to the video playback.

api.unmuteVideo('video_1', function(){
  console.log('Video audio enabled');
  
  // Update UI to show unmuted state
  updateVideoMuteButton('video_1', false);
});

Video Integration Examples

Interactive Video Gallery:

// Create a video gallery with synchronized controls
api.getVideos(function(videos) {
  videos.forEach(videoId => {
    createVideoControls(videoId);
  });
});

function createVideoControls(videoId) {
  // Enable progression tracking
  api.getVideoProgressionEvents(videoId);
  
  // Create play/pause functionality
  document.getElementById(`play-${videoId}`).onclick = () => {
    api.playVideo(videoId);
  };
  
  document.getElementById(`pause-${videoId}`).onclick = () => {
    api.pauseVideo(videoId);
  };
}

Synchronized Presentation:

// Create a presentation with timed video segments
const presentationChapters = [
  { videoId: 'intro_video', startTime: 0 },
  { videoId: 'demo_video', startTime: 45 },
  { videoId: 'conclusion_video', startTime: 120 }
];

function playChapter(chapterIndex) {
  const chapter = presentationChapters[chapterIndex];
  api.setVideoTime(chapter.videoId, chapter.startTime);
  api.playVideo(chapter.videoId);
}