Chrome 73'teki medya güncellemeleri

François Beaufort
François Beaufort
GitHub

Bu makalede, Chrome 73'teki yeni medya özelliklerini ele alacağız. Bu özellikler arasında şunlar yer alıyor:

Donanım medya tuşları 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 tuşlar bulunur. Mikrofonlu kulaklıklarda da bu özellik bulunur. Ş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 "duraklatıldı" medya etkinliği alır. Oynat tuşuna basıldığında, daha önce duraklatılmış medya öğesi devam ettirilir ve "oynat" medya etkinliği alır. Chrome ön planda veya arka plandayken çalışır.

ChromeOS'te, ses odağını kullanan Android uygulamaları artık Chrome'daki web siteleri, Chrome uygulamaları ve Android uygulamaları arasında sorunsuz bir medya deneyimi oluşturmak için Chrome'a sesi duraklatmasını ve devam ettirmesini söyleyecek. Bu özellik şu anda yalnızca Android P yüklü ChromeOS cihazlarda desteklenmektedir.

Kısacası, bu medya etkinliklerini her zaman 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 de kullanılabilir (eskiden yalnızca mobil cihazlarda destekleniyordu). Bu sayede web geliştiricileri, medya tuşları tarafından tetiklenen parça değiştirme gibi medyayla ilgili etkinlikleri işleyebilir. 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 düğmeleri Chrome tarafından otomatik olarak işlenir. Ancak varsayılan davranış sizin için uygun değilse bunu önlemek üzere "oynat" ve "duraklat" için bazı işlem işleyicileri ayarlayabilirsiniz.

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

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

Donanım Medya Tuşları desteği ChromeOS, macOS ve Windows'ta kullanılabilir. Linux desteği daha sonra eklenecektir.

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

Chromestatus Tracker | Chromium Hatası

Şifrelenmiş Medya: HDCP Politikası Kontrolü

HDCP Politika Kontrolü API'si sayesinde web geliştiricileri artık Widevine lisansları istemeden ve medya yüklemeden önce belirli bir politikanın (ör. HDCP şartı) uygulanıp uygulanamayacağı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ü vaadi Android ve Android WebView'de NotSupportedError ile reddedilir.

Desteklenen tüm HDCP sürümlerini görmek için önceki geliştirici dokümanlarımıza göz atın ve resmi örneği deneyin.

Gönderme Niyeti | Chromestatus İzleyici | Chromium Hatası

Yüklü PWA'lar için Otomatik Pencere İçinde Pencere Özelliği Origin Deneme Sürümü

Bazı sayfalar, video öğesi için pencere içinde pencere moduna otomatik olarak girip çıkmak isteyebilir. Örneğin, kullanıcı web uygulaması ile diğer uygulamalar veya sekmeler arasında geçiş yaptığında video konferans web uygulamaları, otomatik pencere içinde pencere davranışından yararlanabilir. Maalesef kullanıcı hareketi şartı nedeniyle bu mümkün değildir. İşte bu noktada Otomatik Pencere İçinde Pencere devreye giriyor.

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

<video autopictureinpicture></video>

İşleyiş şekli şöyledir:

  • Belge gizlendiğinde, autopictureinpicture özelliği en son ayarlanan video öğesi, izin veriliyorsa otomatik olarak Pencere İçinde Pencere moduna girer.
  • Doküman görünür hale geldiğinde, Pencere İçinde Pencere'deki video öğesi otomatik olarak dokümandan çıkar.

Hepsi bu kadar! Otomatik Resim İçinde Resim ö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 bilgi için özelliğe göz atın ve resmi PWA örneğini kullanmayı deneyin.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

Pencere içinde pencere penceresindeki reklamı atlama özelliği için kaynak denemesi

Video reklam modeli genellikle videodan önce gösterilen reklamlardan oluşur. İçerik sağlayıcılar genellikle reklamı birkaç saniye sonra atlama olanağı sunar. Ne yazık ki, Pencere İçinde Pencere penceresi etkileşimli olmadığından, Pencere İçinde Pencere modunda video izleyen kullanıcılar bu işlemi şu anda yapamıyor.

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

Pencere içinde pencere penceresindeki Reklamı Atla düğmesi
Bilinmeyen Pencere penceresindeki "Reklamı Atla" düğmesi

Bu özelliği sağlamak için setActionHandler()'u çağırırken skipad ile bir işlev iletin. Gizlemek için null simgesine dokunun. Aşağıda okuyabileceğiniz gibi, bu işlem oldukça 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.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

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

Progresif Web Uygulamaları artık tüm masaüstü platformlarında kullanılabildiğinden, mobil cihazlarda geçerli olan kuralı masaüstüne de uyguluyoruz: Yüklü PWA'larda sesli otomatik oynatmaya artık izin veriliyor. Bu özelliğin yalnızca web uygulaması manifest'inin kapsamındaki sayfalar için geçerli olduğunu unutmayın.

Chromium Hatası