1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 1. Khung chứa Player tỉ lệ 16:9 -->
<div id="vsnx-player" style="width: 100%; max-width: 960px; aspect-ratio: 16/9;"></div>
<!-- 2. Nhúng thư viện Canvas GPU / WASM Web Player -->
<script src="/vsnx/vsnx-player.js"></script>
<!-- 3. Khởi tạo Player với Watermark động -->
<script>
const player = new VsnxPlayer({
container: '#vsnx-player',
src: 'https://cdn.your-school.com/courses/lesson_01.vsnx',
autoplay: false,
watermark: {
text: 'hocvien@gmail.com • 0988.888.888',
opacity: 0.35
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Chèn vào Block Custom HTML của Gutenberg hoặc 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/bai_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
// === BỘ API ĐIỀU KHIỂN CHUYÊN NGHIỆP CỦA VSNX PLAYER ===
// 1. Điều khiển phát & tua:
player.play(); // Bắt đầu phát video & audio
player.pause(); // Tạm dừng phát
player.togglePlay(); // Chuyển đổi trạng thái Play / Pause
player.seek(120); // Tua tức thì đến frame 120 (<7ms)
player.skip(10); // Nhảy tiến/lùi số giây (+10s hoặc -10s)
// 2. Storyboard Thumbnail Preview:
// Tự động kích hoạt khi rê chuột trên timeline scrubber (Canvas 160x90px, siêu mượt ~3ms).
// 3. Tùy chỉnh tốc độ phát tự do (Continuous Speed):
player.setPlaybackRate(1.25); // Tốc độ tùy ý từ 0.25x đến 3.0x (bước nhảy 0.05x)
// 4. Hỗ trợ phụ đề đa ngôn ngữ & Chọn ngôn ngữ phụ đề:
player.addSubtitleTrack({ // Thêm track phụ đề mới
label: 'Tiếng Việt',
lang: 'vi',
src: 'subtitles_vi.vtt' // hoặc mảng cues: [{start: 0, end: 3, text: '...'}]
});
player.setSubtitleTrack('vi'); // Chọn ngôn ngữ: 'vi', 'en', index, hoặc -1/'off' để tắt
player.getSubtitleTracks(); // Lấy danh sách tất cả track: [{ index, label, lang, active }]
player.getCurrentSubtitleTrack(); // Lấy thông tin track đang hiển thị
player.toggleSubtitles(); // Bật / tắt phụ đề nhanh (phím tắt C)
// 5. Danh sách phát Mini (Mini Playlist & Queue Drawer):
player.setPlaylist([ // Nạp danh sách phát gồm nhiều bài giảng
{ title: 'Bài 1', src: 'clip1.vsnx', duration: 120 },
{ title: 'Bài 2', src: 'clip2.vsnx', password: 'vsnx2026' }
]);
player.next(); // Phát video tiếp theo (Shift+N)
player.prev(); // Phát video trước đó (Shift+P)
player.playIndex(1); // Phát video tại vị trí chỉ định
player.togglePlaylist(); // Bật / tắt ngăn kéo Danh Sách Phát (Shift+L)
// 6. Gán mật khẩu trực tiếp khi giải mã (Bảo mật lưu trữ bộ nhớ RAM):
player.setCredentials({ password: 'vsnx2026' }); // Lưu ngầm trong RAM, không ghi ra DOM/LocalStorage
player.load(urlOrFile, 'vsnx2026'); // Tự động mở khóa video mã hóa AES mà không hiện popup
// 7. Tiện ích & Giao diện:
player.setVolume(0.8); // Mức âm lượng (0.0 đến 1.0)
player.toggleMute(); // Bật / tắt tiếng (M)
player.togglePip(); // Picture-in-Picture (P)
player.takeSnapshot(); // Chụp ảnh khung hình PNG sắc nét (S)
player.toggleFullscreen(); // Toàn màn hình (F)
player.toggleLoop(); // Lặp lại video
player.toggleFlip(); // Lật gương video
player.toggleStats(); // HUD thông số kỹ thuật (D hoặc I)
player.setLanguage('vi'); // Đổi ngôn ngữ UI ('vi' hoặc 'en')
// 8. Tùy biến hiển thị các nút điều khiển (Configurable Controls):
player.setControlVisibility('snapshot', false); // Ẩn / hiện 1 tính năng
player.setControlsConfig({ pip: false }); // Cập nhật hàng loạt
player.getControlsConfig(); // Lấy bảng cấu hình hiện tại
player.resetControlsConfig(); // Khôi phục cấu hình mặc định
// 9. Thanh tải dữ liệu kiểu YouTube (Stream Buffer Progress Bar):
player.getLoadedProgress(); // Lấy % dữ liệu đã nạp (0 đến 100)
player.setLoadedProgress(65.5); // Cập nhật % thủ công nếu dùng custom loader
// 10. Hủy và giải phóng tài nguyên:
player.destroy(); // Giải phóng Canvas GPU, Web Audio và 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": "Phát / Tạm dừng video & audio",
"Left / Right": "Tua lùi / tiến 5 giây",
"J / L": "Tua nhanh lùi / tiến 10 giây",
"0 .. 9": "Nhảy nhanh tới 0% .. 90% thời lượng video",
"Home / End": "Về đầu / về cuối video"
},
"audio_and_sound": {
"Up / Down": "Tăng / giảm 10% âm lượng",
"M": "Tắt / bật âm thanh (Mute)"
},
"screen_and_display": {
"F": "Toàn màn hình Canvas GPU",
"P": "Cửa sổ nổi Picture-in-Picture",
"S": "Chụp ảnh khung hình hiện tại (PNG)",
"> / <": "Tăng / giảm tốc độ phát tự do",
"C": "Bật / tắt phụ đề nhanh",
"D / I": "Bật / tắt bảng thông số kỹ thuật (HUD)",
"Shift + N / P": "Bài kế tiếp / bài trước đó trong Playlist",
"Shift + L": "Mở ngăn kéo Danh Sách Phát",
"Right Click": "Mở Menu ngữ cảnh bảo mật"
}
}