Series · 16 phần
Video Engineering cho Web Developer — từ byte đến pixel
Series tiếng Việt 16 phần đi từ mental model container–codec–stream–packet–frame tới pipeline demux, decode, render, encode và mux. Bốn chặng lần lượt đào sâu timestamp, GOP, color/audio metadata; biến ffprobe và FFmpeg thành workflow inspect–render–cut–concat có kiểm chứng; giải thích progressive MP4, HTTP Range, HLS/ABR, MPEG-TS, MSE và WebCodecs; rồi kết bằng Chrome DevTools, playbook xử lý stall/decode/CORS, ad marker cùng playlist rewrite trên stream được phép kiểm soát, và một capstone Stream Lab end-to-end. Các lab thực hành dùng fixture tự tạo, phân biệt rõ stream copy với re-encode và ưu tiên bằng chứng thay vì đoán.
01 Media từ byte đến frame
Xây mental model về container, codec, stream, encoder, decoder, renderer, timestamp, GOP và metadata.
-
Dựng mental model từ file video tới màn hình: container, stream, packet, frame, demux, decode, render; phân biệt remux, transcode và kiểm chứng bằng FFmpeg.
-
Tách rõ decoder, encoder và renderer; hiểu software/hardware path, packet/frame queue, backpressure, latency và cách đo từng tầng bằng fixture FFmpeg tự tạo.
-
Hiểu time base, PTS/DTS, CFR/VFR, GOP, I/P/B-frame, seek và A/V sync; tự tạo fixture có B-frame và VFR rồi đọc timeline bằng ffprobe.
-
Phân tầng format/stream/frame metadata; đọc rotation, SAR/DAR, color tags, audio layout, language và disposition bằng fixture FFmpeg có hai audio track.
02 FFmpeg và ffprobe thực chiến
Inspect, map stream, dựng filtergraph, render, cắt và nối media mà không tự làm hỏng timeline.
-
Dùng ffprobe đọc format, stream, packet và frame dưới dạng JSON; sau đó rút gọn dữ liệu thành báo cáo đủ nhỏ để debug, review asset và tự động hóa pipeline.
-
Hiểu scope và thứ tự option, chọn stream bằng -map, rồi phân biệt chính xác demux, decode, filter, encode, mux, remux và transcode trong một lệnh FFmpeg.
-
Xây renderer bằng filtergraph: scale, crop, pad, overlay, drawtext, burn subtitle và mix audio; đồng thời quản lý pad, timestamp, aspect ratio và encoding đầu ra.
-
Chọn đúng giữa stream copy và cắt chính xác, nối bằng concat demuxer hoặc concat filter, rồi bảo toàn metadata, audio và subtitle mà không phá timeline.
03 Video trong browser và adaptive streaming
Theo dữ liệu qua HTML video, HTTP Range, HLS, MPEG-TS, MSE và WebCodecs.
-
Theo một file MP4 từ server vào thẻ video: moov/mdat, faststart, byte-range, MIME, CORS, autoplay, buffered/seekable và quy trình debug progressive playback.
-
Đọc master/media playlist HLS, hiểu ABR, keyframe alignment, MPEG-TS so với fMP4, rồi tự package một stream nhiều rendition bằng FFmpeg.
-
Mổ file .ts từ sync byte 0x47 đến PID, PAT/PMT, PES, PCR, PTS/DTS và continuity counter; hiểu vì sao TS chịu lỗi tốt nhưng không thể cắt byte tùy ý.
-
Chọn giữa video element, Media Source Extensions và WebCodecs; tự append fMP4, quản lý SourceBuffer/backpressure và xử lý VideoFrame an toàn.
04 Debugging, ad markers và capstone
Điều tra media bằng Chrome DevTools, sửa lỗi theo tầng và rewrite playlist an toàn trên fixture được phép kiểm thử.
-
Dùng Network, Media, Sources, Performance và chrome://media-internals để lần request, buffer, decoder, frame drop; sau đó đóng gói HAR và FFmpeg report.
-
Chẩn đoán stall, màn hình đen, chỉ có tiếng, lệch A/V và seek hỏng bằng một quy trình đi từ HTTP, CORS, Range, MIME tới demux, decode, buffer và render.
-
Phân biệt CSAI/SSAI, đọc EXT-X-DATERANGE và SCTE-35, rồi rewrite HLS playlist trên fixture tự sở hữu; hiểu vì sao thay binary TS trực tiếp rất dễ vỡ.
-
Tổng hợp series bằng lab end-to-end: tạo source, probe, encode ladder, đóng gói HLS MPEG-TS và fMP4, phát bằng hls.js, profile, fault injection và xuất debug report.