Trang này được dịch bởi Cloud Translation API.

Tuỳ chỉnh thông báo về nội dung nghe nhìn và bộ điều khiển chế độ phát bằng Media Session API

Cách tích hợp với các phím phương tiện phần cứng, tuỳ chỉnh thông báo về nội dung nghe nhìn và nhiều tính năng khác.

François Beaufort

Cho phép người dùng biết nội dung đang phát trong trình duyệt của họ và kiểm soát nội dung đó mà không cần quay lại trang đã khởi chạy nó, Media Session API đã được được giới thiệu. Tư duy này cho phép nhà phát triển web tuỳ chỉnh trải nghiệm này thông qua siêu dữ liệu trong các thông báo nội dung nghe nhìn tuỳ chỉnh, sự kiện nội dung nghe nhìn như phát, tạm dừng, tua, theo dõi lượt chuyển đổi và sự kiện hội nghị truyền hình (chẳng hạn như tắt tiếng/bật tiếng) micrô, bật/tắt camera và gác máy. Những tuỳ chỉnh này có trong một số bối cảnh như trung tâm nội dung nghe nhìn trên máy tính, thông báo về nội dung nghe nhìn trên thiết bị di động và thậm chí cả trên thiết bị có thể đeo. Tôi sẽ mô tả các tuỳ chỉnh này bằng bài viết này.

Ảnh chụp màn hình của ngữ cảnh Phiên phát nội dung đa phương tiện. — Trung tâm nội dung nghe nhìn trên máy tính, thông báo về nội dung nghe nhìn trên thiết bị di động và thiết bị đeo.

Giới thiệu về Media Session API

API phiên đa phương tiện mang lại một số lợi ích và chức năng:

Hỗ trợ các phím phương tiện phần cứng.
Thông báo về nội dung nghe nhìn được tuỳ chỉnh trên thiết bị di động, máy tính và thiết bị đeo được ghép nối.
Trung tâm đa phương tiện hoạt động trên máy tính.
Các chế độ điều khiển nội dung nghe nhìn trên màn hình khoá có trên ChromeOS và thiết bị di động.
Các nút điều khiển cửa sổ hình trong hình hiện có thể phát âm thanh, hội nghị truyền hình và trình bày các trang trình bày.
Bạn có thể sử dụng tính năng tích hợp Trợ lý trên thiết bị di động.

Hỗ trợ trình duyệt

Nguồn

Một vài ví dụ sẽ minh hoạ một vài điểm trong số này.

Ví dụ 1: Nếu người dùng nhấn vào "bản nhạc tiếp theo" trên bàn phím các nhà phát triển web có thể xử lý hành động này của người dùng cho dù trình duyệt có chạy trên nền trước hay không hoặc nền.

Ví dụ 2: Nếu người dùng nghe podcast trên web khi sử dụng thiết bị màn hình bị khoá, họ vẫn có thể nhấn vào nút "tìm kiếm ngược" biểu tượng ổ khoá màn hình điều khiển nội dung nghe nhìn để các nhà phát triển web lùi lại thời gian phát lại ít giây.

Ví dụ 3: Nếu người dùng có các thẻ đang phát âm thanh, họ có thể dễ dàng dừng lại phát lại từ trung tâm đa phương tiện trên máy tính để bàn để các nhà phát triển web có cơ hội hãy xoá trạng thái của chúng.

Ví dụ 4: Nếu người dùng đang thực hiện cuộc gọi video, họ có thể nhấn nút "Bật/tắt micrô" trong cửa sổ Hình trong hình để chặn trang web đang nhận dữ liệu micrô.

Bạn có thể thực hiện việc này thông qua 2 giao diện: Giao diện MediaSession và giao diện MediaMetadata. Đầu tiên, người dùng có thể kiểm soát mọi thứ đang phát. Lý do thứ hai là cách bạn cho MediaSession biết cần kiểm soát những gì.

Để minh hoạ, hình ảnh dưới đây cho thấy cách các giao diện này liên quan đến các nút điều khiển nội dung nghe nhìn, trong trường hợp này là thông báo về nội dung nghe nhìn trên thiết bị di động.

Hình minh hoạ giao diện của Phiên phát nội dung đa phương tiện. — Cấu trúc của một thông báo về nội dung nghe nhìn trên thiết bị di động.

Cho người dùng biết nội dung đang phát

Khi một trang web phát âm thanh hoặc video, người dùng sẽ tự động nhận được nội dung nghe nhìn thông báo trong khay thông báo trên thiết bị di động hoặc trong trung tâm truyền thông trên máy tính để bàn. Trình duyệt cố gắng hết sức để hiển thị thông tin phù hợp bằng cách sử dụng tiêu đề của tài liệu và hình ảnh biểu tượng lớn nhất có thể tìm thấy. Có phiên nội dung đa phương tiện API, bạn có thể tuỳ chỉnh thông báo về nội dung nghe nhìn bằng một số nội dung nghe nhìn phong phú hơn siêu dữ liệu như tiêu đề, tên nghệ sĩ, tên album và tác phẩm nghệ thuật như được hiển thị dưới đây.

Chrome yêu cầu "đầy đủ" chế độ tập trung âm thanh để chỉ hiển thị thông báo về nội dung nghe nhìn khi thời lượng nội dung nghe nhìn là ít nhất 5 giây. Công nghệ này giúp đảm bảo các âm thanh tình cờ xuất hiện chẳng hạn như dings sẽ không hiển thị thông báo.

// After media (video or audio) starts playing
await document.querySelector("video").play();

if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://via.placeholder.com/96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/192', sizes: '192x192', type: 'image/png' },
      { src: 'https://via.placeholder.com/256', sizes: '256x256', type: 'image/png' },
      { src: 'https://via.placeholder.com/384', sizes: '384x384', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  });

  // TODO: Update playback state.
}

Khi quá trình phát kết thúc, bạn không cần phải "nhả" phiên nội dung đa phương tiện thông báo sẽ tự động biến mất. Xin lưu ý rằng navigator.mediaSession.metadata sẽ được dùng khi lần phát tiếp theo bắt đầu nhưng. Đây là lý do tại sao bạn cần cập nhật phương thức này khi nguồn phát nội dung nghe nhìn hãy thay đổi để đảm bảo thông tin liên quan xuất hiện trong thông báo về nội dung nghe nhìn.

Có một vài điều cần lưu ý về siêu dữ liệu đa phương tiện.

Mảng hình minh hoạ thông báo hỗ trợ URL của blob và URL dữ liệu.
Nếu không có hình minh hoạ nào được xác định và có hình ảnh biểu tượng (được chỉ định bằng <link rel=icon>) ở kích thước mong muốn, thì thông báo nội dung đa phương tiện sẽ sử dụng hình ảnh đó.
Kích thước mục tiêu của hình minh hoạ thông báo trong Chrome dành cho Android là 512x512. Cho thiết bị cấp thấp, đó là 256x256.
Thuộc tính title của phần tử HTML đa phương tiện được dùng trong nút "Phát hiện nhạc" Tiện ích macOS.
Nếu tài nguyên nội dung nghe nhìn được nhúng (ví dụ: trong iframe), Media Session API thông tin phải được đặt từ ngữ cảnh được nhúng. Hãy xem đoạn mã dưới đây.

<iframe id="iframe">
  <video>...</video>
</iframe>
<script>
  iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    ...
  });
</script>

Bạn cũng có thể thêm thông tin về từng phân cảnh, chẳng hạn như tiêu đề, dấu thời gian và ảnh chụp màn hình của phần đó vào siêu dữ liệu của nội dung nghe nhìn. Nhờ vậy, người dùng có thể khám phá nội dung của nội dung nghe nhìn.

navigator.mediaSession.metadata = new MediaMetadata({
  // title, artist, album, artwork, ...
  chapterInfo: [{
    title: 'Chapter 1',
    startTime: 0,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }, {
    title: 'Chapter 2',
    startTime: 42,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }]
});

Thông tin phân cảnh xuất hiện trong thông báo về nội dung nghe nhìn trên ChromeOS. — Thông báo về nội dung nghe nhìn có các phân cảnh trong ChromeOS.

Cho phép người dùng điều khiển nội dung đang phát

Hành động trong phiên phát nội dung đa phương tiện là một hành động (ví dụ: "phát" hoặc "tạm dừng") mà một trang web có thể tên người dùng khi họ tương tác với chế độ phát nội dung nghe nhìn hiện tại. Hành động là tương tự và hoạt động giống như sự kiện. Giống như sự kiện, hành động được triển khai bằng cách cài đặt trình xử lý trên một đối tượng thích hợp, ví dụ: MediaSession, trong trường hợp này. Một số thao tác được kích hoạt khi người dùng nhấn các nút từ tai nghe, một thiết bị từ xa khác, bàn phím hoặc tương tác với thông báo về nội dung nghe nhìn.

Ảnh chụp màn hình thông báo về nội dung nghe nhìn trong Windows 10. — Thông báo về nội dung nghe nhìn tuỳ chỉnh trong Windows 10.

Do một số thao tác trong phiên phát nội dung đa phương tiện có thể không được hỗ trợ, bạn nên sử dụng khối try…catch khi đặt các tuỳ chọn này.

const actionHandlers = [
  ['play',          () => { /* ... */ }],
  ['pause',         () => { /* ... */ }],
  ['previoustrack', () => { /* ... */ }],
  ['nexttrack',     () => { /* ... */ }],
  ['stop',          () => { /* ... */ }],
  ['seekbackward',  (details) => { /* ... */ }],
  ['seekforward',   (details) => { /* ... */ }],
  ['seekto',        (details) => { /* ... */ }],
  /* Video conferencing actions */
  ['togglemicrophone', () => { /* ... */ }],
  ['togglecamera',     () => { /* ... */ }],
  ['hangup',           () => { /* ... */ }],
  /* Presenting slides actions */
  ['previousslide', () => { /* ... */ }],
  ['nextslide',     () => { /* ... */ }],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}

Việc huỷ đặt trình xử lý thao tác trong phiên phát nội dung đa phương tiện cũng dễ dàng như khi đặt thành null.

try {
  // Unset the "nexttrack" action handler at the end of a playlist.
  navigator.mediaSession.setActionHandler('nexttrack', null);
} catch (error) {
  console.log(`The media session action "nexttrack" is not supported yet.`);
}

Sau khi thiết lập, trình xử lý tác vụ phiên phát nội dung đa phương tiện sẽ vẫn tồn tại thông qua việc phát nội dung nghe nhìn. Việc này tương tự như mẫu trình nghe sự kiện, ngoại trừ việc xử lý một sự kiện có nghĩa là trình duyệt ngừng thực hiện bất kỳ hành vi mặc định nào và sử dụng hành vi này làm tín hiệu cho thấy trang web đó hỗ trợ hành động đối với nội dung đa phương tiện. Do đó, các chế độ kiểm soát hành động đối với nội dung đa phương tiện sẽ không hiển thị trừ khi bạn đặt trình xử lý hành động thích hợp.

Ảnh chụp màn hình tiện ích Phát hiện nhạc trong macOS Big Sur. — Tiện ích Phát hiện nhạc trong macOS Big Sur.

Phát / tạm dừng

Hành động "play" cho biết người dùng muốn tiếp tục phát nội dung nghe nhìn trong khi "pause" cho biết bạn muốn tạm thời dừng hoạt động.

Nút "phát/tạm dừng" luôn hiển thị trong thông báo về phương tiện và thông báo các sự kiện đa phương tiện được trình duyệt xử lý tự động. Để ghi đè giá trị mặc định hành vi, xử lý "phát" và "tạm dừng" hành động đa phương tiện như được hiển thị dưới đây.

Trình duyệt có thể coi một trang web không phát nội dung nghe nhìn khi tìm kiếm hoặc đang tải. Trong trường hợp này, hãy ghi đè hành vi này bằng cách đặt navigator.mediaSession.playbackState đến "playing" hoặc "paused" để đảm bảo giao diện người dùng của trang web luôn đồng bộ hoá với các chế độ kiểm soát thông báo về nội dung nghe nhìn.

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('play', async () => {
  // Resume playback
  await video.play();
});

navigator.mediaSession.setActionHandler('pause', () => {
  // Pause active playback
  video.pause();
});

video.addEventListener('play', () => {
  navigator.mediaSession.playbackState = 'playing';
});

video.addEventListener('pause', () => {
  navigator.mediaSession.playbackState = 'paused';
});

Bản nhạc trước

Hành động "previoustrack" cho biết rằng người dùng muốn bắt đầu việc phát nội dung nghe nhìn hiện tại từ đầu nếu quá trình phát nội dung nghe nhìn có khái niệm là phần đầu hoặc chuyển đến mục trước đó trong danh sách phát nếu nội dung nghe nhìn phát có khái niệm về danh sách phát.

navigator.mediaSession.setActionHandler('previoustrack', () => {
  // Play previous track.
});

Bản nhạc tiếp theo

Thao tác "nexttrack" cho biết người dùng muốn chuyển chế độ phát nội dung nghe nhìn sang mục tiếp theo trong danh sách phát nếu quá trình phát nội dung nghe nhìn có khái niệm là danh sách phát.

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // Play next track.
});

Dừng

Hành động "stop" cho biết người dùng muốn dừng phát nội dung nghe nhìn và hãy xoá trạng thái nếu thích hợp.

navigator.mediaSession.setActionHandler('stop', () => {
  // Stop playback and clear state if appropriate.
});

Tua lại / Tua đi

Thao tác "seekbackward" cho biết người dùng muốn chuyển nội dung nghe nhìn thời gian phát lùi lại một khoảng thời gian ngắn trong khi "seekforward" biểu thị một mong muốn để đẩy thời gian phát nội dung nghe nhìn lên trước một khoảng thời gian ngắn. Trong cả hai trường hợp, khoảng thời gian ngắn tức là vài giây.

Giá trị seekOffset được cung cấp trong trình xử lý hành động là thời gian tính bằng giây để đã kéo dài thời gian phát nội dung nghe nhìn. Nếu không có giá trị này (ví dụ: undefined), thì bạn nên sử dụng thời gian hợp lý (ví dụ: 10-30 giây).

const video = document.querySelector('video');
const defaultSkipTime = 10; /* Time to skip in seconds by default */

navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.max(video.currentTime - skipTime, 0);
  // TODO: Update playback state.
});

navigator.mediaSession.setActionHandler('seekforward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
  // TODO: Update playback state.
});

Tua đến một thời điểm cụ thể

Thao tác "seekto" cho biết người dùng muốn chuyển chế độ phát nội dung nghe nhìn thời gian cụ thể.

Giá trị seekTime được cung cấp trong trình xử lý hành động là thời gian tính bằng giây để chuyển thời gian phát nội dung nghe nhìn sang.

Giá trị boolean fastSeek được cung cấp trong trình xử lý thao tác là true nếu thao tác đó là được gọi nhiều lần trong chuỗi và đây không phải là lệnh gọi cuối cùng trong trình tự đó.

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('seekto', (details) => {
  if (details.fastSeek && 'fastSeek' in video) {
    // Only use fast seek if supported.
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
  // TODO: Update playback state.
});

Đặt vị trí phát

Việc hiển thị chính xác vị trí phát nội dung nghe nhìn trong thông báo trở nên đơn giản khi cài đặt trạng thái vị trí vào thời điểm thích hợp như trình bày dưới đây. Chiến lược phát hành đĩa đơn trạng thái vị trí là sự kết hợp giữa tốc độ phát nội dung nghe nhìn, thời lượng và thời gian hiện tại.

Ảnh chụp màn hình các chế độ điều khiển nội dung nghe nhìn trên màn hình khoá trong ChromeOS. — Các chế độ điều khiển nội dung nghe nhìn trên màn hình khoá trong ChromeOS.

Bạn phải cung cấp thời lượng và có giá trị dương. Vị trí phải là số dương và nhỏ hơn thời lượng. Tốc độ phát phải lớn hơn 0.

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// When video starts playing, update duration.
await video.play();
updatePositionState();

// When user wants to seek backward, update position.
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek forward, update position.
navigator.mediaSession.setActionHandler('seekforward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek to a specific time, update position.
navigator.mediaSession.setActionHandler('seekto', (details) => {
  /* ... */
  updatePositionState();
});

// When video playback rate changes, update position state.
video.addEventListener('ratechange', (event) => {
  updatePositionState();
});

Việc đặt lại trạng thái vị trí cũng dễ dàng như đặt thành null.

// Reset position state when media is reset.
navigator.mediaSession.setPositionState(null);

Thao tác đối với hội nghị truyền hình

Khi người dùng đặt cuộc gọi video vào cửa sổ Hình trong hình, trình duyệt có thể hiển thị các điều khiển cho micrô và máy ảnh cũng như để kết thúc cuộc gọi. Khi người dùng nhấp vào những quảng cáo đó, trang web sẽ xử lý chúng thông qua video bên dưới. Để biết ví dụ, hãy xem mẫu Hội nghị truyền hình.

Ảnh chụp màn hình các nút điều khiển hội nghị truyền hình trong cửa sổ Hình trong hình. — Các nút điều khiển hội nghị truyền hình trong cửa sổ Hình trong hình.

Bật/tắt micrô

Thao tác "togglemicrophone" cho biết người dùng muốn tắt tiếng hoặc bật tiếng micrô. Phương thức setMicrophoneActive(isActive) cho trình duyệt biết liệu trang web hiện có cho rằng micrô đang hoạt động hay không.

let isMicrophoneActive = false;

navigator.mediaSession.setActionHandler('togglemicrophone', () => {
  if (isMicrophoneActive) {
    // Mute the microphone.
  } else {
    // Unmute the microphone.
  }
  isMicrophoneActive = !isMicrophoneActive;
  navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
});

Chuyển đổi máy ảnh

Hành động "togglecamera" cho biết người dùng muốn kích hoạt máy ảnh. Phương thức setCameraActive(isActive) cho biết liệu trình duyệt sẽ coi trang web là đang hoạt động.

let isCameraActive = false;

navigator.mediaSession.setActionHandler('togglecamera', () => {
  if (isCameraActive) {
    // Disable the camera.
  } else {
    // Enable the camera.
  }
  isCameraActive = !isCameraActive;
  navigator.mediaSession.setCameraActive(isCameraActive);
});

Kết thúc cuộc gọi

Hành động "hangup" cho biết người dùng muốn kết thúc cuộc gọi.

navigator.mediaSession.setActionHandler('hangup', () => {
  // End the call.
});

Đang trình bày các thao tác trên trang trình bày

Khi người dùng đặt bản trình bày trên Trang trình bày vào cửa sổ Hình trong hình, trình duyệt có thể hiển thị các chế độ điều khiển để di chuyển qua các trang trình bày. Khi người dùng nhấp vào những quảng cáo đó, trang web sẽ xử lý chúng thông qua Media Session API. Đối với hãy xem mẫu Trình bày Trang trình bày.

Trang trình bày trước

Hành động "previousslide" cho biết rằng người dùng muốn quay lại trang trình bày trước khi trình bày các trang trình bày.

navigator.mediaSession.setActionHandler('previousslide', () => {
  // Show previous slide.
});

Hỗ trợ trình duyệt

Trang trình bày tiếp theo

Thao tác "nextslide" cho biết người dùng muốn chuyển sang trang trình bày tiếp theo khi trình bày trang trình bày.

navigator.mediaSession.setActionHandler('nextslide', () => {
  // Show next slide.
});

Hỗ trợ trình duyệt

Mẫu

Hãy xem một số mẫu Phiên truyền thông có sự góp mặt của Binder Foundation và Tác phẩm của Jan Morgenstern.

Bản ghi màn hình minh hoạ API Phiên nội dung đa phương tiện.

Tài nguyên

Thông số kỹ thuật của phiên nội dung đa phương tiện: wicg.github.io/mediasession
Vấn đề về thông số kỹ thuật: github.com/WICG/mediasession/issues
Lỗi của Chrome: crbug.com