Back to Amphtml

Slike Player Demo

examples/slikeplayer.amp.html

latest2.9 KB
Original Source

Slike Player Demo

Experience seamless video playback

About This Demo

This page demonstrates the amp-slikeplayer component with automatic play/pause based on viewport visibility. Scroll to see it pause when out of view and resume when visible.

What is Slike Player?

Slike Player is a powerful, cloud-hosted video player solution that provides seamless integration with AMP pages. It offers advanced features like adaptive streaming, analytics integration, and responsive design that works across all devices.

🚀 Fast Loading

Optimized for speed with lazy loading and efficient video delivery through global CDN networks.

📱 Responsive Design

Automatically adapts to any screen size, providing the best viewing experience on desktop, tablet, and mobile.

📊 Analytics Ready

Built-in analytics tracking to help you understand viewer behavior and optimize your content strategy.

The player auto pauses when out of view

Key Features & Benefits

🎯 Advanced Targeting

Slike Player supports sophisticated targeting options, allowing you to deliver personalized video experiences based on user demographics, location, and viewing history. This ensures that your content reaches the right audience at the right time.

🔧 Easy Integration

With just a few lines of code, you can embed Slike Player into any AMP page. The player automatically handles complex video delivery optimization, format selection, and cross-browser compatibility.

💡 Smart Playback

The player intelligently adapts video quality based on network conditions and device capabilities, ensuring smooth playback without buffering interruptions.

Keep Scrolling

The player pauses when not visible and resumes on return

Implementation Guide

Step 1: Include Required Scripts

Add the amp-slikeplayer script to your page head section.

Step 2: Configure Viewport Behavior

Control auto play/pause by setting viewport=<0-100> (percent) in data-config. A value of 0 disables viewport-based play/pause; any value > 0 enables it. Example: viewport=50 plays only when at least half the player is visible.

Step 2: Configure Your Player

Set up your player with the required data-apikey and data-videoid attributes. You can also customize behavior using the data-config attribute.

Technical Specifications

🎬 Video Formats

Supports MP4, WebM, HLS, and DASH formats with automatic format selection for optimal compatibility.

🌐 Browser Support

Compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers.

⚡ AMP Optimized

Built specifically for AMP with lazy loading, preconnect optimization, and validation compliance.

🔒 Security

Includes DRM support, secure token authentication, and domain restriction capabilities.

🎉 Demo Complete!

Enjoy the player while browsing this content