Bu sayfa, Cloud Translation API ile çevrilmiştir.

Chrome 73'teki medya güncellemeleri

François Beaufort

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.

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

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ı.

Chromium Hatası