Best Practices

Get the most out of RIXL with these proven best practices. Whether you're just getting started or optimizing an existing workflow, these guidelines will help you achieve better performance, quality, and efficiency.

Media Processing Best Practices

Video Format Selection

Choose the right format for best processing speed and quality:

Quality Tier Selection

Choose the right quality tier based on your content and audience:

File Preparation Guidelines

Platform Workflow Best Practices

Project Organization

Structure your projects for scalability and team collaboration:

Media Library Organization

Follow these organization strategies for efficient content management:

Folder Structure Best Practices:

• Organize by project or campaign
• Use consistent naming conventions
• Create date-based folders for time-sensitive content
• Separate content types (videos, images, documents)

Tagging Strategy:

• Use descriptive, searchable tags
• Create tag hierarchies for complex categorization
• Apply bulk tagging for efficiency
• Include purpose tags (hero, thumbnail, background)

Content Lifecycle Management:

• Start with draft status for review
• Use approval workflows for team content
• Archive unused or outdated content
• Regular cleanup of duplicate content

Team Collaboration

Set up effective team workflows:

SDK Implementation Best Practices

Installation and Setup

Follow proper installation procedures for reliable performance:

Package Management:

# Use your preferred package manager
npm install @rixl/videosdk-react
# or
yarn add @rixl/videosdk-react

TypeScript Configuration:

• Enable strict mode for better type safety
• Use provided TypeScript definitions
• Import components with proper typing

Component Usage Patterns

Video Component Best Practices:

import {Video} from '@rixl/videosdk-react';

// Basic implementation
<Video
  id="your-media-id"
  className="w-full h-auto rounded-lg"
  autoPlay={false}
  muted={false}
  progressBar={true}
  allowFullscreen={true}
/>

// Advanced configuration
<Video
  id="your-media-id"
  className="aspect-video"
  autoPlay={true}
  muted={true}
  loop={true}
  progressBar={false}
  allowPlayPause={false}
  // For background videos
/>

// Performance optimized
<Video
  id="your-media-id"
  className="w-full h-auto"
  // Let RIXL handle quality selection
  // Enable lazy loading for off-screen content
  loading="lazy"
/>

Image Component Best Practices:

import { Image } from '@rixl/videosdk-react';

// Optimized image usage
<Image
  id="your-image-id"
  alt="Descriptive alt text for accessibility"
  className="w-full h-auto object-cover"
  // Automatic format selection (WebP, AVIF)
  // Responsive sizing
  // Thumbhash placeholders
/>

Accessibility Implementation

Ensure your media components are accessible:

Browser Compatibility

Ensure broad compatibility:

• Modern Browsers: Full feature support (Chrome 88+, Firefox 85+, Safari 14+, Edge 88+)
• Mobile Browsers: Native iOS Safari and Android Chrome support
• Graceful Fallbacks: Automatic degradation for older browsers
• Testing: Test across target browsers and devices

API Integration Best Practices

Authentication and Security

Protect your API keys and implement secure practices:

Security Guidelines:

• Store API keys in environment variables
• Use different keys for development and production
• Rotate keys regularly
• Monitor API key usage for suspicious activity
• Implement proper error handling for authentication failures

Upload Implementation

Follow proven patterns for reliable uploads:

Monitoring and Status Tracking

Implement effective monitoring:

// Example status monitoring pattern
const monitorProcessing = async (videoId) => {
  const pollInterval = 5000; // 5 seconds

  while (true) {
    const status = await checkProcessingStatus(videoId);

    if (status.state === 'completed') {
      break;
    } else if (status.state === 'failed') {
      handleProcessingError(status.error);
      break;
    }

    // Adjust polling frequency based on processing stage
    await new Promise(resolve => setTimeout(resolve, pollInterval));
  }
};

Monitoring Best Practices:

• Use smart polling intervals (start frequently, reduce over time)
• Implement exponential backoff for errors
• Cache status responses briefly to reduce API calls
• Clean up monitoring resources when complete
• Batch monitors multiple items efficiently

Security and Performance Best Practices

Content Security

Protect your content and maintain security:

Performance Optimization

Maximize delivery speed and efficiency:

What's Next?