Implementing Localized Promo Videos for Global Audiences

The Challenge

Our application needed to support multiple languages for promo videos, ensuring a localized experience for users across different regions. This included translating video content and optimizing video formats for efficient delivery.

The Solution

We implemented a solution involving content localization, component updates for internationalization (i18n), and video format optimization.

Content Localization

A dedicated translations.ts file was created to manage video text content for each supported language (English, Spanish, French, German).

// translations.ts
const videoTranslations = {
 en: {
  title: "Welcome",
  description: "Discover our amazing features in 15 seconds!"
 },
 es: {
  title: "Bienvenido",
  description: "Descubre nuestras increíbles funciones en 15 segundos!"
 },
 // ... other languages
};

export default videoTranslations;

Component Updates for i18n

All video components were updated to accept a locale prop, enabling dynamic content rendering based on the user's language preference.

// VideoScene.tsx
import videoTranslations from './translations';

interface VideoSceneProps {
 locale: string;
}

const VideoScene: React.FC<VideoSceneProps> = ({ locale }) => {
 const translations = videoTranslations[locale];

 return (
  <div>
  <h1>{translations.title}</h1>
  <p>{translations.description}</p>
  {/* Video content here */}
  </div>
 );
};

export default VideoScene;

Video Format Optimization

Videos were rendered in WebM (VP9) format to reduce file sizes by approximately 25%, improving loading times. MP4 format was retained as a fallback for older browsers.

<video width="640" height="360" controls>
 <source src="video.webm" type="video/webm">
 <source src="video.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

Integration and Rendering

Compositions for each locale were added in the root component (Root.tsx), ensuring correct video rendering based on the selected language.

The welcome page (welcome.blade.php) was updated to serve locale-specific videos, completing the localization implementation.

Readability Enhancement

The phrase "15 seconds" was highlighted with a line break to improve readability across different screen sizes.

Key Takeaways

This approach ensures that users receive a localized and optimized video experience, improving engagement and overall satisfaction. By using WebM compression and adapting video components for i18n, we achieved smaller file sizes and more relevant content delivery.