Chrome 73'teki medya güncellemeleri

François Beaufort
François Beaufort

Bu makalede, Chrome 73'ün aşağıdakileri içeren yeni medya özelliklerinden bahsedeceğiz:

Donanım Medya Anahtarları desteği

Günümüzde birçok klavyede oynatma/duraklatma, önceki ve sonraki parça gibi temel medya oynatma işlevlerini kontrol etmek için kullanılan tuşlar bulunur. Mikrofonlu kulaklıklarda da bunlar vardır. Şimdiye kadar, masaüstü kullanıcıları Chrome'da ses ve video oynatmayı kontrol etmek için bu medya tuşlarını kullanamıyordu. Bu durum bugün değişiyor!

Klavye medya tuşları
Klavye medya tuşları

Kullanıcı duraklatma tuşuna basarsa Chrome'da oynatılan etkin medya öğesi duraklatılır ve bir "duraklatıldı" medya etkinliği alır. Oynat tuşuna basılırsa daha önce duraklatılan medya öğesi devam ettirilir ve bir "oynat" medya etkinliği alır. Chrome'un ön planda veya arka planda çalışması fark etmez.

ChromeOS'te, ses odağını kullanan Android uygulamaları artık Chrome'a, Chrome'daki web siteleri, Chrome Uygulamaları ve Android Uygulamaları arasında sorunsuz bir medya deneyimi oluşturmak için sesi duraklatıp devam ettirmelerini söyleyecek. Bu özellik şu anda yalnızca Android P çalıştıran ChromeOS cihazda desteklenmektedir.

Kısacası, her zaman bu medya olaylarını dinleyip buna göre hareket etmek iyi bir uygulamadır.

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ılabilirken (daha önce yalnızca mobil cihazlarda destekleniyordu) web geliştiricileri, medya tuşları tarafından tetiklenen kanal değiştirme gibi medyayla ilgili etkinlikleri yönetebilir. previoustrack ve nexttrack etkinlikleri şu anda desteklenmektedir.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Oynat ve duraklat tuşları Chrome tarafından otomatik olarak kullanılır. Ancak varsayılan davranış sizin için uygun değilse bunu önlemek amacıyla "play" (oynat) ve "pause" (duraklatma) işlemleri için bazı işlem işleyicileri ayarlamaya devam edebilirsiniz.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

ChromeOS, macOS ve Windows'da Donanım Medya Anahtarları desteği sunulmaktadır. Linux daha sonra gelecektir.

Mevcut geliştirici dokümanlarımıza göz atın ve resmi Medya Oturumu örneklerini deneyin.

Chromestatus İzleyici | Chromium Hatası

Şifrelenmiş Medya: HDCP Politika Kontrolü

HDCP Policy Check API sayesinde web geliştiricileri artık Widevine lisansları talep edilmeden ve medya yüklenmeden önce belirli bir politikanın (ör. HDCP gereksinimi) zorunlu kılınıp kılınmayacağını sorgulayabilir.

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 belirli platformlarda kullanılamayabilir. Örneğin, HDCP politika kontrolü sözü, Android ve Android Web Görünümü'nde NotSupportedError ile reddedilecektir.

Önceki geliştirici belgelerimize göz atın ve desteklenen tüm HDCP sürümlerini görmek için resmi örneği deneyin.

Gönderim Amacı | Chromestatus İzleyici | Chromium Hatası

Yüklü PWA'lara yönelik pencere içinde otomatik pencere özelliği için kaynak denemesi

Bazı sayfalar, video öğesi için otomatik olarak Pencere İçinde Pencere moduna girmek ve buradan ayrılmak isteyebilir. Örneğin, video konferans web uygulamaları, kullanıcı web uygulaması ile diğer uygulamalar veya sekmeler arasında geçiş yaptığında bazı otomatik Pencere İçinde Pencere davranışından yararlanabilir. Maalesef kullanıcı hareketi şartı ile bu mümkün değildir. İşte karşınızda Otomatik Pencere İçinde Pencere!

Bu sekme ve uygulama geçişlerini desteklemek için <video> öğesine yeni bir autopictureinpicture özelliği eklenir.

<video autopictureinpicture></video>

İşleyiş şekli kabaca şöyledir:

  • Belge gizlendiğinde, izin verilmesi durumunda autopictureinpicture özelliği en son ayarlanmış olan video öğesi otomatik olarak Pencere İçinde Pencere moduna girer.
  • Belge görünür hale geldiğinde Pencere İçinde Pencere'deki video öğesi otomatik olarak ayrılı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ı için geçerli olduğunu unutmayın.

Daha fazla ayrıntı için spec göz atın ve resmi PWA örneğini kullanmayı deneyin.

Deneme Amacı | Chromestatus İzleyici | Chromium Hatası

Pencere İçinde Pencere penceresinde Atlama Reklamı 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 İçinde Pencere penceresi etkileşimli olmadığından, Pencere İçinde Pencere modunda video izleyen kullanıcıların bunu bugün yapması mümkün değildir.

Media Session API artık masaüstünde (yalnızca mobil cihazlarda destekleniyordu) Pencere İçinde Pencere modunda bu seçeneği sunmak için yeni bir skipad medya oturumu işlemi kullanılabilir.

Pencere İçinde Pencere penceresinde Reklamı Atla düğmesi
Pencere İçinde Pencere penceresinde "Reklamı Atla" düğmesi

Bu özelliği sağlamak için setActionHandler() çağrılırken skipad ile bir işlev iletin. Gizlemek için: null. Aşağıda okuyabileceğiniz gibi son derece basittir.

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" örneğini deneyin ve bu özelliğin nasıl iyileştirilebileceğini bize bildirin.

Deneme Amacı | Chromestatus İzleyici | Chromium Hatası

Masaüstü PWA'lar için otomatik oynatma izni verildi

Progresif Web Uygulamaları artık tüm masaüstü platformlarda kullanılabildiğine göre, mobil cihazlarda uyguladığımız kuralı masaüstüne genişletiyoruz: Yüklü PWA'larda artık sesli otomatik oynatma özelliğine izin veriliyor. Bunun yalnızca web uygulaması manifestinin kapsamındaki sayfalar için geçerli olduğunu unutmayın.

Chromium Hatası