Skip to content

Commit 87b8af9

Browse files
SlikeTechSlikeTech
committed
Add Slike Player example HTML and enhance amp-slikeplayer for viewport-based playback
1 parent 99930ab commit 87b8af9

2 files changed

Lines changed: 401 additions & 23 deletions

File tree

‎examples/slikeplayer.amp.html‎

Lines changed: 345 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,345 @@
1+
<!doctype html>
2+
<html ⚡ lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Slike Player Example</title>
6+
<link rel="canonical" href="./slikeplayer.amp.html">
7+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
8+
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
9+
10+
<!-- Include required AMP scripts -->
11+
<script async src="https://cdn.ampproject.org/v0.js"></script>
12+
<script async custom-element="amp-slikeplayer" src="https://cdn.ampproject.org/v0/amp-slikeplayer-0.1.js"></script>
13+
14+
15+
16+
<style amp-custom>
17+
body {
18+
margin: 0;
19+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
20+
line-height: 1.6;
21+
color: #333;
22+
background: #f8f9fa;
23+
}
24+
25+
.header {
26+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
27+
color: white;
28+
padding: 2rem 1rem;
29+
text-align: center;
30+
position: relative;
31+
overflow: hidden;
32+
}
33+
34+
.header::before {
35+
content: '';
36+
position: absolute;
37+
top: 0;
38+
left: 0;
39+
right: 0;
40+
bottom: 0;
41+
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50" cy="50" r="50"><stop offset="0%" stop-color="rgba(255,255,255,.1)"/><stop offset="100%" stop-color="rgba(255,255,255,0)"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>') repeat-x;
42+
opacity: 0.1;
43+
}
44+
45+
.header h1 {
46+
margin: 0;
47+
font-size: 2.5rem;
48+
font-weight: 700;
49+
position: relative;
50+
z-index: 1;
51+
}
52+
53+
.header p {
54+
margin: 0.5rem 0 0;
55+
font-size: 1.2rem;
56+
opacity: 0.9;
57+
position: relative;
58+
z-index: 1;
59+
}
60+
61+
.container {
62+
max-width: 1200px;
63+
margin: 0 auto;
64+
padding: 0 1rem;
65+
}
66+
67+
.content-section {
68+
background: white;
69+
margin: 2rem 0;
70+
border-radius: 12px;
71+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
72+
overflow: hidden;
73+
}
74+
75+
.section-header {
76+
background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
77+
color: white;
78+
padding: 1.5rem;
79+
margin: 0;
80+
font-size: 1.5rem;
81+
font-weight: 600;
82+
}
83+
84+
.section-content {
85+
padding: 2rem;
86+
}
87+
88+
.player-section {
89+
background: white;
90+
margin: 3rem 0;
91+
border-radius: 12px;
92+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
93+
overflow: hidden;
94+
position: relative;
95+
}
96+
97+
.player-header {
98+
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
99+
color: white;
100+
padding: 1.5rem;
101+
text-align: center;
102+
}
103+
104+
.player-header h2 {
105+
margin: 0;
106+
font-size: 1.8rem;
107+
font-weight: 600;
108+
}
109+
110+
.player-header p {
111+
margin: 0.5rem 0 0;
112+
opacity: 0.9;
113+
font-size: 1rem;
114+
}
115+
116+
.player-container {
117+
padding: 2rem;
118+
background: #f8f9fa;
119+
}
120+
121+
.feature-grid {
122+
display: grid;
123+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
124+
gap: 2rem;
125+
margin: 2rem 0;
126+
}
127+
128+
.feature-card {
129+
background: white;
130+
padding: 2rem;
131+
border-radius: 8px;
132+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
133+
border-left: 4px solid #667eea;
134+
}
135+
136+
.feature-card h3 {
137+
margin: 0 0 1rem;
138+
color: #667eea;
139+
font-size: 1.3rem;
140+
}
141+
142+
.feature-card p {
143+
margin: 0;
144+
color: #666;
145+
line-height: 1.6;
146+
}
147+
148+
.spacer {
149+
height: 80vh;
150+
display: flex;
151+
align-items: center;
152+
justify-content: center;
153+
background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
154+
color: white;
155+
font-size: 1.2rem;
156+
text-align: center;
157+
margin: 2rem 0;
158+
border-radius: 12px;
159+
}
160+
161+
162+
163+
164+
165+
.intro-text {
166+
background: white;
167+
padding: 2rem;
168+
margin: 2rem 0;
169+
border-radius: 12px;
170+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
171+
border-left: 4px solid #4facfe;
172+
}
173+
174+
.intro-text h2 {
175+
margin: 0 0 1rem;
176+
color: #4facfe;
177+
font-size: 1.5rem;
178+
}
179+
180+
.highlight {
181+
background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
182+
padding: 0.2rem 0.5rem;
183+
border-radius: 4px;
184+
font-weight: 600;
185+
}
186+
187+
@media (max-width: 768px) {
188+
.header h1 {
189+
font-size: 2rem;
190+
}
191+
192+
.container {
193+
padding: 0 0.5rem;
194+
}
195+
196+
.feature-grid {
197+
grid-template-columns: 1fr;
198+
gap: 1rem;
199+
}
200+
}
201+
</style>
202+
</head>
203+
204+
<body>
205+
206+
207+
<!-- Header Section -->
208+
<div class="header">
209+
<div class="container">
210+
<h1>Slike Player Demo</h1>
211+
<p>Experience seamless video playback</p>
212+
</div>
213+
</div>
214+
215+
<div class="container">
216+
<!-- Introduction -->
217+
<div class="intro-text">
218+
<h2>About This Demo</h2>
219+
<p>This page demonstrates the <span class="highlight">amp-slikeplayer</span> component with automatic play/pause based on viewport visibility. Scroll to see it pause when out of view and resume when visible.</p>
220+
</div>
221+
222+
<!-- Content before player -->
223+
<div class="content-section">
224+
<h2 class="section-header">What is Slike Player?</h2>
225+
<div class="section-content">
226+
<p>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.</p>
227+
228+
<div class="feature-grid">
229+
<div class="feature-card">
230+
<h3>🚀 Fast Loading</h3>
231+
<p>Optimized for speed with lazy loading and efficient video delivery through global CDN networks.</p>
232+
</div>
233+
<div class="feature-card">
234+
<h3>📱 Responsive Design</h3>
235+
<p>Automatically adapts to any screen size, providing the best viewing experience on desktop, tablet, and mobile.</p>
236+
</div>
237+
<div class="feature-card">
238+
<h3>📊 Analytics Ready</h3>
239+
<p>Built-in analytics tracking to help you understand viewer behavior and optimize your content strategy.</p>
240+
</div>
241+
</div>
242+
</div>
243+
</div>
244+
245+
<!-- Player Section -->
246+
<div class="player-section" id="video-section">
247+
<div class="player-header">
248+
<h2>Featured Video</h2>
249+
<p>The player auto pauses when out of view</p>
250+
</div>
251+
<div class="player-container">
252+
<!-- Main Slike Player -->
253+
<amp-slikeplayer
254+
id="main-player"
255+
data-apikey="slike373googleamp5accuzkglo"
256+
data-videoid="1xp5a1wkul"
257+
data-config="autoplay=false&controls=true&responsive=true&viewport=50"
258+
layout="responsive"
259+
width="16"
260+
height="9">
261+
</amp-slikeplayer>
262+
</div>
263+
</div>
264+
265+
<!-- Content after player -->
266+
<div class="content-section">
267+
<h2 class="section-header">Key Features & Benefits</h2>
268+
<div class="section-content">
269+
<h3>🎯 Advanced Targeting</h3>
270+
<p>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.</p>
271+
272+
<h3>🔧 Easy Integration</h3>
273+
<p>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.</p>
274+
275+
<h3>💡 Smart Playback</h3>
276+
<p>The player intelligently adapts video quality based on network conditions and device capabilities, ensuring smooth playback without buffering interruptions.</p>
277+
</div>
278+
</div>
279+
280+
<!-- Spacer to demonstrate viewport behavior -->
281+
<div class="spacer">
282+
<div>
283+
<h3>Keep Scrolling</h3>
284+
<p>The player pauses when not visible and resumes on return</p>
285+
</div>
286+
</div>
287+
288+
<!-- More content -->
289+
<div class="content-section">
290+
<h2 class="section-header">Implementation Guide</h2>
291+
<div class="section-content">
292+
<h3>Step 1: Include Required Scripts</h3>
293+
<p>Add the <code>amp-slikeplayer</code> script to your page head section.</p>
294+
295+
<h3>Step 2: Configure Viewport Behavior</h3>
296+
<p>
297+
Control auto play/pause by setting <code>viewport=&lt;0-100&gt;</code> (percent) in <code>data-config</code>.
298+
A value of <code>0</code> disables viewport-based play/pause; any value &gt; 0 enables it.
299+
Example: <code>viewport=50</code> plays only when at least half the player is visible.
300+
</p>
301+
302+
<h3>Step 2: Configure Your Player</h3>
303+
<p>Set up your player with the required data-apikey and data-videoid attributes. You can also customize behavior using the data-config attribute.</p>
304+
305+
<!-- Docking-related steps removed -->
306+
</div>
307+
</div>
308+
309+
<!-- Additional content -->
310+
<div class="content-section">
311+
<h2 class="section-header">Technical Specifications</h2>
312+
<div class="section-content">
313+
<div class="feature-grid">
314+
<div class="feature-card">
315+
<h3>🎬 Video Formats</h3>
316+
<p>Supports MP4, WebM, HLS, and DASH formats with automatic format selection for optimal compatibility.</p>
317+
</div>
318+
<div class="feature-card">
319+
<h3>🌐 Browser Support</h3>
320+
<p>Compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers.</p>
321+
</div>
322+
<div class="feature-card">
323+
<h3>⚡ AMP Optimized</h3>
324+
<p>Built specifically for AMP with lazy loading, preconnect optimization, and validation compliance.</p>
325+
</div>
326+
<div class="feature-card">
327+
<h3>🔒 Security</h3>
328+
<p>Includes DRM support, secure token authentication, and domain restriction capabilities.</p>
329+
</div>
330+
</div>
331+
</div>
332+
</div>
333+
334+
<!-- Final spacer -->
335+
<div class="spacer">
336+
<div>
337+
<h3>🎉 Demo Complete!</h3>
338+
<p>Enjoy the player while browsing this content</p>
339+
</div>
340+
</div>
341+
</div>
342+
343+
344+
</body>
345+
</html>

0 commit comments

Comments
 (0)