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

การเล่นวิดีโอเว็บบนอุปกรณ์เคลื่อนที่

François Beaufort

GitHub

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

ในบทความนี้ ฉันจะแสดงวิธีเพิ่มประสิทธิภาพประสบการณ์สื่อที่ก้าวหน้ายิ่งขึ้น และทำให้สมจริงยิ่งขึ้นด้วย Web API มากมาย นี่จึงเป็นเหตุผลที่เราจะสร้างโปรแกรมเล่นวิดีโอบนอุปกรณ์เคลื่อนที่แบบง่ายๆ ด้วยการควบคุมที่กำหนดเอง การเล่นแบบเต็มหน้าจอ และการเล่นขณะล็อกหน้าจอหรือขณะใช้แอปอื่น คุณลองใช้ตัวอย่างตอนนี้และค้นหาโค้ดในที่เก็บ GitHub ของเราได้

การควบคุมที่กำหนดเอง

คุณจะเห็นได้ว่าเลย์เอาต์ HTML ที่เราจะใช้กับโปรแกรมเล่นสื่อนั้นเรียบง่ายมาก โดยองค์ประกอบรูท <div> มีองค์ประกอบสื่อ <video> และองค์ประกอบย่อย <div> สำหรับการควบคุมวิดีโอโดยเฉพาะ

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

<div id="videoContainer">
  <video id="video" src="file.mp4"></video>
  <div id="videoControls"></div>
</div>

อ่านข้อมูลเมตาของวิดีโอ

ก่อนอื่น ให้รอให้ข้อมูลเมตาของวิดีโอโหลดเพื่อตั้งค่าระยะเวลาของวิดีโอ เวลาปัจจุบัน และเริ่มต้นแถบความคืบหน้า โปรดทราบว่าฟังก์ชัน secondsToTimeCode() เป็นฟังก์ชันยูทิลิตีที่กำหนดเองซึ่งฉันเขียนขึ้นว่าจะแปลงจำนวนวินาทีเป็นสตริงในรูปแบบ "hh:mm:ss" ซึ่งเหมาะกับกรณีของเรามากกว่า

<div id="videoContainer">
  <video id="video" src="file.mp4"></video>
  <div id="videoControls">
    <strong>
      <div id="videoCurrentTime"></div>
      <div id="videoDuration"></div>
      <div id="videoProgressBar"></div>
    </strong>
  </div>
</div>

video.addEventListener('loadedmetadata', function () {
  videoDuration.textContent = secondsToTimeCode(video.duration);
  videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
  videoProgressBar.style.transform = `scaleX(${
    video.currentTime / video.duration
  })`;
});

ข้อมูลเมตาของวิดีโอเท่านั้น — **รูปที่ 2** โปรแกรมเล่นสื่อแสดงข้อมูลเมตาของวิดีโอ

เล่น/หยุดวิดีโอชั่วคราว

เมื่อโหลดข้อมูลเมตาของวิดีโอแล้ว เรามาเพิ่มปุ่มแรกที่ช่วยให้ผู้ใช้เล่นและหยุดวิดีโอชั่วคราวด้วย video.play() และ video.pause() โดยขึ้นอยู่กับสถานะการเล่นกัน

<div id="videoContainer">
  <video id="video" src="file.mp4"></video>
  <div id="videoControls">
    <strong><button id="playPauseButton"></button></strong>
    <div id="videoCurrentTime"></div>
    <div id="videoDuration"></div>
    <div id="videoProgressBar"></div>
  </div>
</div>

playPauseButton.addEventListener('click', function (event) {
  event.stopPropagation();
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

หมายเหตุ: ฉันเรียกใช้ event.stopPropagation() เพื่อป้องกันไม่ให้เครื่องจัดการหลัก (เช่น การควบคุมวิดีโอ) ได้รับการแจ้งเตือนเกี่ยวกับเหตุการณ์การคลิก

เราใช้เหตุการณ์วิดีโอ play และ pause แทนการปรับการควบคุมวิดีโอใน Listener เหตุการณ์ click การทำให้เหตุการณ์การควบคุมของเราเป็นไปอย่างยืดหยุ่น (อย่างที่เราจะเห็นในภายหลังเมื่อใช้ Media Session API) และช่วยให้เราซิงค์การควบคุมได้ถ้าเบราว์เซอร์เข้ามาแทรกแซงการเล่น เมื่อวิดีโอเริ่มเล่น เราจะเปลี่ยนสถานะของปุ่มเป็น "หยุดชั่วคราว" และซ่อนการควบคุมวิดีโอ เมื่อวิดีโอหยุดชั่วคราว ก็แค่เปลี่ยนสถานะของปุ่มเป็น "เล่น" และแสดงการควบคุมวิดีโอ

video.addEventListener('play', function () {
  playPauseButton.classList.add('playing');
});

video.addEventListener('pause', function () {
  playPauseButton.classList.remove('playing');
});

เมื่อเวลาที่ระบุโดยแอตทริบิวต์วิดีโอ currentTime มีการเปลี่ยนแปลงผ่านเหตุการณ์วิดีโอ timeupdate เราจะอัปเดตการควบคุมที่กำหนดเองด้วยหากแสดงตัวควบคุมที่กำหนดเอง

video.addEventListener('timeupdate', function () {
  if (videoControls.classList.contains('visible')) {
    videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
    videoProgressBar.style.transform = `scaleX(${
      video.currentTime / video.duration
    })`;
  }
});

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

video.addEventListener('ended', function () {
  playPauseButton.classList.remove('playing');
  video.currentTime = 0;
});

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

มาดูกันต่อและเพิ่มปุ่ม "ย้อนกลับ" และ "กรอไปข้างหน้า" เพื่อให้ผู้ใช้ข้ามเนื้อหาบางส่วนได้ง่ายๆ

<div id="videoContainer">
  <video id="video" src="file.mp4"></video>
  <div id="videoControls">
    <button id="playPauseButton"></button>
    <strong
      ><button id="seekForwardButton"></button>
      <button id="seekBackwardButton"></button
    ></strong>
    <div id="videoCurrentTime"></div>
    <div id="videoDuration"></div>
    <div id="videoProgressBar"></div>
  </div>
</div>

var skipTime = 10; // Time to skip in seconds

seekForwardButton.addEventListener('click', function (event) {
  event.stopPropagation();
  video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
});

seekBackwardButton.addEventListener('click', function (event) {
  event.stopPropagation();
  video.currentTime = Math.max(video.currentTime - skipTime, 0);
});

เช่นเดียวกับก่อนหน้านี้ เราจะใช้เหตุการณ์วิดีโอ seeking และ seeked ที่เริ่มทำงานเพื่อปรับความสว่างของวิดีโอแทนการปรับการจัดรูปแบบวิดีโอใน Listener เหตุการณ์ click ของปุ่มเหล่านี้ คลาส CSS seeking ที่กำหนดเองของฉันนั้นง่ายมาก แค่ filter: brightness(0);

video.addEventListener('seeking', function () {
  video.classList.add('seeking');
});

video.addEventListener('seeked', function () {
  video.classList.remove('seeking');
});

นี่คือด้านล่างสิ่งที่เราได้สร้างขึ้นจนถึงตอนนี้ ในส่วนถัดไป เราจะใช้ ปุ่มเต็มหน้าจอ

เต็มหน้าจอ

เราจะใช้ประโยชน์จาก Web API ต่างๆ เพื่อสร้างประสบการณ์แบบเต็มหน้าจอที่สมบูรณ์แบบและไร้รอยต่อ หากต้องการดูตัวอย่างจริง ให้ดูตัวอย่าง

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

ป้องกันการเต็มหน้าจอโดยอัตโนมัติ

ใน iOS องค์ประกอบ video จะเข้าสู่โหมดเต็มหน้าจอโดยอัตโนมัติเมื่อการเล่นสื่อเริ่มต้นขึ้น เนื่องจากเราพยายามปรับแต่งและควบคุมประสบการณ์สื่อในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ให้ได้มากที่สุด เราจึงขอแนะนำให้คุณตั้งค่าแอตทริบิวต์ playsinline ขององค์ประกอบ video เพื่อบังคับให้องค์ประกอบดังกล่าวเล่นในบรรทัดบน iPhone และไม่ต้องเข้าสู่โหมดเต็มหน้าจอเมื่อเริ่มเล่น โปรดทราบว่าวิธีนี้ไม่มีผลข้างเคียง สำหรับเบราว์เซอร์อื่น

<div id="videoContainer"></div>
  <video id="video" src="file.mp4"></video><strong>playsinline</strong></video>
  <div id="videoControls">...</div>
</div>

ข้อควรระวัง: ตั้งค่า playsinline ในกรณีที่คุณมีการควบคุมสื่อของคุณเองหรือแสดงการควบคุมดั้งเดิมพร้อมกับ <video controls> เท่านั้น

เปิด/ปิดโหมดเต็มหน้าจอเมื่อคลิกปุ่ม

เมื่อป้องกันโหมดเต็มหน้าจออัตโนมัติ เราจึงต้องจัดการโหมดเต็มหน้าจอสำหรับวิดีโอด้วย API เต็มหน้าจอ เมื่อผู้ใช้ คลิก "ปุ่มเต็มหน้าจอ" ให้ออกจากโหมดเต็มหน้าจอด้วย document.exitFullscreen() หากเอกสารใช้โหมดเต็มหน้าจออยู่ มิเช่นนั้น ให้ขอโหมดเต็มหน้าจอในคอนเทนเนอร์วิดีโอโดยใช้เมธอด requestFullscreen() (หากมี) หรือใช้ webkitEnterFullscreen() ในองค์ประกอบวิดีโอสำรองใน iOS เท่านั้น

<div id="videoContainer">
  <video id="video" src="file.mp4"></video>
  <div id="videoControls">
    <button id="playPauseButton"></button>
    <button id="seekForwardButton"></button>
    <button id="seekBackwardButton"></button>
    <strong><button id="fullscreenButton"></button></strong>
    <div id="videoCurrentTime"></div>
    <div id="videoDuration"></div>
    <div id="videoProgressBar"></div>
  </div>
</div>

fullscreenButton.addEventListener('click', function (event) {
  event.stopPropagation();
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    requestFullscreenVideo();
  }
});

function requestFullscreenVideo() {
  if (videoContainer.requestFullscreen) {
    videoContainer.requestFullscreen();
  } else {
    video.webkitEnterFullscreen();
  }
}

document.addEventListener('fullscreenchange', function () {
  fullscreenButton.classList.toggle('active', document.fullscreenElement);
});

เปิด/ปิดการเปลี่ยนการวางแนวหน้าจอแบบเต็มหน้าจอ

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

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

if ('orientation' in screen) {
  screen.orientation.addEventListener('change', function () {
    // Let's request fullscreen if user switches device in landscape mode.
    if (screen.orientation.type.startsWith('landscape')) {
      requestFullscreenVideo();
    } else if (document.fullscreenElement) {
      document.exitFullscreen();
    }
  });
}

หน้าจอล็อกในแนวนอนเมื่อคลิกปุ่ม

เนื่องจากวิดีโออาจจะดูดีกว่าในโหมดแนวนอน เราจึงอาจต้องการล็อกหน้าจอเป็นแนวนอนเมื่อผู้ใช้คลิก "ปุ่มเต็มหน้าจอ" เราจะรวม Screen Orientation API ที่ใช้ก่อนหน้านี้และการค้นหาสื่อบางส่วนเข้าด้วยกันเพื่อให้แน่ใจว่าประสบการณ์นี้ดีที่สุด

การล็อกหน้าจอแนวนอนง่ายพอๆ กับการโทร screen.orientation.lock('landscape') อย่างไรก็ตาม เราควรทำเฉพาะเมื่ออุปกรณ์อยู่ในโหมดแนวตั้งด้วย matchMedia('(orientation: portrait)') และถือด้วยมือเดียวได้ด้วย matchMedia('(max-device-width: 768px)') เท่านั้นเนื่องจากจะไม่ใช่ประสบการณ์การใช้งานที่ดีสำหรับผู้ใช้แท็บเล็ต

fullscreenButton.addEventListener('click', function (event) {
  event.stopPropagation();
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    requestFullscreenVideo();
    <strong>lockScreenInLandscape();</strong>;
  }
});

function lockScreenInLandscape() {
  if (!('orientation' in screen)) {
    return;
  }
  // Let's force landscape mode only if device is in portrait mode and can be held in one hand.
  if (
    matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches
  ) {
    screen.orientation.lock('landscape');
  }
}

ปลดล็อกหน้าจอเมื่อเปลี่ยนการวางแนวอุปกรณ์

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

ในการแก้ปัญหานี้ ลองใช้ Device Orientation API (หากมี) โดย API นี้ให้ข้อมูลจากฮาร์ดแวร์ที่วัดตำแหน่งและการเคลื่อนไหวของอุปกรณ์ในอวกาศ เช่น เครื่องวัดการหมุนและเข็มทิศดิจิทัลสำหรับการวางแนวของอุปกรณ์ และตัวตรวจวัดความเร่งสำหรับอัตราความเร็ว เมื่อเราตรวจพบการเปลี่ยนแปลงการวางแนวอุปกรณ์ ให้ปลดล็อกหน้าจอด้วย screen.orientation.unlock() หากผู้ใช้ถืออุปกรณ์ในโหมดแนวตั้งและหน้าจอล็อกอยู่ในโหมดแนวนอน

function lockScreenInLandscape() {
  if (!('orientation' in screen)) {
    return;
  }
  // Let's force landscape mode only if device is in portrait mode and can be held in one hand.
  if (matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches) {
    screen.orientation.lock('landscape')
    <strong>.then(function() {
      listenToDeviceOrientationChanges();
    })</strong>;
  }
}

function listenToDeviceOrientationChanges() {
  if (!('DeviceOrientationEvent' in window)) {
    return;
  }
  var previousDeviceOrientation, currentDeviceOrientation;
  window.addEventListener(
    'deviceorientation',
    function onDeviceOrientationChange(event) {
      // event.beta represents a front to back motion of the device and
      // event.gamma a left to right motion.
      if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
        previousDeviceOrientation = currentDeviceOrientation;
        currentDeviceOrientation = 'landscape';
        return;
      }
      if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
        previousDeviceOrientation = currentDeviceOrientation;
        // When device is rotated back to portrait, let's unlock screen orientation.
        if (previousDeviceOrientation == 'landscape') {
          screen.orientation.unlock();
          window.removeEventListener(
            'deviceorientation',
            onDeviceOrientationChange,
          );
        }
      }
    },
  );
}

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

การเล่นขณะล็อกหน้าจอหรือขณะใช้แอปอื่น

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

หยุดวิดีโอชั่วคราวเมื่อมีการเปลี่ยนแปลงระดับการมองเห็นของหน้า

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

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

document.addEventListener('visibilitychange', function () {
  // Pause video when page is hidden.
  if (document.hidden) {
    video.pause();
  }
});

แสดง/ซ่อนปุ่มปิดเสียงเมื่อเปลี่ยนระดับการมองเห็นของวิดีโอ

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

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

หมายเหตุ: หากมีวิดีโอจำนวนมากในหน้าเว็บ และมีการใช้ Intersection Observer API เพื่อหยุดชั่วคราว / ปิดเสียงวิดีโอนอกหน้าจอ คุณอาจต้องรีเซ็ตแหล่งที่มาของวิดีโอด้วย video.src = null แทน เนื่องจากจะทำให้ปล่อยทรัพยากรจำนวนมากในกรณีที่ต้องเลื่อนได้ไม่รู้จบ

<button id="muteButton"></button>

if ('IntersectionObserver' in window) {
  // Show/hide mute button based on video visibility in the page.
  function onIntersection(entries) {
    entries.forEach(function (entry) {
      muteButton.hidden = video.paused || entry.isIntersecting;
    });
  }
  var observer = new IntersectionObserver(onIntersection);
  observer.observe(video);
}

muteButton.addEventListener('click', function () {
  // Mute/unmute video on button click.
  video.muted = !video.muted;
});

video.addEventListener('volumechange', function () {
  muteButton.classList.toggle('active', video.muted);
});

เล่นวิดีโอครั้งละ 1 รายการ

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

// This array should be initialized once all videos have been added.
var videos = Array.from(document.querySelectorAll('video'));

videos.forEach(function (video) {
  video.addEventListener('play', pauseOtherVideosPlaying);
});

function pauseOtherVideosPlaying(event) {
  var videosToPause = videos.filter(function (video) {
    return !video.paused && video != event.target;
  });
  // Pause all other videos currently playing.
  videosToPause.forEach(function (video) {
    video.pause();
  });
}

ปรับแต่งการแจ้งเตือนสื่อ

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

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

มาดูวิธีปรับแต่งการแจ้งเตือนสื่อนี้โดยการตั้งค่าข้อมูลเมตาเซสชันสื่อบางรายการ เช่น ชื่อ ศิลปิน ชื่ออัลบั้ม และอาร์ตเวิร์กด้วย Media Session API

playPauseButton.addEventListener('click', function(event) {
  event.stopPropagation();
  if (video.paused) {
    video.play()
    <strong>.then(function() {
      setMediaSession();
    });</strong>
  } else {
    video.pause();
  }
});

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

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

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

if ('mediaSession' in navigator) {
  navigator.mediaSession.setActionHandler('previoustrack', function () {
    // User clicked "Previous Track" media notification icon.
    playPreviousVideo(); // load and play previous video
  });
  navigator.mediaSession.setActionHandler('nexttrack', function () {
    // User clicked "Next Track" media notification icon.
    playNextVideo(); // load and play next video
  });
}

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

อ้อ การยกเลิกการตั้งค่าเครื่องจัดการการดำเนินการกับสื่อก็ง่ายพอๆ กับการกำหนดตัวแฮนเดิลให้ null เลย

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

if ('mediaSession' in navigator) {
  let skipTime = 10; // Time to skip in seconds

  navigator.mediaSession.setActionHandler('seekbackward', function () {
    // User clicked "Seek Backward" media notification icon.
    video.currentTime = Math.max(video.currentTime - skipTime, 0);
  });
  navigator.mediaSession.setActionHandler('seekforward', function () {
    // User clicked "Seek Forward" media notification icon.
    video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
  });
}

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

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

การเล่นวิดีโอเว็บบนอุปกรณ์เคลื่อนที่

การควบคุมที่กำหนดเอง

อ่านข้อมูลเมตาของวิดีโอ

เล่น/หยุดวิดีโอชั่วคราว

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

เต็มหน้าจอ

ป้องกันการเต็มหน้าจอโดยอัตโนมัติ

เปิด/ปิดโหมดเต็มหน้าจอเมื่อคลิกปุ่ม

เปิด/ปิดการเปลี่ยนการวางแนวหน้าจอแบบเต็มหน้าจอ

หน้าจอล็อกในแนวนอนเมื่อคลิกปุ่ม

ปลดล็อกหน้าจอเมื่อเปลี่ยนการวางแนวอุปกรณ์

การเล่นขณะล็อกหน้าจอหรือขณะใช้แอปอื่น

หยุดวิดีโอชั่วคราวเมื่อมีการเปลี่ยนแปลงระดับการมองเห็นของหน้า

แสดง/ซ่อนปุ่มปิดเสียงเมื่อเปลี่ยนระดับการมองเห็นของวิดีโอ

เล่นวิดีโอครั้งละ 1 รายการ

ปรับแต่งการแจ้งเตือนสื่อ

ความคิดเห็น