คุณจะสร้างประสบการณ์สื่อมือถือบนเว็บที่ดีที่สุดได้อย่างไร ง่ายนิดเดียว ทั้งหมดนี้ขึ้นอยู่กับการมีส่วนร่วมของผู้ใช้และความสำคัญที่คุณให้กับสื่อในหน้าเว็บ ฉันคิดว่าเราทุกคนเห็นตรงกันว่าหากวิดีโอเป็นสาเหตุที่ผู้ใช้เข้าชม ประสบการณ์ของผู้ใช้จะต้องสมจริงและดึงดูดอีกครั้ง
ในบทความนี้ ฉันจะแสดงวิธีเพิ่มประสิทธิภาพประสบการณ์สื่อที่ก้าวหน้ายิ่งขึ้น และทำให้สมจริงยิ่งขึ้นด้วย 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
})`;
});
เล่น/หยุดวิดีโอชั่วคราว
เมื่อโหลดข้อมูลเมตาของวิดีโอแล้ว เรามาเพิ่มปุ่มแรกที่ช่วยให้ผู้ใช้เล่นและหยุดวิดีโอชั่วคราวด้วย 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();
}
});
เราใช้เหตุการณ์วิดีโอ 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>
เปิด/ปิดโหมดเต็มหน้าจอเมื่อคลิกปุ่ม
เมื่อป้องกันโหมดเต็มหน้าจออัตโนมัติ เราจึงต้องจัดการโหมดเต็มหน้าจอสำหรับวิดีโอด้วย 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
ใช้เพื่ออัปเดตการจัดรูปแบบปุ่มปิดเสียง
<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 ก็คือถาดการแจ้งเตือนไม่ได้เป็นเพียงที่เดียวที่จะแสดงข้อมูลเมตาและการควบคุมของสื่อได้ การแจ้งเตือนสื่อจะซิงค์กับอุปกรณ์ที่สวมใส่ได้ที่จับคู่ไว้โดยอัตโนมัติ และยังแสดงบนหน้าจอล็อกด้วย