7

Web Tools #528 - CSS Tools, Git/CLI, Uncats

 1 year ago
source link: https://mailchi.mp/webtoolsweekly/web-tools-528
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

CSS Tools, Git/CLI, Uncats

Issue #528 • August 31, 2023

Advertisement

The Marketer's Guide to Composable Content Creating and publishing content shouldn’t be that hard. Grab this marketer-accessible guide on how to refine your content strategy to better support leading omnichannel, personalization, and design methodologies. Composable content empowers marketers to source and build new content with existing content elements from all over the company. 

Contentful

No need to ping your colleague for the latest product description, or even submit a ticket with design to size a new image for you. With composable content, the ability to create, connect, and extend content experiences are right at your fingertips.

 
 

If you're dealing with varying levels of support for audio and video files in your apps, you'll want to be familiar with the canPlayType() method of the HTMLMediaElement API.

This method allows you to determine whether a browser can play a specific media type or codec before attempting to load it. This can help ensure cross-browser compatibility when using different video and audio files.

Of course, in most cases you should be pretty safe to use modern media formats, but if you need to check for support, here are a few examples.

const video = document.getElementById('videoElement');

const mediaType = 'video/mp4';

if (video.canPlayType(mediaType)) {
  console.log('Browser supports ' + mediaType);
} else {
  console.log('Browser does not support ' + mediaType);
}

The example above assumes a video element on the page, then the media type is passed in to the canPlayType() method. The method takes a single argument, a string specifying the MIME type of the media you want test.

The method will return one of 3 string values, depending on support:

  • An empty string, indicating it's not playable on the current device
  • A string containing the text "probably", indicating it's likely to play on the current device
  • A string containing "maybe", indicating there's not enough info to determine if it's playable on the current device

Note that the above code assumes that an answer of "maybe" means it's playable, so you'd have to adjust the code to account for "maybe", if needed, though it's probably rare to get that result.

You can also optionally pass in a codecs parameter containing a comma-separated list of codecs. Here's an example that checks for codecs:

const codecs = [
  { type: 'video/mp4', codec: 'avc1.42E01E' },
  { type: 'video/webm', codec: 'vp9' }
];

for (const codec of codecs) {
  const support = video.canPlayType(codec.type + '; codecs="' + codec.codec + '"');

if (support === 'probably') {
    console.log(`Browser most likely supports ${codec.type} with codec ${codec.codec}`);
  } else {
    if (support === 'maybe') {
      console.log(`Browser might support ${codec.type} with codec ${codec.codec}`);
    } else {
      console.log(`Browser does not support ${codec.type} with codec ${codec.codec}`);
    }
  }
}

You can fiddle around with both of the above code examples in this CodePen demo.

You can see in the codecs example that I'm using the 'probably' and 'maybe' values in a more applicable manner.

As usual, the safest way to deal with varying levels of media support is to provide proper fallbacks in your HTML using <source> elements. But this is a decent method to keep in mind should the need arise for some specific checks for media types and codecs.

Now on to this week's tools!

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK