Donanım medya tuşlarıyla entegrasyon, medya bildirimlerini özelleştirme ve daha fazlasını yapma.
Kullanıcılara tarayıcılarında o anda ne çaldığını bildirmek ve bunu kontrol etmek için geri dönmesine gerek kalmadan Media Session API'si, tanıttık. Web geliştiricilerinin bu deneyimi özelleştirerek oynatma, duraklatma ve oynatma gibi medya etkinliklerindeki sesi kapatma/açma gibi video konferans etkinliklerini ve video konferans etkinliklerini arama, izleme mikrofonu açın/kapatın ve telefonu kapatın. Bu özelleştirmeler, masaüstü medya merkezleri, medya bildirimleri kullanıcılara ulaşabiliyoruz. Bu özelleştirmeleri bu makaleye göz atın.
![Medya Oturumu bağlamlarının ekran görüntüleri.](https://web.developers.google.cn/static/articles/media-session/image/screenshots-media-sessio-f4629fe9ea633.jpg?authuser=8&hl=tr)
Media Session API'si hakkında
Media session API'si çeşitli avantajlar ve özellikler sunar:
- Donanım medya tuşları desteklenir.
- Medya bildirimleri; mobil cihazlarda, masaüstünde ve eşlenmiş giyilebilir cihazlarda özelleştirilmiştir.
- Medya merkezi masaüstünde kullanılabilir.
- Kilit ekranı medya denetimleri, ChromeOS'te ve mobil cihazlarda kullanılabilir.
- Pencere içinde pencere kontrolleri ses çalma için kullanılabilir. video konferans ve slayt sunma gibi yöntemleri kullanabilirsiniz.
- Mobil cihazlarda Asistan entegrasyonu kullanılabilir.
Birkaç örnekle bu noktaların bazılarını görebilirsiniz.
1. Örnek: Kullanıcılar "sonraki parça"ya bastığında klavyedeki medya tuşunu kullanırken Web geliştiricileri, tarayıcı ön planda olsa da bu kullanıcı işlemini gerçekleştirebilir arka plana alabilirsiniz.
2. Örnek: Kullanıcılar, cihazları sırasında web'de bir podcast dinlerse kullanıcılar "geri sar" düğmesine basabilir. kilit simgesinden web geliştiricilerinin oynatma süresini birkaç puan geri taşıyabilmeleri için medya denetimlerini ekranlayın saniye.
3. Örnek: Kullanıcıların ses çalan sekmeleri varsa içeriği kolayca durdurabilirler medya merkezinden oynatabilirsiniz. Bu şekilde, web geliştiricilerine durumunu netleştirmesine yardımcı olabilir.
4. Örnek: Görüntülü görüşme yapan kullanıcılar "açma/kapatma" düğmesine mikrofon" simgesini tıklayın. mikrofon verisi alınıyor.
Bu işlem iki farklı arayüzle yapılır: MediaSession
arayüzü
MediaMetadata
arayüzü. İlki, kullanıcıların satın alma işlemi yaparken
çalıyor. İkincisi, MediaSession
adlı müşteriye neyin kontrol edilmesi gerektiğini nasıl bildireceğinizdir.
Örnek vermek gerekirse, aşağıdaki resimde bu arayüzlerin belirli bir arayüzle ilişkisi medya denetimleri. Bu durumda mobil cihazda bir medya bildirimi.
![Medya Oturumu arayüzlerinin resmi.](https://web.developers.google.cn/static/articles/media-session/image/media-session-interfaces-c7bc0962a921c.jpg?authuser=8&hl=tr)
Kullanıcılara hangi videonun çaldığını bildirin
Bir web sitesinde ses veya video oynatıldığında kullanıcılar otomatik olarak medya alır cihazınızdaki bildirim tepsisinde veya masaüstü. Tarayıcı, uygun bilgileri göstermek için dokümanın başlığını ve bulabildiği en büyük simge resmini gösterir. Medya Oturumu ile medya bildirimini biraz daha zengin medya ile özelleştirmek mümkündür başlık, sanatçı adı, albüm adı ve eser gibi meta verileri aşağıda görebilirsiniz.
Chrome "tam" istiyor ses odağı, medya bildirimlerinin yalnızca medya süresi en az 5 saniye olmalıdır. Bu sayede, arızi seslerin bildirimler gösterilmez.
// 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.
}
Oynatma sona erdiğinde "yayınlama" gerekmez medya oturumunda
bildirimi otomatik olarak kaybolur. Gelecekteki
Sonraki oynatma başlatıldığında navigator.mediaSession.metadata
kullanılacak
olabiliyor. Bu nedenle, medya oynatma kaynağı veya
veya değişikliklerin medya bildirimlerinde
ilgili bilginin gösterilmesi için kullanılır.
Medya meta verileriyle ilgili dikkat edilmesi gereken birkaç nokta vardır.
- Bildirim posteri dizisi, blob URL'lerini ve veri URL'lerini destekler.
- Herhangi bir poster tanımlanmamışsa ve istediğiniz boyutta bir simge resmi (
<link rel=icon>
kullanılarak belirtilir) varsa medya bildirimleri bunu kullanır. - Android için Chrome'da bildirim posterlerinin hedef boyutu:
512x512
. Örneğin, düşük teknoloji cihazlarda256x256
. - Medya HTML öğesinin
title
özelliği, "Şimdi oynatılıyor"da kullanılır macOS widget'ı. - Medya kaynağı yerleştirilmişse (ör. iFrame içine) Media Session API'si bilgileri, yerleştirilmiş bağlamdan ayarlanmalıdır. Aşağıdaki snippet'i inceleyin.
<iframe id="iframe">
<video>...</video>
</iframe>
<script>
iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
...
});
</script>
Medya meta verilerine bölüm başlığı, zaman damgası ve ekran görüntüsü gibi tek tek bölüm bilgileri de ekleyebilirsiniz. Bu, kullanıcıların medya içeriği arasında gezinmesine olanak tanır.
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 medya bildiriminde bölüm bilgileri görüntülenir.](https://web.developers.google.cn/static/articles/media-session/image/screenshot-notification-chapter.jpg?authuser=8&hl=tr)
Kullanıcıların oynatılan içeriği kontrol etmesine izin verin
Medya oturumu işlemi, bir web sitesinin
geçerli medya oynatmayla
etkileşimde bulunan kullanıcılara gösterilecek. İşlemler
ve olaylarla hemen hemen aynı şekilde işler. Etkinlikler gibi işlemler de
uygun bir nesnede işleyicilerin ayarlanmasıyla uygulanır.
Bu durumda MediaSession
. Bazı işlemler, kullanıcılar şuna bastığında tetiklenir:
başka bir uzak cihazdaki veya klavyedeki düğmeleri kullanabilir ya da
medya bildirimine dokunun.
![Windows 10'da bir medya bildiriminin ekran görüntüsü.](https://web.developers.google.cn/static/articles/media-session/image/screenshot-a-media-notif-0b640cbe50bb1.jpg?authuser=8&hl=tr)
Bazı medya oturumu işlemleri desteklenmeyebilir. Bu nedenle,
ayarlarken try…catch
bloğunu kullanın.
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.`);
}
}
Bir medya oturumu işlem işleyicisinin ayarını iptal etmek, null
değerine ayarlamak kadar kolaydır.
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.`);
}
Medya oturumu işlem işleyicileri, ayarlandıktan sonra medya oynatmaları boyunca kullanılabilir olmaya devam eder. Bu, bir etkinliği işleme dışında, etkinlik işleyici kalıbına benzer. tarayıcının, herhangi bir varsayılan davranışı artık yapmadığı ve bunu tarayıcıdaki Web sitesinin medya işlemini desteklediğini gösteren bir işaret. Dolayısıyla, medya işlemi kontrolleri uygun işlem işleyici ayarlanmadığı sürece gösterilmez.
![macOS Big Sur'da Ne Çalıyor? widget'ının ekran görüntüsü.](https://web.developers.google.cn/static/articles/media-session/image/screenshot-the-playing-178373d8aea09.jpg?authuser=8&hl=tr)
Oynat / duraklat
"play"
işlemi, kullanıcının medya oynatmayı devam ettirmek istediğini gösterir
"pause"
bunu geçici olarak durdurmak istediğinizi gösteriyor.
"Oynat/duraklat" simgesi her zaman bir medya bildiriminde gösterilir ve medya etkinlikleri tarayıcı tarafından otomatik olarak işlenir. Varsayılan ayarları geçersiz kılmak için davranış, "oynatma" tutma ve "pause" (duraklat) medya işlemleri gerçekleştirilecektir.
Tarayıcı, arama veya video oynatma sırasında bir web sitesinin medya oynatmadığını
yükleniyor. Bu durumda,
Emin olmak için "playing"
veya "paused"
adlı kullanıcıya navigator.mediaSession.playbackState
Web sitesinin kullanıcı arayüzü, medya bildirim kontrolleriyle senkronize oluyor.
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';
});
Önceki parça
"previoustrack"
işlemi, kullanıcının
başından itibaren oynatıldığına dair bir konsepte bağlı olarak
medya oynatıldığında oynatma listesindeki bir önceki öğeye gidin
oynatma listesi kavramına sahip.
navigator.mediaSession.setActionHandler('previoustrack', () => {
// Play previous track.
});
Sonraki parça
"nexttrack"
işlemi, kullanıcının medya oynatmayı şu klasöre taşımak istediğini gösterir:
oynatma listesindeki bir sonraki öğe.
navigator.mediaSession.setActionHandler('nexttrack', () => {
// Play next track.
});
Durdur
"stop"
işlemi, kullanıcının medya oynatmayı durdurmak istediğini ve
durumu silebilirsiniz.
navigator.mediaSession.setActionHandler('stop', () => {
// Stop playback and clear state if appropriate.
});
Geri / ileri sar
"seekbackward"
işlemi, kullanıcının medyayı taşımak istediğini gösterir
oynatma süresinde kısa bir süre geriye doğru, "seekforward"
ise istekte bulunduğunu gösterir
medya oynatma süresini kısa bir süre ileri taşımak için kullanılır. Her iki durumda da,
kısa süre birkaç saniye anlamına gelir.
İşlem işleyicide sağlanan seekOffset
değeri, işlemin gerçekleşmesi için gereken saniye cinsinden süredir.
medya oynatma süresini
değiştirebilirim. Bu bilgi sağlanmamışsa (örneğin, undefined
)
makul bir süre kullanmalısınız (ör. 10-30 saniye).
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.
});
Belirli bir zamana sar
"seekto"
işlemi, kullanıcının medya oynatmayı taşımak istediğini gösterir
zaman alabilir.
İşlem işleyicide sağlanan seekTime
değeri, işlemin gerçekleşmesi için gereken saniye cinsinden süredir.
medya oynatma süresini
taşıyabilir.
İşlem işleyicide sağlanan fastSeek
boole değeri, işlem
bir dizinin parçası olarak birden çok kez çağrılıyor ve bu son çağrı değil
bu sırada çalışır.
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.
});
Oynatma konumunu ayarla
Bildirimde medya oynatma konumunu doğru şekilde göstermek çok basittir. aşağıda gösterildiği gibi uygun bir zamanda ayarlamak için kullanılır. İlgili içeriği oluşturmak için kullanılan konum durumu, medya oynatma hızı, süresi ve geçerli saat.
![ChromeOS'teki kilit ekranı medya denetimlerinin ekran görüntüsü.](https://web.developers.google.cn/static/articles/media-session/image/screenshot-lock-screen-m-e71582de5ca3d.jpg?authuser=8&hl=tr)
Süre belirtilmelidir ve pozitif olmalıdır. Pozitif olmalıdır. daha kısa olabilir. Oynatma hızı 0'dan büyük olmalıdır.
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();
});
Konum durumunu sıfırlamak, null
olarak ayarlamak kadar kolaydır.
// Reset position state when media is reset.
navigator.mediaSession.setPositionState(null);
Video konferans işlemleri
Kullanıcı, video görüşmesini Pencere İçinde Pencere penceresine yerleştirdiğinde, tarayıcı, mikrofon, kamera ve telefonu kapatma kontrolleri görüntüleyebilir. Kullanıcı bunları tıkladığında web sitesi bunları video üzerinden işler. konferans işlemleriyle ilgili daha fazla bilgi edinebilirsiniz. Örnek için Video Konferans örneğine bakın.
![Pencere İçinde Pencere penceresindeki video konferans denetimlerinin ekran görüntüsü.](https://web.developers.google.cn/static/articles/media-session/image/screenshot-video-confere-7e82acef00cdb.jpg?authuser=8&hl=tr)
Mikrofonu aç/kapat
"togglemicrophone"
işlemi, kullanıcının sesi kapatmak veya açmak istediğini gösterir
mikrofon simgesine dokunun. setMicrophoneActive(isActive)
yöntemi, tarayıcıya
Web sitesinin mikrofonu etkin olarak kabul edip etmediği.
let isMicrophoneActive = false;
navigator.mediaSession.setActionHandler('togglemicrophone', () => {
if (isMicrophoneActive) {
// Mute the microphone.
} else {
// Unmute the microphone.
}
isMicrophoneActive = !isMicrophoneActive;
navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
});
Kameralar arasında geçiş yap
"togglecamera"
işlemi, kullanıcının etkin durumdaki
kameranızı açabilir veya kapatabilirsiniz. setCameraActive(isActive)
yöntemi,
Tarayıcı, web sitesini etkin olarak kabul eder.
let isCameraActive = false;
navigator.mediaSession.setActionHandler('togglecamera', () => {
if (isCameraActive) {
// Disable the camera.
} else {
// Enable the camera.
}
isCameraActive = !isCameraActive;
navigator.mediaSession.setCameraActive(isCameraActive);
});
Kapatın.
"hangup"
işlemi, kullanıcının bir görüşmeyi sonlandırmak istediğini gösterir.
navigator.mediaSession.setActionHandler('hangup', () => {
// End the call.
});
Slaytlarla ilgili işlemleri sunma
Kullanıcı slaytlarını Pencere İçinde Pencere penceresine yerleştirdiğinde, tarayıcı, slaytlar arasında gezinmeyle ilgili kontroller görüntüleyebilir. Kullanıcı web sitesi bunları Media Session API aracılığıyla işler. Örneğin, Örneğin, Slaytlar'ı sunma örneğini inceleyin.
Önceki slayt
"previousslide"
işlemi, kullanıcının
önceki slaytta bulabilirsiniz.
navigator.mediaSession.setActionHandler('previousslide', () => {
// Show previous slide.
});
Tarayıcı Desteği
-
.
-
.
-
.
-
.
Sonraki slayt
"nextslide"
işlemi, kullanıcının sonraki slayta gitmek istediğini gösterir
dikkat edin.
navigator.mediaSession.setActionHandler('nextslide', () => {
// Show next slide.
});
Tarayıcı Desteği
-
.
-
.
-
.
-
.
Örnekler
Blender Foundation'ı içeren bazı Medya Oturumu örneklerine göz atın ve Jan Morgenstern'ın çalışması.
Kaynaklar
- Medya Oturumu Spesifikasyonu: wicg.github.io/mediasession
- Spesifikasyon Sorunları: github.com/WICG/mediasession/issues
- Chrome Hataları: crbug.com