Preparing your comprehensive developer toolkit
Hướng dẫn thực tế
Lấy khung hình và tạo thumbnail từ video với thời điểm chính xác, xử lý ngay trên trình duyệt.
Cho phép trích khung hình chuẩn xác để tạo thumbnail, ghi chú hướng dẫn hoặc đánh giá chất lượng từng cảnh quay.
Video được load vào HTMLVideoElement, sau đó seek đến thời điểm mong muốn (currentTime). Khi sự kiện seeked hoàn tất, CanvasRenderingContext2D.drawImage() sao chép khung hình và toBlob() tạo ảnh PNG/JPEG độ phân giải gốc.
Canvas được đặt cùng kích thước video để tránh nội suy. Thuộc tính willReadFrequently và devicePixelRatio đảm bảo độ nét trên màn hình Retina. Khi cần giữ HDR, có thể sử dụng transferControlToOffscreen và worker để xử lý.
Để đạt độ chính xác từng mili giây, cần đợi readyState đạt HAVE_ENOUGH_DATA, sau đó điều chỉnh currentTime bằng bước nhỏ và xử lý sự kiện seeked/ timeupdate. Với video dài, nên preload metadata trước khi cho phép nhập thời gian.
Tạo thumbnail YouTube, ảnh minh họa cho bài hướng dẫn, kiểm tra chất lượng quay, trích cảnh keyframe cho storyboard hoặc lưu khoảnh khắc đáng nhớ trong livestream.
Làm việc với MP4, AVI, MOV và WebM.
Nhập chính xác thời điểm cần chụp khung hình.
Xuất ảnh giữ nguyên độ phân giải video.
Video không rời khỏi trình duyệt, đảm bảo bảo mật.
Công cụ hỗ trợ các định dạng video phổ biến bao gồm MP4, AVI, MOV và WebM. Các định dạng này được sử dụng rộng rãi và tương thích với hầu hết trình phát video và phần mềm chỉnh sửa. Công cụ có thể trích xuất khung hình từ bất kỳ định dạng nào trong số này tại các dấu thời gian chính xác.
Công cụ cung cấp độ chính xác cấp giây cho việc chụp khung hình. Bạn có thể chỉ định thời gian chính xác bằng giây (bao gồm số thập phân cho độ chính xác dưới giây) nơi bạn muốn trích xuất khung hình. Trình phát video sẽ tìm đến dấu thời gian đó và chụp khung hình được hiển thị tại thời điểm đó.
Có, ảnh chụp màn hình được trích xuất ở độ phân giải video gốc. Công cụ chụp khung hình trực tiếp từ video mà không cần thay đổi kích thước hoặc mất chất lượng. Nếu video của bạn là 1920x1080, ảnh chụp màn hình cũng sẽ là 1920x1080, giữ nguyên tất cả chi tiết và độ rõ nét.
Có, bạn có thể chụp nhiều khung hình từ cùng một video. Chỉ cần điều chỉnh vị trí thời gian và nhấp chụp lại. Mỗi khung hình đã chụp có thể được tải xuống riêng lẻ. Điều này hữu ích để tạo hình thu nhỏ, bảng phân cảnh hoặc trích xuất các khoảnh khắc quan trọng từ video.
Ảnh chụp màn hình thường được lưu ở định dạng PNG, cung cấp chất lượng không mất dữ liệu và hỗ trợ độ trong suốt nếu cần. PNG lý tưởng để bảo toàn diện mạo chính xác của khung hình video mà không có hiện tượng nén. Một số công cụ cũng có thể cung cấp định dạng JPEG cho kích thước tệp nhỏ hơn.
Hướng dẫn điều khiển phát, seek và xử lý sự kiện khi thao tác trên video.
Chi tiết phương thức drawImage, toBlob, toDataURL và tối ưu canvas.
Hướng dẫn trích xuất khung hình và xử lý hiệu năng với OffscreenCanvas.
Đặc tả chính thức về video element và media playback trong HTML.
Quy định kích thước và tỉ lệ khi chuẩn bị thumbnail đăng lên YouTube.
Mở công cụ để trải nghiệm các tính năng này.