Media-updates in Chrome 58

François Beaufort
François Beaufort
GitHub

Aanpassing van mediabediening

Ontwikkelaars kunnen nu de native mediabedieningen van Chrome aanpassen, zoals de knoppen voor downloaden, volledig scherm en extern afspelen, met behulp van de nieuwe ControlsList API .

Native mediabediening in Chrome 58
Native mediabediening in Chrome 58

Deze API biedt een manier om native mediabedieningselementen weer te geven of te verbergen die niet logisch zijn of geen deel uitmaken van de verwachte gebruikerservaring, of die slechts een beperkt aantal functies toestaan.

De huidige implementatie voor nu is een blokkeerlijstmechanisme voor native bedieningselementen met de mogelijkheid om deze 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 om te verzenden | Chromestatustracker | Chroombug

Autoplay voor Progressive Web Apps toegevoegd aan het startscherm

Voorheen blokkeerde Chrome zonder uitzondering alle autoplay met geluid op Android. Dit is niet langer waar. Vanaf nu mogen sites die zijn geïnstalleerd met behulp van de verbeterde 'Toevoegen aan startscherm' -stroom automatisch audio en video afspelen die wordt aangeboden vanuit bronnen die zijn opgenomen in het bereik van het webapp-manifest, zonder beperkingen.

{
  "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 omdat /foo binnen het bereik valt.

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 om te verzenden | Chromestatustracker | Chroombug

Pauzeer het 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, begint Chrome de video af te spelen zodra deze zichtbaar wordt voor de gebruiker.

Om het energieverbruik te verminderen, wordt vanaf Chrome 58 het afspelen van video's met het autoplay attribuut gepauzeerd wanneer ze buiten het scherm staan ​​en hervat wanneer ze weer in beeld zijn, in navolging van Safari iOS-gedrag.'

Intentie om te verzenden | Chromestatustracker | Chroombug

mediaquery in kleurengamma

Omdat schermen met een breed kleurengamma steeds populairder worden, hebben sites nu toegang tot het geschatte kleurenbereik dat wordt ondersteund door Chrome en uitvoerapparaten met behulp van de color-gamut mediaquery.

Als u nog niet bekend bent met de definities van kleurruimte, kleurprofiel, gamma, breed gamma en kleurdiepte, raad ik u ten zeerste aan de blogpost Verbetering van kleur op het web WebKit te lezen. Er wordt uitgebreid ingegaan op het gebruik van de mediaquery color-gamut om afbeeldingen met een breed spectrum weer te geven wanneer de gebruiker zich op schermen met een breed spectrum bevindt, en anders valt hij terug op sRGB-afbeeldingen.

De huidige implementatie in Chrome accepteert de trefwoorden srgb , p3 (gamma gespecificeerd door de DCI P3 Color Space) en rec2020 (gamma gespecificeerd door de ITU-R-aanbeveling BT.2020 Color Space). 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 om te verzenden | Chromestatustracker | Chroombug