Hướng dẫn

Vào trang Thư viện → bấm 'Tạo thư viện' → đặt tên (vd: 'Khóa học của tôi'). Hệ thống tự sinh API Key + Webhook Secret — LƯU NGAY vì chỉ hiện 1 lần.

Vào thư viện vừa tạo → tab Cài đặt → ô AccessKey → dán Key vừa copy → bấm Lưu. Key này lưu trong trình duyệt, không bao giờ gửi lên server BBStream.

Tab Video → bấm 'Tải video lên' → kéo thả file MP4/MOV (max 5GB) → đặt tiêu đề → upload. Hệ thống tự transcode HLS 480p/720p/1080p (~10-30s tùy độ dài).

Khi video Sẵn sàng → click vào video → tab Embed → tùy chỉnh options (Autoplay/Loop/...) → Copy iframe HTML → dán vào website của bạn.

BBStream tự cắt 6 frame ở các thời điểm khác nhau. Click chọn 1 frame ưng ý làm ảnh đại diện, hoặc upload ảnh tùy chỉnh.

Chia video dài thành chương (timestamp + tên). Player hiện markers trên seek bar, học viên click jump nhanh.

Upload file .vtt nhiều ngôn ngữ. Player tự hiện menu chọn caption (browser native UI).

Gom video theo chủ đề/chương. Tổ chức 30+ video không bị rối.

Theo dõi lượt xem, băng thông tiêu thụ theo ngày. Biểu đồ 30 ngày + raw data.

Mỗi link nhúng có token HMAC + thời hạn (mặc định 1h). Sau đó hết hạn — không thể share lậu.

Cài đặt 'Allowed referers' → chỉ website của bạn được nhúng iframe. Domain khác copy iframe code = 403.

Mất API Key? Vào thư viện → Rotate → key cũ ngừng hoạt động ngay, nhận key mới. Cập nhật cho mọi client đang dùng.

Mỗi lần render trang chứa video, app gọi POST /library/<lib>/videos/<vid>/sign với header AccessKey + body { ttlSeconds: 3600 }. Trả về iframeHtml để render.

Cấu hình webhookUrl. Khi video.ready, BBStream POST event tới URL với HMAC signature → app tự update state (vd: lesson.video_status=ready).

GET /library/<lib>/stats trả tổng quan + top videos. GET /library/<lib>/videos/<vid>/stats trả timeseries từng video.

iframe.contentWindow.postMessage({ source: 'bbstream', cmd: 'play' }, '*'). Lệnh: play, pause, togglePlay, seek (arg=seconds), seekPercent (arg=0..1), setMuted, setVolume, setPlaybackRate, requestFullscreen, exitFullscreen, getState.

window.addEventListener('message', e => { if (e.data?.source==='bbstream') console.log(e.data.event, e.data) }). Events: ready, play, pause, ended, waiting, timeupdate (250ms throttle), volumechange, ratechange, state, error.

LMS theo dõi tiến độ học (timeupdate.percent), nút Next Lesson tự bấm khi 'ended', đồng bộ play giữa nhiều iframe — đều làm được mà không cần đụng vào player.