1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 1. Target Container (16:9 Aspect Ratio) -->
<div id="vsnx-player" style="width: 100%; max-width: 960px; aspect-ratio: 16/9;"></div>
<!-- 2. Load Canvas GPU / WASM Web Player Library -->
<script src="/vsnx/vsnx-player.js"></script>
<!-- 3. Initialize Player with Forensic Watermark -->
<script>
const player = new VsnxPlayer({
container: '#vsnx-player',
src: 'https://cdn.your-school.com/courses/lesson_01.vsnx',
autoplay: false,
watermark: {
text: 'student@academy.com • IP: 118.69.182.42',
opacity: 0.35
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Insert into Custom HTML Block in Gutenberg or Elementor: -->
<div id="course-video" style="width: 100%; aspect-ratio: 16/9;"></div>
<script src="/wp-content/uploads/vsnx-player.js"></script>
<script>
const player = new VsnxPlayer({
container: '#course-video',
src: '/wp-content/uploads/lesson_01.vsnx'
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useEffect, useRef } from 'react';
export default function SecureVideoPlayer({ videoUrl, userEmail }) {
const containerRef = useRef(null);
useEffect(() => {
const player = new window.VsnxPlayer({
container: containerRef.current,
src: videoUrl,
watermark: { text: userEmail }
});
return () => player.destroy();
}, [videoUrl, userEmail]);
return <div ref={containerRef} style={{{ width: '100%', aspectRatio: '16/9' }}} />;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// === VSNX WEB PLAYER HIGH-PERFORMANCE JAVASCRIPT API SUITE ===
// 1. Playback & Instant Seeking:
player.play(); // Start WebGL/WASM decoding & Web Audio
player.pause(); // Halt decoding and pause playback
player.togglePlay(); // Toggle between play / pause
player.seek(120); // Sub-7ms instant seek to frame 120
player.skip(10); // Skip forward +10s (pass -10 for rewind)
// 2. Storyboard Thumbnail Popover:
// Automatically active on seekbar hover (160x90px Canvas, ~3ms render latency)
// 3. Continuous Playback Speed:
player.setPlaybackRate(1.25); // Custom speed 0.25x - 3.0x (0.05x granular step)
// 4. Multi-Language Subtitles & Captions:
player.addSubtitleTrack({ // Register new external subtitle track
label: 'English',
lang: 'en',
src: 'subtitles_en.vtt' // or cues: [{ start: 0, end: 5, text: '...' }]
});
player.setSubtitleTrack('en'); // Switch subtitle: 'en', 'vi', index, or -1/'off'
player.getSubtitleTracks(); // List tracks: [{ index, label, lang, active }]
player.getCurrentSubtitleTrack(); // Returns active subtitle track object
player.toggleSubtitles(); // Quick toggle captions on/off (Hotkey C)
// 5. Mini Playlist & Queue Drawer:
player.setPlaylist([ // Load array of lesson videos
{ title: '01. Architecture', src: 'clip1.vsnx', duration: 180 },
{ title: '02. Zero-Leak DRM', src: 'clip2.vsnx', password: 'vsnx2026' }
]);
player.next(); // Play next video (Shift+N)
player.prev(); // Play previous video (Shift+P)
player.playIndex(1); // Play video at specific playlist index
player.togglePlaylist(); // Toggle playlist slide-out drawer (Shift+L)
// 6. In-Memory AES Credentials (Zero LocalStorage / DOM Leaks):
player.setCredentials({ password: 'vsnx2026' }); // Held strictly in volatile RAM
player.load(urlOrFile, 'vsnx2026'); // Auto-decrypt stream without password prompt
// 7. Display, Audio & Video Controls:
player.setVolume(0.8); // Master volume gain (0.0 to 1.0)
player.toggleMute(); // Mute / unmute audio (M)
player.togglePip(); // Floating Picture-in-Picture window (P)
player.takeSnapshot(); // Capture crisp PNG frame screenshot (S)
player.toggleFullscreen(); // Fullscreen canvas expansion (F)
player.toggleLoop(); // Toggle infinite loop playback
player.toggleFlip(); // Mirror horizontal frame inversion
player.toggleStats(); // Technical diagnostics HUD overlay (D or I)
player.setLanguage('en'); // Switch UI language locale ('en' or 'vi')
// 8. Dynamic Configurable Controls:
player.setControlVisibility('snapshot', false); // Show/hide specific button
player.setControlsConfig({ pip: false }); // Batch update button visibility
player.getControlsConfig(); // Fetch active control options
player.resetControlsConfig(); // Revert back to default layout
// 9. YouTube-Style Stream Buffer Progress:
player.getLoadedProgress(); // Returns buffered data percent (0 - 100)
player.setLoadedProgress(65.5); // Manual progress indicator for custom loaders
// 10. Lifecycle & Teardown:
player.destroy(); // Release Canvas GPU, AudioContext & WASM RAM
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
"playback_controls": {
"Space / K": "Play / Pause video and audio stream",
"Left / Right": "Seek backward / forward 5 seconds",
"J / L": "Fast skip backward / forward 10 seconds",
"0 .. 9": "Jump directly to 0% .. 90% timeline offset",
"Home / End": "Jump to start / end of video duration"
},
"audio_and_sound": {
"Up / Down": "Increase / decrease volume gain by 10%",
"M": "Toggle mute / unmute audio"
},
"screen_and_display": {
"F": "Toggle fullscreen canvas GPU display",
"P": "Toggle Picture-in-Picture floating viewport",
"S": "Take instant crystal-clear PNG snapshot",
"> / <": "Increase / decrease continuous playback rate",
"C": "Toggle closed caption subtitles on / off",
"D / I": "Toggle technical telemetry HUD (Stats for Nerds)",
"Shift + N / P": "Play next / previous video in playlist",
"Shift + L": "Toggle mini playlist queue drawer",
"Right Click": "Open proprietary security context menu"
}
}