API hình trong hình tài liệu giúp bạn mở cửa sổ luôn ở trên cùng có thể chứa nội dung HTML tuỳ ý. Chính sách này mở rộng API Hình trong hình hiện có cho <video>
, API này chỉ cho phép đặt phần tử HTML <video>
vào cửa sổ Hình trong hình.
Cửa sổ Hình trong hình trong API Hình trong hình tài liệu tương tự như một cửa sổ trống cùng nguồn gốc mở qua window.open()
, nhưng có một số điểm khác biệt:
- Cửa sổ Hình trong hình sẽ nổi ở trên các cửa sổ khác.
- Cửa sổ Hình trong hình không bao giờ lớn hơn cửa sổ mở ra.
- Không thể điều hướng cửa sổ Hình trong hình.
- Trang web không thể đặt vị trí cửa sổ Hình trong hình.
![Một cửa sổ hình trong hình đang phát video giới thiệu về Sintel.](https://developer.chrome.com/static/docs/web-platform/document-picture-in-picture/image/a-picture-picture-window-a75f117724132.png?authuser=5&hl=vi)
Trạng thái hiện tại
Bước | Trạng thái |
---|---|
1. Tạo thông báo giải thích | Hoàn tất |
2. Tạo bản nháp ban đầu của quy cách | Đang tiến hành |
3. Thu thập ý kiến phản hồi và cải tiến thiết kế | Đang tiến hành |
4. Bản dùng thử theo nguyên gốc | Hoàn tất |
5. Ra mắt | Hoàn tất (Máy tính) |
Trường hợp sử dụng
Trình phát video tuỳ chỉnh
Một trang web có thể cung cấp trải nghiệm xem video hình trong hình bằng API Hình trong hình dành cho <video>
hiện có. Tuy nhiên, khả năng này bị hạn chế rất nhiều. Cửa sổ Hình trong hình hiện có chấp nhận một số dữ liệu đầu vào và khả năng tạo kiểu cho chúng bị hạn chế. Với Tài liệu đầy đủ ở chế độ Hình trong hình, trang web có thể cung cấp các chế độ điều khiển và nhập thông tin tuỳ chỉnh (ví dụ: phụ đề, danh sách phát, công cụ tua để thời gian, lượt thích và không thích video) để cải thiện trải nghiệm của người dùng đối với video ở chế độ Hình trong hình.
Hội nghị truyền hình
Người dùng thường rời khỏi thẻ trình duyệt trong phiên hội nghị truyền hình vì nhiều lý do (ví dụ: trình bày một thẻ khác cho cuộc gọi hoặc làm nhiều việc cùng lúc) trong khi vẫn muốn xem cuộc gọi. Vì vậy, đây là một trường hợp sử dụng chính cho tính năng Hình trong hình. Một lần nữa, trải nghiệm hiện tại mà một trang web hội nghị truyền hình có thể cung cấp thông qua API Hình trong hình cho <video>
sẽ bị hạn chế về kiểu cách và phương thức nhập. Với Tài liệu đầy đủ ở chế độ Hình trong hình, trang web có thể dễ dàng kết hợp nhiều luồng video vào một cửa sổ Hình trong hình mà không cần phải dựa vào cuộc tấn công bằng canvas và cung cấp các chế độ kiểm soát tuỳ chỉnh như gửi tin nhắn, tắt tiếng người dùng khác hoặc giơ tay phát biểu.
Năng suất
Nghiên cứu đã chỉ ra rằng người dùng cần nhiều cách hơn để làm việc hiệu quả trên web. Tài liệu ở chế độ Hình trong hình giúp các ứng dụng web linh hoạt hoàn thành nhiều công việc hơn. Cho dù đó là chỉnh sửa văn bản, ghi chú, danh sách công việc, nhắn tin và trò chuyện hay công cụ thiết kế và phát triển, các ứng dụng web giờ đây có thể giữ cho nội dung của ứng dụng luôn truy cập được.
Giao diện
Thuộc tính
documentPictureInPicture.window
- Trả về cửa sổ Hình trong hình hiện tại nếu có. Nếu không, hãy trả về
null
.
Phương thức
documentPictureInPicture.requestWindow(options)
Trả về một lời hứa sẽ giải quyết khi cửa sổ Hình trong hình được mở ra. Lời hứa sẽ bị từ chối nếu được gọi mà không có cử chỉ của người dùng. Từ điển
options
chứa các thành phần không bắt buộc sau đây:width
- Đặt chiều rộng ban đầu của cửa sổ Hình trong hình.
height
- Đặt chiều cao ban đầu của cửa sổ Hình trong hình.
disallowReturnToOpener
- Ẩn nút "quay lại thẻ" trong cửa sổ Hình trong hình (nếu giá trị là true). Giá trị này là false theo mặc định.
Sự kiện
documentPictureInPicture.onenter
- Được kích hoạt vào
documentPictureInPicture
khi cửa sổ Hình trong hình đang mở.
Ví dụ
HTML sau đây thiết lập trình phát video tuỳ chỉnh và một phần tử nút để mở trình phát video trong cửa sổ Hình trong hình.
<div id="playerContainer">
<div id="player">
<video id="video"></video>
</div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>
Mở cửa sổ Hình trong hình
JavaScript sau đây gọi documentPictureInPicture.requestWindow()
khi người dùng nhấp vào nút để mở cửa sổ Hình trong hình trống. Lời hứa được trả về sẽ được phân giải bằng đối tượng JavaScript của cửa sổ Hình trong hình. Trình phát video sẽ được di chuyển đến cửa sổ đó bằng append()
.
pipButton.addEventListener('click', async () => {
const player = document.querySelector("#player");
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow();
// Move the player to the Picture-in-Picture window.
pipWindow.document.body.append(player);
});
Đặt kích thước của cửa sổ Hình trong hình
Để đặt kích thước của cửa sổ Hình trong hình, hãy đặt tuỳ chọn width
và height
của documentPictureInPicture.requestWindow()
thành kích thước cửa sổ Hình trong hình mong muốn. Chrome có thể giới hạn các giá trị tuỳ chọn nếu chúng quá lớn hoặc quá nhỏ, không vừa với kích thước cửa sổ thân thiện với người dùng.
pipButton.addEventListener("click", async () => {
const player = document.querySelector("#player");
// Open a Picture-in-Picture window whose size is
// the same as the player's.
const pipWindow = await documentPictureInPicture.requestWindow({
width: player.clientWidth,
height: player.clientHeight,
});
// Move the player to the Picture-in-Picture window.
pipWindow.document.body.append(player);
});
Ẩn nút "quay lại thẻ" của cửa sổ Hình trong hình
Để ẩn nút này trong cửa sổ Hình trong hình (cho phép người dùng quay lại thẻ mở), hãy đặt tuỳ chọn disallowReturnToOpener
của documentPictureInPicture.requestWindow()
thành true
.
pipButton.addEventListener("click", async () => {
// Open a Picture-in-Picture window which hides the "back to tab" button.
const pipWindow = await documentPictureInPicture.requestWindow({
disallowReturnToOpener: true,
});
});
Sao chép biểu định kiểu vào cửa sổ Hình trong hình
Để sao chép tất cả các biểu định kiểu CSS từ cửa sổ ban đầu, hãy lặp lại qua styleSheets
được liên kết rõ ràng vào hoặc nhúng trong tài liệu và nối chúng vào cửa sổ Hình trong hình. Xin lưu ý rằng đây là bản sao một lần.
pipButton.addEventListener("click", async () => {
const player = document.querySelector("#player");
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow();
// Copy style sheets over from the initial document
// so that the player looks the same.
[...document.styleSheets].forEach((styleSheet) => {
try {
const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
const style = document.createElement('style');
style.textContent = cssRules;
pipWindow.document.head.appendChild(style);
} catch (e) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = styleSheet.type;
link.media = styleSheet.media;
link.href = styleSheet.href;
pipWindow.document.head.appendChild(link);
}
});
// Move the player to the Picture-in-Picture window.
pipWindow.document.body.append(player);
});
Xử lý khi cửa sổ Hình trong hình đóng
Theo dõi sự kiện cửa sổ "pagehide"
để biết thời điểm cửa sổ Hình trong hình bị đóng (do trang web đã khởi tạo cửa sổ hoặc người dùng đã đóng cửa sổ theo cách thủ công). Trình xử lý sự kiện là nơi phù hợp để đưa các phần tử ra khỏi cửa sổ Hình trong hình như minh hoạ dưới đây.
pipButton.addEventListener("click", async () => {
const player = document.querySelector("#player");
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow();
// Move the player to the Picture-in-Picture window.
pipWindow.document.body.append(player);
// Move the player back when the Picture-in-Picture window closes.
pipWindow.addEventListener("pagehide", (event) => {
const playerContainer = document.querySelector("#playerContainer");
const pipPlayer = event.target.querySelector("#player");
playerContainer.append(pipPlayer);
});
});
Đóng cửa sổ Hình trong hình theo phương thức lập trình bằng phương thức close()
.
// Close the Picture-in-Picture window programmatically.
// The "pagehide" event will fire normally.
pipWindow.close();
Nghe thông tin về thời điểm trang web chuyển sang chế độ Hình trong hình
Theo dõi sự kiện "enter"
trên documentPictureInPicture
để biết thời điểm cửa sổ Hình trong hình mở ra. Sự kiện này chứa đối tượng window
để truy cập vào cửa sổ Hình trong hình.
documentPictureInPicture.addEventListener("enter", (event) => {
const pipWindow = event.window;
});
Truy cập vào các thành phần trong cửa sổ Hình trong hình
Truy cập các phần tử trong cửa sổ Hình trong hình từ đối tượng do documentPictureInPicture.requestWindow()
trả về hoặc bằng documentPictureInPicture.window
như minh hoạ dưới đây.
const pipWindow = documentPictureInPicture.window;
if (pipWindow) {
// Mute video playing in the Picture-in-Picture window.
const pipVideo = pipWindow.document.querySelector("#video");
pipVideo.muted = true;
}
Xử lý các sự kiện từ cửa sổ Hình trong hình
Tạo các nút và thành phần điều khiển, cũng như phản hồi các sự kiện nhập của người dùng, chẳng hạn như "click"
như bạn thường làm trong JavaScript.
// Add a "mute" button to the Picture-in-Picture window.
const pipMuteButton = pipWindow.document.createElement("button");
pipMuteButton.textContent = "Mute";
pipMuteButton.addEventListener("click", () => {
const pipVideo = pipWindow.document.querySelector("#video");
pipVideo.muted = true;
});
pipWindow.document.body.append(pipMuteButton);
Đổi kích thước cửa sổ Hình trong hình
Dùng các phương thức Cửa sổ resizeBy()
và resizeTo()
để đổi kích thước cửa sổ Hình trong hình. Cả hai phương thức đều yêu cầu cử chỉ của người dùng.
const resizeButton = pipWindow.document.createElement('button');
resizeButton.textContent = 'Resize';
resizeButton.addEventListener('click', () => {
// Expand the Picture-in-Picture window's width by 20px and height by 30px.
pipWindow.resizeBy(20, 30);
});
pipWindow.document.body.append(resizeButton);
Lấy tiêu điểm là cửa sổ mở
Sử dụng phương thức Cửa sổ focus()
để lấy tiêu điểm là cửa sổ mở từ cửa sổ Hình trong hình. Phương thức này yêu cầu cử chỉ của người dùng.
const returnToTabButton = pipWindow.document.createElement("button");
returnToTabButton.textContent = "Return to opener tab";
returnToTabButton.addEventListener("click", () => {
window.focus();
});
pipWindow.document.body.append(returnToTabButton);
Chế độ hiển thị hình trong hình của CSS
Sử dụng chế độ hiển thị picture-in-picture
của CSS để viết các quy tắc CSS cụ thể. Các quy tắc này chỉ được áp dụng khi (một phần của) ứng dụng web hiển thị ở chế độ Hình trong hình.
@media all and (display-mode: picture-in-picture) {
body {
margin: 0;
}
h1 {
font-size: 0.8em;
}
}
Phát hiện tính năng
Để kiểm tra xem API hình trong hình tài liệu có được hỗ trợ hay không, hãy dùng:
if ('documentPictureInPicture' in window) {
// The Document Picture-in-Picture API is supported.
}
Bản thu thử
Trình phát VideoJS
Bạn có thể phát bằng Bản minh hoạ trình phát VideoJS của API Hình trong hình tài liệu. Hãy nhớ xem mã nguồn.
Tiếng Pomodoro
Tomodoro, một ứng dụng web pomodoro, cũng đang tận dụng API hình ảnh trong hình ảnh tài liệu khi có sẵn (xem yêu cầu lấy dữ liệu của GitHub).
![Ảnh chụp màn hình về Tomodoro, một ứng dụng web pomodoro.](https://developer.chrome.com/static/docs/web-platform/document-picture-in-picture/image/screenshot-tomodoro-po-6e0b39f6f0b17.png?authuser=5&hl=vi)
Ý kiến phản hồi
Vui lòng gửi vấn đề lên GitHub kèm theo đề xuất và câu hỏi.
Đường liên kết hữu ích
- Nội dung giải thích công khai
- Thông số kỹ thuật của WICG
- Lỗi theo dõi Chromium
- Mục ChromeStatus.com
- Thành phần nhấp nháy:
Blink>Media>PictureInPicture
- Xem xét TAG
- Ý định thử nghiệm
- Ý định vận chuyển
Xác nhận
Hình ảnh chính của Jakob Owens.