หน้านี้ได้รับการแปลโดย Cloud Translation API

ปรับแต่งการแจ้งเตือนสื่อและการควบคุมการเล่นด้วย Media Session API

วิธีผสานรวมกับปุ่มสื่อของฮาร์ดแวร์ ปรับแต่งการแจ้งเตือนสื่อ และอื่นๆ

François Beaufort

เราได้เปิดตัว Media Session API เพื่อแจ้งให้ผู้ใช้ทราบว่ามีการเล่นอะไรอยู่ในเบราว์เซอร์และควบคุมการเล่นได้โดยไม่ต้องกลับไปที่หน้าที่เปิดใช้งาน ซึ่งช่วยให้นักพัฒนาเว็บปรับแต่งประสบการณ์นี้ผ่านข้อมูลเมตาในการแจ้งเตือนสื่อที่กําหนดเอง เหตุการณ์ของสื่อ เช่น การเล่น หยุดชั่วคราว เลื่อนหา การเปลี่ยนแทร็ก และเหตุการณ์ของการประชุมทางวิดีโอ เช่น ปิด/เปิดเสียงไมโครโฟน เปิด/ปิดกล้อง และวางสาย การปรับแต่งเหล่านี้ใช้ได้ในบริบทต่างๆ เช่น ฮับสื่อบนเดสก์ท็อป การแจ้งเตือนสื่อบนอุปกรณ์เคลื่อนที่ และแม้แต่ในอุปกรณ์ที่สวมใส่ได้ เราจะอธิบายการปรับแต่งเหล่านี้ในบทความนี้

ภาพหน้าจอของบริบทเซสชันสื่อ — ฮับสื่อบนเดสก์ท็อป การแจ้งเตือนสื่อบนอุปกรณ์เคลื่อนที่ และอุปกรณ์ที่สวมใส่ได้

เกี่ยวกับ Media Session API

Media Session API มีประโยชน์และความสามารถหลายประการ ดังนี้

รองรับปุ่มสื่อของฮาร์ดแวร์
คุณสามารถปรับแต่งการแจ้งเตือนสื่อในอุปกรณ์เคลื่อนที่ เดสก์ท็อป และอุปกรณ์ที่สวมใส่ได้
ฮับสื่อมีให้บริการบนเดสก์ท็อป
การควบคุมสื่อในหน้าจอล็อกพร้อมใช้งานใน ChromeOS และอุปกรณ์เคลื่อนที่
การควบคุมหน้าต่างแบบภาพซ้อนภาพมีไว้สำหรับการเล่นเสียง, การประชุมทางวิดีโอ และการนำเสนอสไลด์
การผสานรวม Assistant บนอุปกรณ์เคลื่อนที่พร้อมใช้งาน

การรองรับเบราว์เซอร์

แหล่งที่มา

ตัวอย่างต่อไปนี้จะช่วยอธิบายประเด็นเหล่านี้

ตัวอย่างที่ 1: หากผู้ใช้กดแป้นสื่อ "แทร็กถัดไป" บนแป้นพิมพ์ นักพัฒนาเว็บจะจัดการการดำเนินการของผู้ใช้นี้ได้ไม่ว่าเบราว์เซอร์จะอยู่ในเบื้องหน้าหรือเบื้องหลัง

ตัวอย่างที่ 2: หากผู้ใช้ฟังพอดแคสต์บนเว็บขณะที่หน้าจออุปกรณ์ล็อกอยู่ ผู้ใช้จะยังคงกดไอคอน "กรอกลับ" จากตัวควบคุมสื่อบนหน้าจอล็อกเพื่อให้นักพัฒนาเว็บเลื่อนเวลาการเล่นกลับได้ 2-3 วินาที

ตัวอย่างที่ 3: หากผู้ใช้มีแท็บที่เล่นเสียงอยู่ ผู้ใช้สามารถหยุดการเล่นจากฮับสื่อบนเดสก์ท็อปได้อย่างง่ายดายเพื่อให้นักพัฒนาเว็บมีโอกาสล้างสถานะ

ตัวอย่างที่ 4: หากผู้ใช้อยู่ในวิดีโอคอล ก็สามารถกดตัวควบคุม "สลับไมโครโฟน" ในหน้าต่างการแสดงภาพซ้อนภาพเพื่อหยุดเว็บไซต์ไม่ให้รับข้อมูลไมโครโฟนได้

ซึ่งทําได้ผ่านอินเทอร์เฟซ 2 แบบ ได้แก่ อินเทอร์เฟซ MediaSession และอินเทอร์เฟซ MediaMetadata รายการแรกช่วยให้ผู้ใช้ควบคุมสิ่งที่กำลังเล่นอยู่ได้ วิธีที่ 2 คือวิธีที่คุณบอก MediaSession ว่าต้องควบคุมสิ่งใด

ตัวอย่างเช่น รูปภาพด้านล่างแสดงวิธีที่อินเทอร์เฟซเหล่านี้เกี่ยวข้องกับตัวควบคุมสื่อที่เฉพาะเจาะจง ซึ่งในกรณีนี้คือการแจ้งเตือนสื่อบนอุปกรณ์เคลื่อนที่

ภาพอินเทอร์เฟซเซสชันสื่อ — องค์ประกอบของการแจ้งเตือนสื่อบนอุปกรณ์เคลื่อนที่

แจ้งให้ผู้ใช้ทราบว่ากำลังเล่นอะไรอยู่

เมื่อเว็บไซต์เล่นเสียงหรือวิดีโอ ผู้ใช้จะได้รับการแจ้งเตือนสื่อโดยอัตโนมัติในถาดการแจ้งเตือนบนอุปกรณ์เคลื่อนที่หรือฮับสื่อบนเดสก์ท็อป เบราว์เซอร์จะพยายามแสดงข้อมูลที่เหมาะสมที่สุดโดยใช้ชื่อเอกสารและรูปภาพไอคอนที่ใหญ่ที่สุดที่พบ Media Session API ช่วยให้คุณปรับแต่งการแจ้งเตือนสื่อด้วยข้อมูลเมตาของสื่อที่สมบูรณ์ยิ่งขึ้นได้ เช่น ชื่อ ศิลปิน ชื่ออัลบั้ม และอาร์ตเวิร์ก ดังที่แสดงด้านล่าง

Chrome จะขอโฟกัสเสียง "สมบูรณ์" เพื่อแสดงการแจ้งเตือนสื่อเฉพาะเมื่อระยะเวลาของสื่ออยู่ที่อย่างน้อย 5 วินาที วิธีนี้ช่วยให้มั่นใจได้ว่าเสียงที่เกิดขึ้นโดยไม่ตั้งใจ เช่น เสียงกริ่ง จะไม่แสดงการแจ้งเตือน

// 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.
}

เมื่อการเล่นสิ้นสุดลง คุณไม่จำเป็นต้อง "ปล่อย" เซสชันสื่อเนื่องจากการแจ้งเตือนจะหายไปโดยอัตโนมัติ โปรดทราบว่าระบบจะใช้navigator.mediaSession.metadataเมื่อเริ่มเล่นรายการถัดไป ด้วยเหตุนี้ คุณจึงควรอัปเดตข้อมูลเมื่อแหล่งที่มาของการเล่นสื่อมีการเปลี่ยนแปลงเพื่อให้แน่ใจว่าข้อมูลที่เกี่ยวข้องจะแสดงในการแจ้งเตือนสื่อ

สิ่งที่ควรทราบเกี่ยวกับข้อมูลเมตาของสื่อมีดังนี้

อาร์เรย์อาร์ตเวิร์กการแจ้งเตือนรองรับ URL ของไฟล์กลุ่มและ URL ของข้อมูล
หากไม่ได้กำหนดอาร์ตเวิร์กและมีรูปภาพไอคอน (ระบุโดยใช้ <link rel=icon>) ในขนาดที่ต้องการ การแจ้งเตือนสื่อจะใช้อาร์ตเวิร์กดังกล่าว
ขนาดเป้าหมายของอาร์ตเวิร์กการแจ้งเตือนใน Chrome สำหรับ Android คือ 512x512 สำหรับอุปกรณ์ระดับล่าง จะเป็น 256x256
แอตทริบิวต์ title ขององค์ประกอบ HTML สื่อใช้ในวิดเจ็ต "กำลังเล่น" ของ macOS
หากฝังทรัพยากรสื่อ (เช่น ใน iframe) คุณต้องตั้งค่าข้อมูลจาก Media Session API จากบริบทที่ฝัง ดูข้อมูลโค้ดด้านล่าง

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

นอกจากนี้ คุณยังเพิ่มข้อมูลแต่ละบท เช่น ชื่อส่วน การประทับเวลา และภาพหน้าจอลงในข้อมูลเมตาของสื่อได้ด้วย ซึ่งจะช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของเนื้อหาสื่อได้

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' },
    ]
  }]
});

ข้อมูลบทที่แสดงในการแจ้งเตือนสื่อของ ChromeOS — การแจ้งเตือนสื่อที่นำเสนอส่วนเนื้อหาใน ChromeOS

อนุญาตให้ผู้ใช้ควบคุมสิ่งที่เล่นอยู่

การดำเนินการกับเซสชันสื่อคือการกระทำ (เช่น "เล่น" หรือ "หยุดชั่วคราว") ที่เว็บไซต์จะจัดการให้ผู้ใช้ได้เมื่อผู้ใช้โต้ตอบกับการเล่นสื่อปัจจุบัน การดําเนินการคล้ายกับและทํางานคล้ายกับเหตุการณ์ เช่นเดียวกับเหตุการณ์ การดำเนินการต่างๆ จะใช้โดยการตั้งค่าตัวแฮนเดิลในออบเจ็กต์ที่เหมาะสม ซึ่งในกรณีนี้คือ MediaSession การดําเนินการบางอย่างจะทริกเกอร์เมื่อผู้ใช้กดปุ่มจากหูฟัง อุปกรณ์ระยะไกลอีกเครื่องหนึ่ง แป้นพิมพ์ หรือโต้ตอบกับการแจ้งเตือนสื่อ

ภาพหน้าจอของการแจ้งเตือนสื่อใน Windows 10 — การแจ้งเตือนสื่อที่ปรับแต่งใน Windows 10

เนื่องจากระบบอาจไม่รองรับการดำเนินการบางอย่างในเซสชันสื่อ เราจึงขอแนะนำให้ใช้บล็อก try…catch เมื่อตั้งค่า

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.`);
  }
}

การตั้งค่าตัวแฮนเดิลการดำเนินการของเซสชันสื่อเป็น 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.`);
}

เมื่อตั้งค่าแล้ว แฮนเดิลการดำเนินการของเซสชันสื่อจะยังคงอยู่ตลอดการเล่นสื่อ ซึ่งคล้ายกับรูปแบบตัวรับเหตุการณ์ ยกเว้นการจัดการเหตุการณ์หมายความว่าเบราว์เซอร์จะหยุดทําลักษณะการทำงานเริ่มต้นและใช้เป็นสัญญาณว่าเว็บไซต์รองรับการดำเนินการของสื่อ ดังนั้น ตัวควบคุมการดำเนินการของสื่อจะไม่แสดงเว้นแต่จะมีการตั้งค่าตัวแฮนเดิลการดำเนินการที่เหมาะสม

ภาพหน้าจอของวิดเจ็ตกำลังเล่นใน macOS Big Sur — วิดเจ็ตกำลังเล่นใน macOS Big Sur

เล่น/หยุดชั่วคราว

การดำเนินการ "play" บ่งบอกว่าผู้ใช้ต้องการเล่นสื่อต่อ ส่วน "pause" บ่งบอกว่าต้องการหยุดชั่วคราว

ไอคอน "เล่น/หยุดชั่วคราว" จะแสดงในการแจ้งเตือนสื่อเสมอ และเบราว์เซอร์จะจัดการเหตุการณ์สื่อที่เกี่ยวข้องโดยอัตโนมัติ หากต้องการลบล้างลักษณะการทำงานเริ่มต้น ให้จัดการการดำเนินการของสื่อ "เล่น" และ "หยุดชั่วคราว" ดังที่แสดงด้านล่าง

เบราว์เซอร์อาจพิจารณาไม่ให้เว็บไซต์เล่นสื่อเมื่อกรอวิดีโอหรือโหลด เป็นต้น ในกรณีนี้ ให้ลบล้างลักษณะการทำงานนี้โดยตั้งค่า navigator.mediaSession.playbackState เป็น "playing" หรือ "paused" เพื่อให้ UI ของเว็บไซต์ซิงค์กับการควบคุมการแจ้งเตือนสื่อ

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';
});

แทร็กก่อนหน้า

การดําเนินการ "previoustrack" บ่งชี้ว่าผู้ใช้ต้องการเริ่มการเล่นสื่อปัจจุบันตั้งแต่ต้นหากการเล่นสื่อมีแนวคิดเกี่ยวกับจุดเริ่มต้น หรือต้องการไปยังรายการก่อนหน้าในเพลย์ลิสต์หากการเล่นสื่อมีแนวคิดเกี่ยวกับเพลย์ลิสต์

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

แทร็กถัดไป

การดำเนินการ "nexttrack" บ่งบอกว่าผู้ใช้ต้องการย้ายการเล่นสื่อไปยังรายการถัดไปในเพลย์ลิสต์ หากการเล่นสื่อมีแนวคิดเกี่ยวกับเพลย์ลิสต์

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

หยุด

การดําเนินการ "stop" บ่งชี้ว่าผู้ใช้ต้องการหยุดการเล่นสื่อและล้างสถานะหากเหมาะสม

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

กรอกลับ/ไปข้างหน้า

การดำเนินการ "seekbackward" บ่งชี้ว่าผู้ใช้ต้องการย้ายเวลาการเล่นสื่อไปข้างหลังเป็นระยะเวลาสั้นๆ ขณะที่ "seekforward" บ่งชี้ความต้องการที่จะย้ายเวลาการเล่นสื่อไปข้างหน้าในช่วงเวลาสั้นๆ ระยะเวลาสั้นๆ หมายถึง 2-3 วินาทีในทั้ง 2 กรณี

ค่า seekOffset ที่ระบุไว้ในตัวแฮนเดิลการดําเนินการคือเวลาเป็นวินาทีที่จะเลื่อนเวลาเล่นสื่อ หากไม่ได้ระบุ (เช่น undefined) คุณควรใช้ระยะเวลาที่เหมาะสม (เช่น 10-30 วินาที)

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.
});

ไปยังเวลาที่ต้องการ

การดําเนินการ "seekto" บ่งชี้ว่าผู้ใช้ต้องการเลื่อนเวลาเล่นสื่อไปที่เวลาที่ต้องการ

ค่า seekTime ที่ระบุในตัวแฮนเดิลการดําเนินการคือเวลาเป็นวินาทีที่จะย้ายเวลาเล่นสื่อไป

บูลีน fastSeek ที่ให้ไว้ในเครื่องจัดการการดำเนินการจะเป็นจริงหากมีการเรียกการดำเนินการหลายครั้งเป็นส่วนหนึ่งของลำดับ และนี่ไม่ใช่การเรียกสุดท้ายในลำดับนั้น

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.
});

ตั้งค่าตำแหน่งการเล่น

การแสดงตำแหน่งการเล่นสื่ออย่างถูกต้องในการแจ้งเตือนนั้นง่ายเพียงแค่ตั้งค่าสถานะตำแหน่งในเวลาที่เหมาะสมตามที่แสดงด้านล่าง สถานะตำแหน่งคือชุดค่าผสมของความเร็วในการเล่นสื่อ ระยะเวลา และเวลาปัจจุบัน

ภาพหน้าจอของตัวควบคุมสื่อในหน้าจอล็อกใน ChromeOS — การควบคุมสื่อในหน้าจอล็อกของ ChromeOS

คุณต้องระบุระยะเวลาและต้องเป็นค่าบวก ตําแหน่งต้องเป็นค่าบวกและน้อยกว่าระยะเวลา อัตราการเล่นต้องมากกว่า 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();
});

รีเซ็ตสถานะตำแหน่งนั้นง่ายเพียงตั้งค่าเป็น null

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

การดำเนินการในการประชุมทางวิดีโอ

เมื่อผู้ใช้วางวิดีโอคอลไว้ในหน้าต่างการแสดงภาพซ้อนภาพ เบราว์เซอร์อาจแสดงการควบคุมไมโครโฟนและกล้อง รวมถึงการควบคุมการปิดสาย เมื่อผู้ใช้คลิก เว็บไซต์จะจัดการกับผู้ใช้เหล่านั้นผ่านการประชุมทางวิดีโอด้านล่าง ดูตัวอย่างได้ที่ตัวอย่างการประชุมทางวิดีโอ

ภาพหน้าจอของการควบคุมการประชุมทางวิดีโอในหน้าต่างการแสดงภาพซ้อนภาพ — ตัวควบคุมการประชุมทางวิดีโอในหน้าต่างการแสดงภาพซ้อนภาพ

สลับไมโครโฟน

การดําเนินการ "togglemicrophone" บ่งบอกว่าผู้ใช้ต้องการปิดหรือเปิดเสียงไมโครโฟน เมธอด setMicrophoneActive(isActive) จะบอกให้เบราว์เซอร์ทราบว่าเว็บไซต์ถือว่าไมโครโฟนทำงานอยู่หรือไม่

let isMicrophoneActive = false;

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

สลับกล้อง

การดําเนินการ "togglecamera" บ่งชี้ว่าผู้ใช้ต้องการเปิดหรือปิดกล้องที่ใช้งานอยู่ วิธีการ setCameraActive(isActive) บ่งชี้ว่าเบราว์เซอร์ถือว่าเว็บไซต์มีการใช้งานอยู่หรือไม่

let isCameraActive = false;

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

วางสาย

การดําเนินการ "hangup" บ่งบอกว่าผู้ใช้ต้องการปิดสาย

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

การนำเสนอการดำเนินการในสไลด์

เมื่อผู้ใช้ใส่งานนำเสนอของสไลด์ลงในหน้าต่างแบบภาพในภาพ เบราว์เซอร์อาจแสดงตัวควบคุมสำหรับการไปยังส่วนต่างๆ ของสไลด์ เมื่อผู้ใช้คลิกปุ่มเหล่านั้น เว็บไซต์จะจัดการผู้ใช้ผ่าน Media Session API ดูตัวอย่างได้ที่ตัวอย่างการนำเสนอสไลด์

สไลด์ก่อนหน้า

การดําเนินการ "previousslide" บ่งชี้ว่าผู้ใช้ต้องการกลับไปที่สไลด์ก่อนหน้าเมื่อนำเสนอสไลด์

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

การรองรับเบราว์เซอร์

สไลด์ถัดไป

การดําเนินการ "nextslide" บ่งบอกว่าผู้ใช้ต้องการไปยังสไลด์ถัดไปเมื่อนำเสนอสไลด์

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

การรองรับเบราว์เซอร์

ตัวอย่าง

ดูตัวอย่างเซสชันสื่อบางส่วนที่แสดงผลงานของ Blender Foundation และJan Morgenstern

Screencast ที่แสดง Media Session API

แหล่งข้อมูล

ข้อกำหนดเซสชันสื่อ: wicg.github.io/mediasession
ปัญหาเกี่ยวกับข้อกำหนด: github.com/WICG/mediasession/issues
ข้อบกพร่องของ Chrome: crbug.com