← Blog

OBS overlay (2026): cách thêm bằng nguồn Hình ảnh và Trình duyệt

Ảnh đặt cạnh nhau: khung cắt trên một nguồn trong bản xem trước OBS Studio và cửa sổ Edit Transform với các ô vị trí, kích thước, khung giới hạn và cắt
Nguồn hình ảnh: © OBS Project · official knowledge base UI
Tóm tắt chính
  • Đồ họa cố định dùng nguồn Hình ảnh, còn cảnh báo hay khung chat dạng web dùng nguồn Trình duyệt.
  • Nguồn nằm cao hơn trong danh sách sẽ hiện phía trước, nên overlay phải đặt trên nguồn game.
  • Nền trong suốt đến từ tệp ảnh có alpha và từ CSS tùy chỉnh mặc định của nguồn Trình duyệt.

Để đặt overlay trong OBS, hãy bấm nút + dưới bảng Nguồn, thêm nguồn Hình ảnh (đồ họa cố định) hoặc nguồn Trình duyệt (địa chỉ web do tiện ích cảnh báo hay khung chat cung cấp), rồi kéo nó lên trên nguồn game trong danh sách. Chỉ cần kiểm tra ba điều: loại nguồn, thứ tự xếp lớp và nền có trong suốt hay không. Tên menu bên dưới được đối chiếu với chuỗi ngôn ngữ tiếng Việt của OBS Studio 32.2.2 và cơ sở tri thức chính thức, theo lần kiểm tra ngày 6 tháng 10 năm 2026, áp dụng cho PC Windows. Việc đặt webcam được nói trong cách quay game kèm khung webcam, nên bài này chỉ tập trung vào nguồn Hình ảnh và Trình duyệt.

Kết luận: OBS không có sẵn cảnh báo

OBS Studio không có sẵn tính năng cảnh báo cho buổi phát; phần hỏi đáp chính thức hướng dẫn thêm overlay của nhà cung cấp cảnh báo bên thứ ba dưới dạng nguồn Trình duyệt (Browser Source). Nói gọn lại, cảnh báo và khung chat là địa chỉ bạn dán vào, còn logo và khung viền là tệp bạn tự chuẩn bị rồi nạp lên. Bài này không giới thiệu nhà cung cấp hay trang mẫu nào. Nếu việc dựng cả phân cảnh khiến bạn thấy nặng nề, bạn cũng có thể tham khảo bài về cách chuyển sang ghi hình tự động khi OBS quá phức tạp.

Các bước thêm overlay bằng nguồn Hình ảnh và Trình duyệt

  1. 1Chọn phân cảnh và đặt nguồn game trướcChọn phân cảnh cần dùng trong bảng Phân cảnh. Hướng dẫn bố cục chính thức thêm nguồn game trước bằng Quay màn hình (Display Capture), Quay trò chơi (Game Capture, chỉ Windows), Quay cửa sổ (Window Capture) hoặc Thiết bị quay video (Video Capture), sau đó dùng Chỉnh sửa > Biến đổi > Vừa với màn hình (Ctrl-F) để khớp với khung hình. Overlay là các lớp nằm phía trên đó.
  2. 2Thêm nguồn Hình ảnhBấm nút + dưới bảng Nguồn (Thêm nguồn) để mở cửa sổ Thêm nguồn, rồi chọn Hình ảnh trong danh sách Loại nguồn. Kiểm tra Làm cho nguồn có thể nhìn thấy đã được chọn, sau đó bấm nút Tạo nguồn mới; nguồn sẽ tự có tên và cửa sổ thuộc tính mở ra. Cơ sở tri thức chính thức mô tả màn hình cũ hơn (Create New, nhập tên, OK) nên cửa sổ của bạn có thể hơi khác. Trong cửa sổ thuộc tính, dùng Chọn đường dẫn để tìm tệp và bấm Đồng ý. Định dạng hỗ trợ là BMP, TGA, PNG, JPEG và GIF, và alpha (độ trong suốt) được hỗ trợ ở nơi áp dụng được. Đường dẫn tệp nằm ở thuộc tính Tập tin hình ảnh.
  3. 3Thêm nguồn Trình duyệtTrong cùng cửa sổ Thêm nguồn, chọn Trình duyệt ở danh sách Loại nguồn, bấm Tạo nguồn mới rồi dán địa chỉ nhà cung cấp đưa vào ô URL của cửa sổ thuộc tính vừa mở. Mặc định trong tài liệu chính thức là Chiều rộng 800 và Chiều cao 600, còn FPS 30 là giá trị dùng khi bật Dùng tốc độ khung hình tùy chọn (trang ghi ngày 11 tháng 1 năm 2022). Hướng dẫn về cảnh báo chỉ nói hãy chỉnh về kích thước phù hợp, nên hãy tham khảo Độ phân giải cơ sở (bức vẽ) trong Thiết đặt > Video để chỉnh chiều rộng và chiều cao, rồi nhìn phần xem trước xem có bị cắt không. Trang lưu trên máy thì bật Tập tin trên máy thay vào đó.
  4. 4Xác nhận nền trong suốtẢnh chỉ để lộ hình game phía sau khi chính tệp đó được lưu với nền trong suốt. Với nguồn Trình duyệt, tài liệu chính thức nói nội dung mặc định của CSS tùy chỉnh, body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }, là thứ làm nền trang trong suốt. Nếu xuất hiện một khối đặc, hãy xem ô này có bị sửa không. Cơ sở tri thức không mô tả cách làm trong suốt nào khác.
  5. 5Chỉnh kích thước và vị tríKhi chọn một nguồn, khung viền đỏ hiện trong phần xem trước. Kéo để di chuyển, kéo các núm đỏ ở góc hoặc cạnh để đổi kích thước. Muốn nhập giá trị chính xác, mở Chỉnh sửa > Biến đổi > Chỉnh sửa biến đổi... (Ctrl-E trên Windows) rồi dùng Vị trí, Kích thước và Cắt. Giữ Alt khi kéo núm để cắt, giữ Ctrl khi kéo để tạm tắt chế độ bắt dính.
  6. 6Đặt thứ tự xếp lớpNguồn nằm cao hơn trong danh sách được vẽ phía trước các nguồn bên dưới. Nếu overlay nằm sau game, hãy chọn nó rồi bấm mũi tên lên dưới danh sách, hoặc dùng menu Đặt với Chuyển Lên hay Chuyển đến Đầu. Có nhiều overlay thì áp dụng cùng quy tắc cho từng cái.
  7. 7Kiểm tra hiển thị, khóa và làm mớiBiểu tượng con mắt màu xám nghĩa là nguồn đang ẩn, màu trắng là đang hiện. Nguồn đã đặt xong có thể được Khoá lại. Nếu nguồn Trình duyệt cứ hiện trang cũ, bấm Làm mới cache trang hiện tại trong phần thuộc tính của nó.

Overlay nào dùng nguồn nào

Tình huốngNguồn nên dùngGiá trị cần xem trong tài liệu chính thức
Logo hoặc khung viền cố địnhHình ảnhMục Tập tin hình ảnh nhận BMP, TGA, PNG, JPEG hoặc GIF
Cảnh báo hoặc khung chat qua địa chỉ webTrình duyệtDán địa chỉ của nhà cung cấp vào URL; mặc định trong tài liệu: Chiều rộng 800, Chiều cao 600
Trang web lưu trên máy của bạnTrình duyệtBật Tập tin trên máy và nhập đường dẫn (mặc định tắt)
Overlay cần để lộ hình game phía sauẢnh có alpha, hoặc Trình duyệt với CSS tùy chỉnh mặc địnhCSS mặc định: body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
Xoay vòng nhiều ảnhTrình chiếu hình ảnh (Image Slide Show)Mặc định trong tài liệu: Thời gian giữa các trang 8000 ms, Tốc độ chuyển cảnh 700 ms
Overlay bị che sau hình gameThứ tự nguồnNguồn nằm cao hơn trong danh sách hiện phía trước các nguồn bên dưới

Kiểm tra trước khi ghi hình hoặc phát trực tiếp

  • Tệp ảnh là BMP, TGA, PNG, JPEG hoặc GIF và đã lưu với nền trong suốt nếu cần
  • URL của nguồn Trình duyệt giống hệt địa chỉ hiện trên trang của nhà cung cấp; công tắc Tập tin trên máy đúng ý định
  • Chiều rộng và Chiều cao đã đối chiếu với Độ phân giải cơ sở (bức vẽ), phần xem trước không bị cắt hay trống
  • Overlay nằm trên nguồn game trong danh sách Nguồn
  • Biểu tượng con mắt màu trắng và CSS tùy chỉnh mặc định không bị xóa hay sửa
  • Quyền cho phép của trang web vẫn là mặc định Cho phép đọc thông tin của OBS, hoặc bạn biết rõ vì sao đã đổi
Mục Không hiện hình ảnh khi không hiển thị mặc định tắt; tài liệu nói bật nó sẽ giải phóng bộ nhớ khi ẩn nhưng có thể gây khoảng trống ngắn khi ảnh hiện lại. Áp dụng alpha trong không gian tuyến tĩnh cũng mặc định tắt. Với nguồn Trình duyệt, Quyền cho phép của trang web mặc định là Cho phép đọc thông tin của OBS, và các lựa chọn gồm sáu mức, từ Không được truy cập OBS đến Truy cập toàn bộ vào OBS (Bắt đầu/Dừng phát luồng mà không có cảnh báo, v.v..). Cơ sở tri thức không ghi giá trị khuyến nghị nên bài này cũng không khuyến nghị; nguồn gốc của địa chỉ là việc bạn tự kiểm tra.

Sau khi bố cục xong, chuyển sang ghi hình

Những việc ở trên là dựng bố cục bên trong OBS, không có nghĩa DOR có overlay trực tiếp. Ở khâu ghi hình, điều DOR mang lại là bắt đầu mà không cần dựng trước phân cảnh, nguồn và cài đặt đầu ra kiểu OBS: mở một game được hỗ trợ như VALORANT, ứng dụng Windows miễn phí sẽ tự nhận diện và ghi cả trận thành mp4. VALORANT nằm trong nhóm 7 game mà các pha hạ gục còn được tự động cắt thành clip. Sau đó, thư viện trong ứng dụng cho chọn điểm bắt đầu và kết thúc để cắt, với tỷ lệ đầu ra 16:9, 9:16 hoặc 1:1; trình chỉnh sửa trên trình duyệt không cần cài đặt DOR Studio có thể thêm chữ ở giai đoạn dựng, đó là việc khác với overlay trực tiếp khi phát.

Nguồn chính thức

FAQ

Câu hỏi thường gặp

OBS có sẵn overlay cảnh báo không?

Không. Phần hỏi đáp chính thức nêu rằng OBS Studio không có cảnh báo luồng tích hợp sẵn và hướng dẫn thêm overlay của nhà cung cấp bên thứ ba dưới dạng Browser Source: dán địa chỉ cảnh báo vào ô URL rồi chỉnh chiều rộng và chiều cao. Bài này không nêu tên nhà cung cấp nào.

Vì sao nền ảnh PNG overlay của tôi không trong suốt?

Tài liệu chỉ nói alpha được hỗ trợ ở nơi áp dụng được. Hãy kiểm tra chính tệp có được lưu với nền trong suốt không và định dạng có thuộc BMP, TGA, PNG, JPEG hay GIF không. Với nguồn Trình duyệt, xem CSS tùy chỉnh mặc định có bị sửa không.

Vì sao overlay biến mất phía sau hình game?

Vì nguồn nằm cao hơn trong danh sách Nguồn được vẽ phía trước các nguồn bên dưới. Chọn overlay và đưa nó lên trên nguồn game, rồi kiểm tra biểu tượng con mắt có màu trắng.

Games

Hướng dẫn game liên quan

Đọc tiếp

Bài viết liên quan

Bắt đầu với DOR ngay

DOR phát hiện các sự kiện được hỗ trợ trong game và tự động lưu những khoảnh khắc đó thành clip