Media-updates in Chrome 58

François Beaufort
François Beaufort
GitHub

Aanpassing van mediabediening

Ontwikkelaars kunnen nu de ingebouwde mediabedieningen van Chrome, zoals de knoppen voor downloaden, volledig scherm en afspelen op afstand, aanpassen met de nieuwe ControlsList API .

Native mediabedieningen in Chrome 58
Native mediabedieningen in Chrome 58

Met deze API kunt u bedieningselementen voor native media weergeven of verbergen die niet logisch zijn, niet passen bij de verwachte gebruikerservaring of slechts een beperkte set functies toestaan.

De huidige implementatie is voorlopig een blokkeringsmechanisme voor native controls, met de mogelijkheid om ze rechtstreeks vanuit HTML-inhoud in te stellen met behulp van het nieuwe attribuut controlsList . Bekijk het officiële voorbeeld .

Gebruik in HTML:

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

Gebruik in JavaScript:

var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"

video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true

Intentie tot verzending | Chromestatus Tracker | Chromium-bug

Automatisch afspelen voor Progressive Web Apps toegevoegd aan startscherm

Voorheen blokkeerde Chrome alle autoplay met geluid op Android, zonder uitzondering. Dit is niet langer het geval. Vanaf nu mogen sites die zijn geïnstalleerd met de verbeterde 'Toevoegen aan startscherm' -flow, audio en video die worden weergegeven vanaf bronnen die zijn opgenomen in de scope van het webapp-manifest , zonder beperkingen automatisch afspelen.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
Doen 
<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Audio wordt automatisch afgespeeld terwijl /foo binnen het bereik ligt.

Niet doen 
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Audio kan niet automatisch worden afgespeeld omdat /bar NIET binnen het bereik valt.

Intentie tot verzending | Chromestatus Tracker | Chromium-bug

Pauzeer automatisch afspelen van gedempte video wanneer deze onzichtbaar is

Zoals je misschien al weet, staat Chrome op Android toe dat muted video's worden afgespeeld zonder tussenkomst van de gebruiker. Als een video als muted is gemarkeerd en het kenmerk autoplay heeft, start Chrome het afspelen van de video zodra deze zichtbaar wordt voor de gebruiker.

Om het energieverbruik te verminderen, wordt vanaf Chrome 58 het afspelen van video's met het kenmerk autoplay gepauzeerd wanneer ze niet op het scherm staan, en hervat wanneer ze weer in beeld zijn. Dit is vergelijkbaar met het gedrag in Safari iOS.

Intentie tot verzending | Chromestatus Tracker | Chromium-bug

media query voor kleurengamma

Omdat schermen met een breed kleurengamma steeds populairder worden, kunnen sites nu toegang krijgen tot het geschatte kleurenbereik dat door Chrome wordt ondersteund en kunnen ze uitvoerapparaten uitvoeren met behulp van de media query color-gamut .

Als je nog niet bekend bent met de definities van kleurruimte, kleurprofiel, kleurbereik, breedbeeld en kleurdiepte, raad ik je ten zeerste aan om de blogpost Improving Color on the Web WebKit te lezen. Daarin wordt uitgebreid beschreven hoe je de mediaquery color-gamut kunt gebruiken om afbeeldingen met een breedbeeld te tonen wanneer de gebruiker een breedbeeldscherm gebruikt en anders terugvalt op sRGB-afbeeldingen.

De huidige implementatie in Chrome accepteert de trefwoorden srgb , p3 (kleurruimte gespecificeerd door de DCI P3-kleurruimte) en rec2020 (kleurruimte gespecificeerd door de ITU-R-aanbeveling BT.2020-kleurruimte). Bekijk het officiële voorbeeld .

Gebruik in HTML:

<picture>
  <source media="(color-gamut: p3)" srcset="photo-p3.jpg">
  <source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
  <img src="photo-srgb.jpg">
</picture>

Gebruik in CSS:

main {
  background-image: url("photo-srgb.jpg");
}

@media (color-gamut: p3) {
  main {
    background-image: url("photo-p3.jpg");
  }
}

@media (color-gamut: rec2020) {
  main {
    background-image: url("photo-rec2020.jpg");
  }
}

Gebruik in JavaScript:

// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}

if (window.matchMedia("(color-gamut: p3)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}

if (window.matchMedia("(color-gamut: rec2020)").matches) {
  document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}

Intentie tot verzending | Chromestatus Tracker | Chromium-bug