Skip to content

Commit d5493c3

Browse files
OpenHypervideoOpenHypervideo
committed
Add examples
1 parent 27cab3a commit d5493c3

6 files changed

Lines changed: 565 additions & 0 deletions

File tree

‎examples/custom-resources-url.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<!--
3+
EXAMPLE: Resources from a custom URL (server mode)
4+
──────────────────────────────────────────────────
5+
Requirements: Apache + PHP (FrameTrail installed and set up at the parent directory).
6+
7+
Demonstrates:
8+
- Loading the resource index from a custom URL instead of _data/resources/_index.json
9+
- Merging resources from multiple sources (e.g., a local pool + a shared library)
10+
- Resources can come from any URL that returns a valid FrameTrail resource index JSON
11+
12+
The resource index format expected at the URL:
13+
{
14+
"resources": {
15+
"resource-id": { "name": "...", "type": "youtube", "src": "...", ... },
16+
...
17+
}
18+
}
19+
20+
Replace the URL below with your actual shared resource endpoint.
21+
Replace 'your-hypervideo-id' with a real ID from your _data folder.
22+
-->
23+
<html lang="en">
24+
<head>
25+
<meta charset="utf-8">
26+
<title>FrameTrail – Custom Resource URL</title>
27+
<base href="../">
28+
<link rel="shortcut icon" href="favico.png">
29+
<link rel="stylesheet" href="build/frametrail.min.css">
30+
<script src="build/frametrail.min.js"></script>
31+
<style>
32+
body { margin: 0; }
33+
body > div { width: 100%; height: 100vh; }
34+
</style>
35+
</head>
36+
<body>
37+
<div id="player"></div>
38+
39+
<script>
40+
$(document).ready(function() {
41+
window.ftInstance = FrameTrail.init({
42+
target: '#player',
43+
startID: 'your-hypervideo-id',
44+
config: null,
45+
46+
resources: [
47+
// Load the local resource pool
48+
{
49+
label: 'Local Resources',
50+
data: '_data/resources/_index.json',
51+
type: 'frametrail'
52+
},
53+
// Also merge in a shared resource library from another server or CDN.
54+
// Both sets are merged — local resources take precedence on ID collision
55+
// since Object.assign processes them left to right.
56+
{
57+
label: 'Shared Library',
58+
data: 'https://your-shared-server.example.com/resources/_index.json',
59+
type: 'frametrail'
60+
}
61+
],
62+
63+
language: 'en-US'
64+
}, 'PlayerLauncher');
65+
});
66+
</script>
67+
</body>
68+
</html>

‎examples/embed-in-page.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<!--
3+
EXAMPLE: Embed FrameTrail in a page (server mode)
4+
─────────────────────────────────────────────────
5+
Requirements: Apache + PHP (FrameTrail installed and set up at the parent directory).
6+
7+
Demonstrates:
8+
- Mounting the player in a specific <div> instead of <body>
9+
- Opening a specific hypervideo directly (skipping the overview)
10+
- Overriding the config theme inline while loading everything else from the server
11+
12+
The <base href="../"> tag makes all relative paths (AJAX to _server/, reads from
13+
_data/) resolve to the FrameTrail installation root, so this file can live in
14+
examples/ without needing to copy the server files.
15+
16+
To run: serve the parent directory with Apache+PHP, open this file in a browser,
17+
and replace 'your-hypervideo-id' below with a real ID from your _data/hypervideos/ folder.
18+
-->
19+
<html lang="en">
20+
<head>
21+
<meta charset="utf-8">
22+
<title>FrameTrail – Embed in Page</title>
23+
<base href="../">
24+
<link rel="shortcut icon" href="favico.png">
25+
<link rel="stylesheet" href="build/frametrail.min.css">
26+
<script src="build/frametrail.min.js"></script>
27+
<style>
28+
body { margin: 0; background: #1a1a1a; }
29+
#player-container { width: 100%; height: 100vh; }
30+
</style>
31+
</head>
32+
<body>
33+
<div id="player-container"></div>
34+
35+
<script>
36+
$(document).ready(function() {
37+
window.ftInstance = FrameTrail.init({
38+
// Mount in a specific element instead of <body>
39+
target: '#player-container',
40+
41+
// Open this hypervideo directly — skip the overview grid.
42+
// Remove startID (or set it to null) to show the overview instead.
43+
startID: 'your-hypervideo-id',
44+
45+
// Override just the theme; all other config comes from the server's _data/config.json.
46+
// Set config: null to use the server config entirely.
47+
config: { theme: 'bright' },
48+
49+
// Load resources from the standard server location
50+
resources: [{
51+
label: 'Resources',
52+
data: '_data/resources/_index.json',
53+
type: 'frametrail'
54+
}],
55+
56+
language: 'en-US'
57+
}, 'PlayerLauncher');
58+
});
59+
</script>
60+
</body>
61+
</html>

‎examples/inline-html5-video.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<!--
3+
EXAMPLE: Inline HTML5 video — no server, no _data folder
4+
──────────────────────────────────────────────────────────
5+
Requirements: None. Works in any modern browser, opened from the filesystem
6+
(file://) or served from any static web server.
7+
8+
Demonstrates:
9+
- Using a remote HTTPS video URL directly as a resource (no upload needed)
10+
- The video is referenced by URL — FrameTrail streams it via the browser's
11+
native <video> element, so any URL the browser can play works here
12+
- Works the same as inline-youtube.html but for direct video files
13+
14+
Replace VIDEO_URL with any publicly accessible .mp4 / .webm / .m3u8 URL.
15+
Replace VIDEO_DURATION_SECONDS with the actual duration of the video.
16+
-->
17+
<html lang="en">
18+
<head>
19+
<meta charset="utf-8">
20+
<title>FrameTrail – Inline HTML5 Video</title>
21+
<link rel="stylesheet" href="../build/frametrail.min.css">
22+
<script src="../build/frametrail.min.js"></script>
23+
<style>
24+
body { margin: 0; }
25+
</style>
26+
</head>
27+
<body>
28+
<script>
29+
$(document).ready(function() {
30+
31+
var VIDEO_URL = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
32+
var VIDEO_DURATION_SECONDS = 596;
33+
34+
window.ftInstance = FrameTrail.init({
35+
target: 'body',
36+
startID: '0',
37+
38+
config: {
39+
theme: '',
40+
alwaysForceLogin: false,
41+
allowCaching: false
42+
},
43+
users: {},
44+
45+
resources: [{
46+
label: 'Inline resources',
47+
type: 'frametrail',
48+
data: {
49+
'mp4-video': {
50+
name: 'Big Buck Bunny (MP4)',
51+
type: 'video',
52+
src: VIDEO_URL,
53+
thumb: '',
54+
licenseType: 'cc-by',
55+
attributes: {},
56+
tags: []
57+
}
58+
}
59+
}],
60+
61+
contents: [{
62+
hypervideo: {
63+
meta: {
64+
name: 'Big Buck Bunny',
65+
description: 'Open-source animated short — streamed from HTTPS URL',
66+
thumb: '',
67+
creator: 'Demo',
68+
creatorId: 'demo',
69+
created: 1700000000000,
70+
lastchanged: 1700000000000
71+
},
72+
config: {
73+
layoutArea: { areaTop: [], areaBottom: [], areaLeft: [], areaRight: [] },
74+
hidden: false,
75+
slidingMode: 'overlay',
76+
theme: ''
77+
},
78+
clips: [{
79+
resourceId: 'mp4-video',
80+
duration: VIDEO_DURATION_SECONDS,
81+
start: 0,
82+
end: VIDEO_DURATION_SECONDS
83+
}],
84+
contents: [],
85+
subtitles: {},
86+
globalEvents: { onReady: '', onPlay: '', onPause: '', onEnded: '' },
87+
customCSS: ''
88+
},
89+
annotations: []
90+
}],
91+
92+
language: 'en-US'
93+
}, 'PlayerLauncher');
94+
});
95+
</script>
96+
</body>
97+
</html>

0 commit comments

Comments
 (0)