Skip to main content

Iframe-Based Video Access

Quick Overview

This guide shows you how to embed Osteocom videos directly in your application using a simple iframe approach with secure token authentication.

Key Advantages​

🚀 Reduced Complexity
Eliminates the need for additional API calls, reducing system complexity

🎥 Built-in Video Player
No need to implement your own video player - we handle everything

📝 Automatic Captions
Captions and subtitles are handled automatically

📱 Adaptive Resolution
Video player automatically adapts to resolution changes

🌐 HLS Streaming
Uses HLS format, the industry standard for video streaming

How It Works​

The iframe-based video access system works through a simple yet secure process:

  1. Token Generation: Your application obtains a video access token from the Video API
  2. URL Construction: The token is used as a query parameter in the iframe URL
  3. Security Check: Osteocom validates user access permissions
  4. Video Delivery: If authorized, a clean video player interface is loaded
Zero Configuration

Once you set up the iframe with the correct URL and token, no additional configuration is needed!

Prerequisites​

Required Token: tokenAuthVideo​

The tokenAuthVideo is your key to accessing video content. Here's what you need to know:

  • Source: Retrieved from the Video API response
  • Expiration: 15 minutes from generation
  • Scope: Specific channel authorization only
Token Expiration Behavior
  • During playback: Video continues playing even after token expires
  • Page refresh: Requires new token generation
  • Security: Expired tokens cannot be used from external sources
  • Player controls: All controls remain functional after expiration

🔒 Security Note: Token expiration protects against unauthorized external access while maintaining seamless user experience during video playback.

Implementation Guide​

Step 1: Choose Your Environment​

🧪 Test Environment

https://test.osteocom.me/

Use this for development and testing

🚀 Production Environment

https://osteocom.me/

Use this for live applications

Step 2: Construct the Iframe URL​

The base URL pattern is:

<urlPrefix>/en/videoaccess?signature=<tokenAuthVideo>

Step 3: Basic Implementation​

Basic iframe implementation
<iframe 
  src="https://test.osteocom.me/en/videoaccess?signature=YOUR_TOKEN_HERE"
  width="100%"
  height="500"
  frameborder="0">
</iframe>

Step 4: Enhanced Configuration​

Enable Fullscreen Support​

Iframe with fullscreen support
<iframe 
  src="https://test.osteocom.me/en/videoaccess?signature=YOUR_TOKEN_HERE"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen>
</iframe>
Fullscreen Mode

The allowfullscreen attribute is essential for enabling fullscreen functionality in our video player.

Enable DRM Protected Content​

For videos with DRM protection, add the allow="encrypted-media" attribute:

Iframe with DRM support
<iframe 
  src="https://test.osteocom.me/en/videoaccess?signature=YOUR_TOKEN_HERE"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
  allow="encrypted-media">
</iframe>
DRM Protection

The allow="encrypted-media" attribute is required for playing DRM-protected content. This enables the Encrypted Media Extensions (EME) API needed for secure content playback.

Set Default Subtitle Language​

Add the sublang parameter to set default subtitle language:

Iframe with default subtitles
<iframe 
  src="https://test.osteocom.me/en/videoaccess?signature=YOUR_TOKEN_HERE&sublang=en"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
  allow="encrypted-media">
</iframe>

Supported Subtitle Languages​

it
Italian
en
English
fr
French
es
Spanish

Complete Example​

Here's a production-ready implementation:

Complete iframe implementation
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
  <iframe 
    src="https://osteocom.me/en/videoaccess?signature=YOUR_TOKEN_HERE&sublang=en"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    allow="encrypted-media">
  </iframe>
</div>
You're All Set!

Once your iframe is configured correctly, Osteocom handles everything else - video delivery, player controls, captions, and security! 🎉