Bu makalede, Chrome 73'ün yeni medya özelliklerini ele alacağız:
- Medya oynatmayı kontrol etmek için artık donanım medya tuşları destekleniyor masaüstünde de.
- Web geliştiricileri, belirli bir HDCP politikasının zorunlu kılınıp uygulanamayacağını sorgulayabilir.
- Masaüstü PWA'larda Otomatik Pencere İçinde Pencere ve "Reklamı Atla" Pencere İçinde Pencere özelliği, kaynak denemelerine geliyor.
- Masaüstü PWA'lara sesli otomatik oynatma izni verilir.
Donanım Medya Anahtarları desteği
Günümüzde birçok klavyede, medya oynatma gibi temel medya oynatma işlevlerini kontrol etmek için oynatma/duraklatma, önceki ve sonraki parça için geçerlidir. Mikrofonlu kulaklıklarda da var. Şimdiye kadar Masaüstü bilgisayar kullanıcıları, ses ve video oynatmayı kontrol etmek için bu medya tuşlarını kullanamadı seçeneğini tıklayın. Bu değişiklik bugün gerçekleşecek.
Kullanıcı duraklatma tuşuna basarsa Chrome'da oynatılan etkin medya öğesi duraklatılıp "duraklatıldı" mesajı görüntüleniyor medya etkinliğinde bulunur. Oynat tuşuna basarsanız, daha önce duraklatılan medya öğesi devam ettirilir ve bir "oynat" işlemi alır medya unutmayın. Bu özellik, Chrome'un ön planda veya arka planda olmasına bakılmaksızın çalışır.
ChromeOS'te, ses odağı kullanan Android uygulamaları artık Chrome'a duraklatmasını ve Chrome'daki web siteleri arasında sorunsuz bir medya deneyimi oluşturmak için sesi devam ettirme, Chrome Uygulamaları ve Android Uygulamaları. Bu özellik şu anda yalnızca ChromeOS'te desteklenmektedir Android P çalıştıran cihaz.
Kısacası, her zaman bu medya olaylarını dinleyip harekete geçmek iyi bir uygulamadır buna göre hazırlar.
video.addEventListener('pause', function() {
// Video is now paused.
// TODO: Let's update UI accordingly.
});
video.addEventListener('play', function() {
// Video is now playing.
// TODO: Let's update UI accordingly.
});
Bir saniye, hepsi bu kadar da değil! Media Session API artık masaüstünde kullanılabilir
(daha önce mobil cihazlarda destekleniyordu), web geliştiricileri medya dosyalarını işleyebilir
medya tuşları tarafından tetiklenen izleme değişimi gibi ilgili etkinlikler İlgili içeriği oluşturmak için kullanılan
şu anda previoustrack
ve nexttrack
etkinlikleri desteklenmektedir.
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
Çalma ve duraklatma tuşları Chrome tarafından otomatik olarak işlenir. Ancak varsayılan almak istemiyorsanız söz konusu davranış için bazı işlem işleyiciler "oynat" ve "pause" (duraklat) önlem olarak alabilirsiniz.
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
Donanım Medya Anahtarları desteği ChromeOS, macOS ve Windows'da kullanılabilir. Linux daha sonra gelecek.
Mevcut geliştirici dokümanlarımıza göz atın ve resmi Medya Oturum örnekleri.
ChromeDurum İzleyici | Chromium Hatası
Encrypted Media: HDCP Politika Kontrolü
HDCP Policy Check API sayesinde web geliştiricileri artık belirli bir politika, ör. HDCP gereksinimi, istekte bulunmadan önce zorunlu kılınabilir. Widevine lisansları ve medya yükleniyor.
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
API tüm platformlarda kullanılabilir. Ancak gerçek politika kontrolleri
bazı platformlarda mevcut olmayabilir. Örneğin, HDCP politika denetimi taahhüdü
Android ve Android WebView'da NotSupportedError
ile reddedilecek.
Önceki geliştirici dokümanlarımıza göz atın ve resmi dokümanlarımızı örnek bölümüne bakın.
Gönderim Amacı | ChromeDurum İzleyici | Chromium Hatası
Yüklü PWA'lar ile ilgili olarak otomatik pencere içinde pencere özelliğinin kaynak denemesi
Bazı sayfalarda, Pencere İçinde Pencere için otomatik olarak girilerek video öğesi Örneğin, video konferans web uygulamaları, kullanıcı geçişler arasında geçiş yaptığında otomatik Pencere İçinde Pencere davranışı web uygulamasında ve diğer uygulamalarda veya sekmelerde kullanılabilir. Maalesef kullanıcı hareketi zorunluluğu. İşte karşınızda Otomatik Pencere İçinde Pencere!
Bu sekmeyi ve uygulama değiştirmeyi desteklemek için yeni bir autopictureinpicture
özelliği
<video>
öğesine eklenir.
<video autopictureinpicture></video>
İşleyişi yaklaşık olarak aşağıda açıklanmıştır:
- Doküman gizlendiğinde,
autopictureinpicture
özelliği en son ayarlandığında otomatik olarak Pencere İçinde Pencere girer. izin verilir. - Doküman görünür hale geldiğinde Pencere İçinde Pencere'deki video öğesi otomatik olarak bırakır.
Hepsi bu kadar! Otomatik Pencere İçinde Pencere özelliğinin yalnızca Kullanıcıların masaüstüne yüklediği progresif web uygulamaları.
Daha fazla bilgi için spesifikasyona göz atın ve resmi PWA'yı kullanmayı deneyin örnek.
Deneme Amacı | ChromeDurum İzleyici | Chromium Hatası
Pencere İçinde Pencere penceresinde reklamı atlama için kaynak denemesi
Video reklam modeli, genellikle videodan önce gösterilen reklamlardan oluşur. İçerik sağlayıcılar, genellikle birkaç saniye sonra reklamı atlama olanağı sunar. Ne yazık ki, Pencere içinde pencere etkileşimli olmadığından, videoyu pencere içinde izleyen kullanıcılar Bu işlemi Pencere İçinde Pencere şu anda yapamaz.
Media Session API artık masaüstünde kullanılabilir (
mobil cihazlarda yalnızca önceden mobil cihazlarda), bunu sunmak için yeni bir skipad
medya oturumu işlemi kullanılabilir
Pencere içinde Pencere seçeneğinde kullanılabilir.
Bu özelliği sağlamak için çağrı sırasında skipad
ile bir işlev iletin
setActionHandler()
. Gizlemek için null
başarılı. Aşağıda görebileceğiniz gibi,
basit olduğunu
fark ettiniz.
try {
navigator.mediaSession.setActionHandler('skipad', null);
showSkipAdButton();
} catch(error) {
// The "Skip Ad" media session action is not supported.
}
function showSkipAdButton() {
// The Picture-in-Picture window will show a "Skip Ad" button.
navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}
function onSkipAdButtonClick() {
// User clicked "Skip Ad" button, let's hide it now.
navigator.mediaSession.setActionHandler('skipad', null);
// TODO: Stop ad and play video.
}
Resmi "Reklamı Atla"yı deneyin örnek ve bize bu özelliği nasıl sunabileceğinizi olabilir.
Deneme Amacı | ChromeDurum İzleyici | Chromium Hatası
Masaüstü PWA'lar için otomatik oynatma izni verildi
Progresif Web Uygulamaları artık tüm masaüstü platformlarında kullanılabildiğine göre mobil cihazlarda geçerli olan kuralımızı masaüstüne de genişletiyoruz: otomatik oynatma yüklü PWA'larda artık sese izin veriliyor. Bunun yalnızca şuradaki sayfalar için geçerli olduğunu unutmayın: Web uygulaması manifest'inin kapsamı.