Skip to main content

Teyuto SDK - Video Module

Overview​

The Teyuto.video module is a core component of the Teyuto SDK, providing comprehensive access to video-related data and functionalities. This module allows developers to control video playback, access video metadata, and respond to various video events within the Teyuto platform.

Key Features​

  • Video playback control
  • Access to video metadata
  • Event handling for video interactions
  • Video quality and volume management
  • Fullscreen control

Properties​

The Teyuto.video object contains various properties that provide information about the current video:

  • id: Video's unique identifier
  • title: Video title
  • description: Short description of the video
  • full_description: Full description of the video
  • date: Upload date of the video
  • duration: Duration of the video
  • privacy: Privacy setting of the video
  • source: URL of the video source
  • img_preview: URL of the video preview image
  • total_views: Total number of views
  • total_likes: Total number of likes
  • total_comments: Total number of comments
  • source_type: Type of video source (e.g., "application/x-mpegURL")
  • sprite: Thumbnail sprite information (if available)
  • popups: Array of popup information for the video

Methods​

onReady(callback)​

Executes the provided callback function when the video data is ready.

Teyuto.video.onReady(function(video) {
    console.log("Video data loaded:", video);
});

Playback Control​

  • play(): Starts playing the video
  • pause(): Pauses the video
  • setCurrentTime(time): Sets the current playback time (in seconds)
  • getCurrentTime(): Gets the current playback time
  • getDuration(): Gets the total duration of the video

Volume Control​

  • setVolume(volume): Sets the volume (0 to 1)
  • getVolume(): Gets the current volume
  • mute(): Mutes the video
  • unmute(): Unmutes the video

Fullscreen Control​

  • enterFullscreen(): Enters fullscreen mode
  • exitFullscreen(): Exits fullscreen mode
  • isFullscreen(): Checks if the video is in fullscreen mode

Event Handling​

  • on(eventName, callback): Adds an event listener for specific video events

Usage Examples​

1. Basic Video Playback Control​

Teyuto.video.onReady(function(video) {
    console.log("Now playing:", video.title);
    
    // Play the video
    video.play();
    
    // Pause after 5 seconds
    setTimeout(() => {
        video.pause();
        console.log("Paused at:", video.getCurrentTime());
    }, 5000);
});

2. Custom Video Player Controls​

document.getElementById('playBtn').addEventListener('click', () => Teyuto.video.play());
document.getElementById('pauseBtn').addEventListener('click', () => Teyuto.video.pause());

document.getElementById('seekBtn').addEventListener('click', () => {
    const seekTime = 30; // Seek to 30 seconds
    Teyuto.video.setCurrentTime(seekTime);
});

document.getElementById('volumeSlider').addEventListener('input', (e) => {
    Teyuto.video.setVolume(e.target.value / 100);
});

document.getElementById('fullscreenBtn').addEventListener('click', () => {
    if (Teyuto.video.isFullscreen()) {
        Teyuto.video.exitFullscreen();
    } else {
        Teyuto.video.enterFullscreen();
    }
});

3. Displaying Video Metadata​

Teyuto.video.onReady(function(video) {
    document.getElementById('videoInfo').innerHTML = `
        <h2>${video.title}</h2>
        <p>${video.description}</p>
        <img src="${video.img_preview}" alt="Video Preview">
        <p>Views: ${video.total_views}</p>
        <p>Likes: ${video.total_likes}</p>
        <p>Comments: ${video.total_comments}</p>
    `;
});

4. Handling Video Events​

Teyuto.video.onReady(function(video) {
    video.on('play', function(data) {
        console.log("Video started playing at", data.currentTime);
    });

    video.on('pause', function(data) {
        console.log("Video paused at", data.currentTime);
    });

    video.on('ended', function() {
        console.log("Video playback completed");
        // Implement post-video actions here
    });

    video.on('timeupdate', function(data) {
        document.getElementById('progressBar').style.width = 
            (data.currentTime / video.getDuration() * 100) + '%';
    });
});

Best Practices​

  1. Always use the onReady method to ensure video data is available before accessing it.
  2. Handle potential errors or unavailable video gracefully.
  3. Respect video privacy settings when implementing custom functionalities.
  4. Optimize event listeners, especially for frequently triggered events like 'timeupdate'.
  5. Provide fallback content or messages for unsupported features or video formats.
  6. Consider mobile and touch devices when implementing custom video controls.

Conclusion​

The Teyuto.video module offers a powerful set of tools for controlling and interacting with videos on the Teyuto platform. By leveraging this module, developers can create rich, interactive video experiences, customize video players, and implement advanced video-related features in their Teyuto-powered applications.