• a. Send us an email
  • b. Anonymous form
  • Buyer's Guide
  • Upcoming Products
  • Tips / Contact Us
  • Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Safari for Mac to Support WebM Video Playback 11 Years After Its Launch

Safari features support for WebM video playback in the second beta of macOS Big Sur 11.3 Beta , indicating that Apple's browser will finally support the format after failing to do so for almost 11 years.

webm

The added functionality, first spotted by The 8-Bit , allows users to play WebM videos in Safari for the first time.

WebM is a video format designed to be a royalty-free alternative to the H.264 codec used in the MP4 format. WebM allows video files to remain small without sacrificing quality excessively, and can be played with little processing power, making it ideal for webpages and browsers.

WebM was launched by Google in 2010 , but has never been supported in Safari. This meant that Safari users have been forced to download WebM content and play it in a compatible media player, or simply use another browser such as Google Chrome or Mozilla Firefox.

Today, WebM is among the more niche video formats, primarily being used on sites such as imageboards and forums. It is also often chosen for its support for transparent video playback.

In 2010, Steve Jobs implied that WebM was "a mess" and "not ready for primetime." It is unclear why Apple has finally deemed WebM a format worth supporting 11 years after its launch, but it may be partially due to the fact that Apple officially backs the H.264 codec.

WebM also has a sister project called WebP for images. Last year, Apple added support for WebP in Safari 14, so the company's approach to more niche media formats appears to be softening. WebM support still appears to be unavailable on iOS, but in light of these developments it would be unsurprising if Apple's WebKit engine added support for it too in due course.

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

biffuz Avatar

Like we need another format?

Bokito Avatar

4chan users are rubbing their hands together now

Popular Stories

Beyond iPhone 13 Better Blue Face ID Single Camera Hole

Seven Reasons to Wait for Next Year's iPhone 17

iPad Air 5

New iPad Air Now Shipping From China Ahead of Announcement

M3 iPad Feature 3

New iPads Likely to Begin Shipping in April

General iOS 17 Feature Orange Purple

iOS 17.4.1 Update for iPhone is Imminent

When To Expect New iPads Feature 1

Apple to Announce New iPads on March 26, Rumors Claim

Reasons to Not Upgrade to macOS Sonoma 14

macOS Sonoma 14.4: Reasons Not to Update

iPhone 16 Pro Sizes Feature

iPhone 16 to Adopt Ultra-Thin Bezel Technology to Maximize Display

iPad Pro Matte Display Feature 1

New iPad Pro Rumored to Have Matte Screen Option Like Studio Display's Nano-Texture Glass

iOS 17

Apple Releases iOS 17.4.1 and iPadOS 17.4.1 With Bug Fixes and Security Improvements

Next article.

ipad purple prime day

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

ios 17 4 sidebar square

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

iphone 15 series

Get the most out your iPhone 15 with our complete guide to all the new features.

sonoma icon upcoming square

A deep dive into new features in macOS Sonoma, big and small.

ipad pro 2022 square upcoming

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Apple iPad Air hero color lineup 220308

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

ios 18 upcoming square

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

iphone 16 mock upcoming square

Action button expands to all models, new Capture button, camera improvements, and more.

Other Stories

iphone 15 halloween

16 hours ago by Tim Hardwick

iPhone 16 Pro Sizes Feature

20 hours ago by Tim Hardwick

voice isolation

2 days ago by Tim Hardwick

icloud photos

3 days ago by MacRumors Staff

WebM video format

Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. WebM supports the video codec VP8 and VP9.

  • 4 - 5 : Not supported
  • 6 - 24 : Partial support
  • 25 - 121 : Supported
  • 122 : Supported
  • 123 - 125 : Supported
  • 12 - 13 : Not supported (but has polyfill available)
  • 14 - 18 : Partial support
  • 79 - 121 : Supported
  • 3.1 : Not supported
  • 3.2 - 5.1 : Not supported (but has polyfill available)
  • 6 - 12 : Not supported (but has polyfill available)
  • 12.1 - 13.1 : Partial support
  • 14 : Partial support
  • 14.1 - 15.6 : Partial support
  • 16.0 - 17.3 : Supported
  • 17.4 : Supported
  • TP : Supported
  • 2 - 3.6 : Not supported
  • 4 - 27 : Partial support
  • 28 - 122 : Supported
  • 123 : Supported
  • 124 - 126 : Supported
  • 9 - 10.5 : Not supported
  • 10.6 - 15 : Partial support
  • 16 - 107 : Supported
  • 108 : Supported
  • 5.5 - 8 : Not supported
  • 9 - 10 : Not supported (but has polyfill available)
  • 11 : Not supported (but has polyfill available)

Chrome for Android

Safari on ios.

  • 3.2 - 12.1 : Not supported
  • 12.2 - 13.7 : Partial support
  • 14 - 17.3 : Partial support

Samsung Internet

  • 4 : Partial support
  • 5 - 22 : Supported
  • 23 : Supported
  • all : Not supported

Opera Mobile

  • 10 - 12.1 : Not supported
  • 80 : Supported

UC Browser for Android

  • 15.5 : Supported

Android Browser

  • 2.1 - 2.2 : Not supported
  • 2.3 - 4.4.4 : Partial support

Firefox for Android

  • 14.9 : Supported

Baidu Browser

  • 13.52 : Supported

KaiOS Browser

  • 2.5 : Supported
  • 3 : Supported
  • Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free
  • English (US)

Web video codec guide

This guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video.

Due to the sheer size of uncompressed video data, it's necessary to compress it significantly in order to store it, let alone transmit it over a network. Imagine the amount of data needed to store uncompressed video:

  • A single frame of high definition (1920x1080) video in full color (4 bytes per pixel) is 8,294,400 bytes.
  • At a typical 30 frames per second, each second of HD video would occupy 248,832,000 bytes (~249 MB).
  • A minute of HD video would need 14.93 GB of storage.
  • A fairly typical 30 minute video conference would need about 447.9 GB of storage, and a 2-hour movie would take almost 1.79 TB (that is, 1790 GB) .

Not only is the required storage space enormous, but the network bandwidth needed to transmit an uncompressed video like that would be enormous, at 249 MB/sec—not including audio and overhead. This is where video codecs come in. Just as audio codecs do for the sound data, video codecs compress the video data and encode it into a format that can later be decoded and played back or edited.

Most video codecs are lossy , in that the decoded video does not precisely match the source. Some details may be lost; the amount of loss depends on the codec and how it's configured, but as a general rule, the more compression you achieve, the more loss of detail and fidelity will occur. Some lossless codecs do exist, but they are typically used for archival and storage for local playback rather than for use on a network.

Common codecs

The following video codecs are those which are most commonly used on the web. For each codec, the containers (file types) that can support them are also listed. Each codec provides a link to a section below which offers additional details about the codec, including specific capabilities and compatibility issues you may need to be aware of.

Factors affecting the encoded video

As is the case with any encoder, there are two basic groups of factors affecting the size and quality of the encoded video: specifics about the source video's format and contents, and the characteristics and configuration of the codec used while encoding the video.

The simplest guideline is this: anything that makes the encoded video look more like the original, uncompressed, video will generally make the resulting data larger as well. Thus, it's always a tradeoff of size versus quality. In some situations, a greater sacrifice of quality in order to bring down the data size is worth that lost quality; other times, the loss of quality is unacceptable and it's necessary to accept a codec configuration that results in a correspondingly larger file.

Effect of source video format on encoded output

The degree to which the format of the source video will affect the output varies depending on the codec and how it works. If the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference. However, things such as frame rate and, obviously, resolution will always have an impact on the output size of the media.

Additionally, all codecs have their strengths and weaknesses. Some have trouble with specific kinds of shapes and patterns, or aren't good at replicating sharp edges, or tend to lose detail in dark areas, or any number of possibilities. It all depends on the underlying algorithms and mathematics.

The degree to which these affect the resulting encoded video will vary depending on the precise details of the situation, including which encoder you use and how it's configured. In addition to general codec options, the encoder could be configured to reduce the frame rate, to clean up noise, and/or to reduce the overall resolution of the video during encoding.

Effect of codec configuration on encoded output

The algorithms used do encode video typically use one or more of a number of general techniques to perform their encoding. Generally speaking, any configuration option that is intended to reduce the output size of the video will probably have a negative impact on the overall quality of the video, or will introduce certain types of artifacts into the video. It's also possible to select a lossless form of encoding, which will result in a much larger encoded file but with perfect reproduction of the original video upon decoding.

In addition, each encoder utility may have variations in how they process the source video, resulting in differences in the output quality and/or size.

The options available when encoding video, and the values to be assigned to those options, will vary not only from one codec to another but depending on the encoding software you use. The documentation included with your encoding software will help you to understand the specific impact of these options on the encoded video.

Compression artifacts

Artifacts are side effects of a lossy encoding process in which the lost or rearranged data results in visibly negative effects. Once an artifact has appeared, it may linger for a while, because of how video is displayed. Each frame of video is presented by applying a set of changes to the currently-visible frame. This means that any errors or artifacts will compound over time, resulting in glitches or otherwise strange or unexpected deviations in the image that linger for a time.

To resolve this, and to improve seek time through the video data, periodic key frames (also known as intra-frames or i-frames ) are placed into the video file. The key frames are full frames, which are used to repair any damage or artifact residue that's currently visible.

Aliasing is a general term for anything that upon being reconstructed from the encoded data does not look the same as it did before compression. There are many forms of aliasing; the most common ones you may see include:

Color edging

Color edging is a type of visual artifact that presents as spurious colors introduced along the edges of colored objects within the scene. These colors have no intentional color relationship to the contents of the frame.

Loss of sharpness

The act of removing data in the process of encoding video requires that some details be lost. If enough compression is applied, parts or potentially all of the image could lose sharpness, resulting in a slightly fuzzy or hazy appearance.

Lost sharpness can make text in the image difficult to read, as text—especially small text—is very detail-oriented content, where minor alterations can significantly impact legibility.

Lossy compression algorithms can introduce ringing , an effect where areas outside an object are contaminated with colored pixels generated by the compression algorithm. This happens when an algorithm that uses blocks that span across a sharp boundary between an object and its background. This is particularly common at higher compression levels.

Example of the ringing effect

Note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts). Those fringes are the ringing effect. Ringing is similar in some respects to mosquito noise , except that while the ringing effect is more or less steady and unchanging, mosquito noise shimmers and moves.

Ringing is another type of artifact that can make it particularly difficult to read text contained in your images.

Posterizing

Posterization occurs when the compression results in the loss of color detail in gradients. Instead of smooth transitions through the various colors in a region, the image becomes blocky, with blobs of color that approximate the original appearance of the image.

Bald eagle photo with blotchy resolution.

Note the blockiness of the colors in the plumage of the bald eagle in the photo above (and the snowy owl in the background). The details of the feathers is largely lost due to these posterization artifacts.

Contouring or color banding is a specific form of posterization in which the color blocks form bands or stripes in the image. This occurs when the video is encoded with too coarse a quantization configuration. As a result, the video's contents show a "layered" look, where instead of smooth gradients and transitions, the transitions from color to color are abrupt, causing strips of color to appear.

Example of an image whose compression has introduced contouring

In the example image above, note how the sky has bands of different shades of blue, instead of being a consistent gradient as the sky color changes toward the horizon. This is the contouring effect.

Mosquito noise

Mosquito noise is a temporal artifact which presents as noise or edge busyness that appears as a flickering haziness or shimmering that roughly follows outside the edges of objects with hard edges or sharp transitions between foreground objects and the background. The effect can be similar in appearance to ringing .

Example of an image whose compression has introduced mosquito noise.

The photo above shows mosquito noise in a number of places, including in the sky surrounding the bridge. In the upper-right corner, an inset shows a close-up of a portion of the image that exhibits mosquito noise.

Mosquito noise artifacts are most commonly found in MPEG video, but can occur whenever a discrete cosine transform (DCT) algorithm is used; this includes, for example, JPEG still images.

Motion compensation block boundary artifacts

Compression of video generally works by comparing two frames and recording the differences between them, one frame after another, until the end of the video. This technique works well when the camera is fixed in place, or the objects in the frame are relatively stationary, but if there is a great deal of motion in the frame, the number of differences between frames can be so great that compression doesn't do any good.

Motion compensation is a technique that looks for motion (either of the camera or of objects in the frame of view) and determines how many pixels the moving object has moved in each direction. Then that shift is stored, along with a description of the pixels that have moved that can't be described just by that shift. In essence, the encoder finds the moving objects, then builds an internal frame of sorts that looks like the original but with all the objects translated to their new locations. In theory, this approximates the new frame's appearance. Then, to finish the job, the remaining differences are found, then the set of object shifts and the set of pixel differences are stored in the data representing the new frame. This object that describes the shift and the pixel differences is called a residual frame .

There are two general types of motion compensation: global motion compensation and block motion compensation . Global motion compensation generally adjusts for camera movements such as tracking, dolly movements, panning, tilting, rolling, and up and down movements. Block motion compensation handles localized changes, looking for smaller sections of the image that can be encoded using motion compensation. These blocks are normally of a fixed size, in a grid, but there are forms of motion compensation that allow for variable block sizes, and even for blocks to overlap.

There are, however, artifacts that can occur due to motion compensation. These occur along block borders, in the form of sharp edges that produce false ringing and other edge effects. These are due to the mathematics involved in the coding of the residual frames, and can be easily noticed before being repaired by the next key frame.

Reduced frame size

In certain situations, it may be useful to reduce the video's dimensions in order to improve the final size of the video file. While the immediate loss of size or smoothness of playback may be a negative factor, careful decision-making can result in a good end result. If a 1080p video is reduced to 720p prior to encoding, the resulting video can be much smaller while having much higher visual quality; even after scaling back up during playback, the result may be better than encoding the original video at full size and accepting the quality hit needed to meet your size requirements.

Reduced frame rate

Similarly, you can remove frames from the video entirely and decrease the frame rate to compensate. This has two benefits: it makes the overall video smaller, and that smaller size allows motion compensation to accomplish even more for you. For example, instead of computing motion differences for two frames that are two pixels apart due to inter-frame motion, skipping every other frame could lead to computing a difference that comes out to four pixels of movement. This lets the overall movement of the camera be represented by fewer residual frames.

The absolute minimum frame rate that a video can be before its contents are no longer perceived as motion by the human eye is about 12 frames per second. Less than that, and the video becomes a series of still images. Motion picture film is typically 24 frames per second, while standard definition television is about 30 frames per second (slightly less, but close enough) and high definition television is between 24 and 60 frames per second. Anything from 24 FPS upward will generally be seen as satisfactorily smooth; 30 or 60 FPS is an ideal target, depending on your needs.

In the end, the decisions about what sacrifices you're able to make are entirely up to you and/or your design team.

Codec details

The AOMedia Video 1 ( AV1 ) codec is an open format designed by the Alliance for Open Media specifically for internet video. It achieves higher data compression rates than VP9 and H.265/HEVC , and as much as 50% higher rates than AVC . AV1 is fully royalty-free and is designed for use by both the <video> element and by WebRTC .

AV1 currently offers three profiles: main , high , and professional with increasing support for color depths and chroma subsampling. In addition, a series of levels are specified, each defining limits on a range of attributes of the video. These attributes include frame dimensions, image area in pixels, display and decode rates, average and maximum bit rates, and limits on the number of tiles and tile columns used in the encoding/decoding process.

For example, AV1 level 2.0 offers a maximum frame width of 2048 pixels and a maximum height of 1152 pixels, but its maximum frame size in pixels is 147,456, so you can't actually have a 2048x1152 video at level 2.0. It's worth noting, however, that at least for Firefox and Chrome, the levels are actually ignored at this time when performing software decoding, and the decoder just does the best it can to play the video given the settings provided. For compatibility's sake going forward, however, you should stay within the limits of the level you choose.

The primary drawback to AV1 at this time is that it is very new, and support is still in the process of being integrated into most browsers. Additionally, encoders and decoders are still being optimized for performance, and hardware encoders and decoders are still mostly in development rather than production. For this reason, encoding a video into AV1 format takes a very long time, since all the work is done in software.

For the time being, because of these factors, AV1 is not yet ready to be your first choice of video codec, but you should watch for it to be ready to use in the future.

AVC (H.264)

The MPEG-4 specification suite's Advanced Video Coding ( AVC ) standard is specified by the identical ITU H.264 specification and the MPEG-4 Part 10 specification. It's a motion compensation based codec that is widely used today for all sorts of media, including broadcast television, RTP videoconferencing, and as the video codec for Blu-Ray discs.

AVC is highly flexible, with a number of profiles with varying capabilities; for example, the Constrained Baseline Profile is designed for use in videoconferencing and mobile scenarios, using less bandwidth than the Main Profile (which is used for standard definition digital TV in some regions) or the High Profile (used for Blu-Ray Disc video). Most of the profiles use 8-bit color components and 4:2:0 chroma subsampling; The High 10 Profile adds support for 10-bit color, and advanced forms of High 10 add 4:2:2 and 4:4:4 chroma subsampling.

AVC also has special features such as support for multiple views of the same scene (Multiview Video Coding), which allows, among other things, the production of stereoscopic video.

AVC is a proprietary format, however, and numerous patents are owned by multiple parties regarding its technologies. Commercial use of AVC media requires a license, though the MPEG LA patent pool does not require license fees for streaming internet video in AVC format as long as the video is free for end users.

Non-web browser implementations of WebRTC (any implementation which doesn't include the JavaScript APIs) are required to support AVC as a codec in WebRTC calls. While web browsers are not required to do so, some do.

In HTML content for web browsers, AVC is broadly compatible and many platforms support hardware encoding and decoding of AVC media. However, be aware of its licensing requirements before choosing to use AVC in your project!

Firefox support for AVC is dependent upon the operating system's built-in or preinstalled codecs for AVC and its container in order to avoid patent concerns.

ITU's H.263 codec was designed primarily for use in low-bandwidth situations. In particular, its focus is for video conferencing on PSTN (Public Switched Telephone Networks), RTSP , and SIP (IP-based videoconferencing) systems. Despite being optimized for low-bandwidth networks, it is fairly CPU intensive and may not perform adequately on lower-end computers. The data format is similar to that of MPEG-4 Part 2.

H.263 has never been widely used on the web. Variations on H.263 have been used as the basis for other proprietary formats, such as Flash video or the Sorenson codec. However, no major browser has ever included H.263 support by default. Certain media plugins have enabled support for H.263 media.

Unlike most codecs, H.263 defines fundamentals of an encoded video in terms of the maximum bit rate per frame (picture), or BPPmaxKb . During encoding, a value is selected for BPPmaxKb, and then the video cannot exceed this value for each frame. The final bit rate will depend on this, the frame rate, the compression, and the chosen resolution and block format.

H.263 has been superseded by H.264 and is therefore considered a legacy media format which you generally should avoid using if you can. The only real reason to use H.263 in new projects is if you require support on very old devices on which H.263 is your best choice.

H.263 is a proprietary format, with patents held by a number of organizations and companies, including Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm, and so on. To use H.263, you are legally obligated to obtain the appropriate licenses.

HEVC (H.265)

The High Efficiency Video Coding ( HEVC ) codec is defined by ITU's H.265 as well as by MPEG-H Part 2 (the still in-development follow-up to MPEG-4). HEVC was designed to support efficient encoding and decoding of video in sizes including very high resolutions (including 8K video), with a structure specifically designed to let software take advantage of modern processors. Theoretically, HEVC can achieve compressed file sizes half that of AVC but with comparable image quality.

For example, each coding tree unit (CTU)—similar to the macroblock used in previous codecs—consists of a tree of luma values for each sample as well as a tree of chroma values for each chroma sample used in the same coding tree unit, as well as any required syntax elements. This structure supports easy processing by multiple cores.

An interesting feature of HEVC is that the main profile supports only 8-bit per component color with 4:2:0 chroma subsampling. Also interesting is that 4:4:4 video is handled specially. Instead of having the luma samples (representing the image's pixels in grayscale) and the Cb and Cr samples (indicating how to alter the grays to create color pixels), the three channels are instead treated as three monochrome images, one for each color, which are then combined during rendering to produce a full-color image.

HEVC is a proprietary format and is covered by a number of patents. Licensing is managed by MPEG LA ; fees are charged to developers rather than to content producers and distributors. Be sure to review the latest license terms and requirements before making a decision on whether or not to use HEVC in your app or website!

Chrome support HEVC for devices with hardware support on Windows 8+, Linux and ChromeOS, for all devices on macOS Big Sur 11+ and Android 5.0+.

Edge (Chromium) supports HEVC for devices with hardware support on Windows 10 1709+ when HEVC video extensions from the Microsoft Store is installed, and has the same support status as Chrome on other platforms. Edge (Legacy) only supports HEVC for devices with a hardware decoder.

Mozilla will not support HEVC while it is encumbered by patents.

Internet Explorer only supports HEVC for devices with a hardware decoder.

Opera and other Chromium based browsers have the same support status as Chrome.

Safari supports HEVC for all devices on macOS High Sierra or later.

The MPEG-4 Video Elemental Stream ( MP4V-ES ) format is part of the MPEG-4 Part 2 Visual standard. While in general, MPEG-4 part 2 video is not used by anyone because of its lack of compelling value related to other codecs, MP4V-ES does have some usage on mobile. MP4V is essentially H.263 encoding in an MPEG-4 container.

Its primary purpose is to be used to stream MPEG-4 audio and video over an RTP session. However, MP4V-ES is also used to transmit MPEG-4 audio and video over a mobile connection using 3GP .

You almost certainly don't want to use this format, since it isn't supported in a meaningful way by any major browsers, and is quite obsolete. Files of this type should have the extension .mp4v , but sometimes are inaccurately labeled .mp4 .

Firefox supports MP4V-ES in 3GP containers only.

Chrome does not support MP4V-ES; however, ChromeOS does.

MPEG-1 Part 2 Video

MPEG-1 Part 2 Video was unveiled at the beginning of the 1990s. Unlike the later MPEG video standards, MPEG-1 was created solely by MPEG, without the ITU's involvement.

Because any MPEG-2 decoder can also play MPEG-1 video, it's compatible with a wide variety of software and hardware devices. There are no active patents remaining in relation to MPEG-1 video, so it may be used free of any licensing concerns. However, few web browsers support MPEG-1 video without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. This makes MPEG-1 a poor choice for use in websites and web applications.

MPEG-2 Part 2 Video

MPEG-2 Part 2 is the video format defined by the MPEG-2 specification, and is also occasionally referred to by its ITU designation, H.262. It is very similar to MPEG-1 video—in fact, any MPEG-2 player can automatically handle MPEG-1 without any special work—except it has been expanded to support higher bit rates and enhanced encoding techniques.

The goal was to allow MPEG-2 to compress standard definition television, so interlaced video is also supported. The standard definition compression rate and the quality of the resulting video met needs well enough that MPEG-2 is the primary video codec used for DVD video media.

MPEG-2 has several profiles available with different capabilities. Each profile is then available four levels, each of which increases attributes of the video, such as frame rate, resolution, bit rate, and so forth. Most profiles use Y'CbCr with 4:2:0 chroma subsampling, but more advanced profiles support 4:2:2 as well. In addition, there are four levels, each of which offers support for larger frame dimensions and bit rates. For example, the ATSC specification for television used in North America supports MPEG-2 video in high definition using the Main Profile at High Level, allowing 4:2:0 video at both 1920 x 1080 (30 FPS) and 1280 x 720 (60 FPS), at a maximum bit rate of 80 Mbps.

However, few web browsers support MPEG-2 without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. This makes MPEG-2 a poor choice for use in websites and web applications.

Theora , developed by Xiph.org , is an open and free video codec which may be used without royalties or licensing. Theora is comparable in quality and compression rates to MPEG-4 Part 2 Visual and AVC, making it a very good if not top-of-the-line choice for video encoding. But its status as being free from any licensing concerns and its relatively low CPU resource requirements make it a popular choice for many software and web projects. The low CPU impact is particularly useful since there are no hardware decoders available for Theora.

Theora was originally based upon the VC3 codec by On2 Technologies. The codec and its specification were released under the LGPL license and entrusted to Xiph.org, which then developed it into the Theora standard.

One drawback to Theora is that it only supports 8 bits per color component, with no option to use 10 or more in order to avoid color banding. That said, 8 bits per component is still the most commonly-used color format in use today, so this is only a minor inconvenience in most cases. Also, Theora can only be used in an Ogg container. The biggest drawback of all, however, is that it is not supported by Safari, leaving Theora unavailable not only on macOS but on all those millions and millions of iPhones and iPads.

The Theora Cookbook offers additional details about Theora as well as the Ogg container format it is used within.

Edge supports Theora with the optional Web Media Extensions add-on.

The Video Processor 8 ( VP8 ) codec was initially created by On2 Technologies. Following their purchase of On2, Google released VP8 as an open and royalty-free video format under a promise not to enforce the relevant patents. In terms of quality and compression rate, VP8 is comparable to AVC .

If supported by the browser, VP8 allows video with an alpha channel, allowing the video to play with the background able to be seen through the video to a degree specified by each pixel's alpha component.

There is good browser support for VP8 in HTML content, especially within WebM files. This makes VP8 a good candidate for your content, although VP9 is an even better choice if available to you. Web browsers are required to support VP8 for WebRTC, but not all browsers that do so also support it in HTML audio and video elements.

Edge support for VP8 requires the use of Media Source Extensions .

macOS: Safari 14.1 supports VP8 in WebRTC, MSE and video elements. Safari 12.2 only supports VP8 in WebRTC connections.

iOS: Safari 12.1 and later support VP8 in WebRTC connections only.

Firefox only supports VP8 in MSE when no H.264 hardware decoder is available. Use MediaSource.isTypeSupported() to check for availability.

Video Processor 9 ( VP9 ) is the successor to the older VP8 standard developed by Google. Like VP8, VP9 is entirely open and royalty-free. Its encoding and decoding performance is comparable to or slightly faster than that of AVC, but with better quality. VP9's encoded video quality is comparable to that of HEVC at similar bit rates.

VP9's main profile supports only 8-bit color depth at 4:2:0 chroma subsampling levels, but its profiles include support for deeper color and the full range of chroma subsampling modes. It supports several HDR implementations, and offers substantial freedom in selecting frame rates, aspect ratios, and frame sizes.

VP9 is widely supported by browsers, and hardware implementations of the codec are fairly common. VP9 is one of the two video codecs mandated by WebM (the other being VP8 ). Note however that Safari support for WebM and VP9 was only introduced in version 14.1, so if you choose to use VP9, consider offering a fallback format such as AVC or HEVC for iPhone, iPad, and Mac users.

VP9 is a good choice if you are able to use a WebM container (and can provide fallback video when needed). This is especially true if you wish to use an open codec rather than a proprietary one.

Color spaces supported: Rec. 601 , Rec. 709 , Rec. 2020 , SMPTE C , SMPTE-240M (obsolete; replaced by Rec. 709), and sRGB .

  • Safari 14: (macOS, iOS) supports VP9 in WebM for WebRTC.
  • Safari 14: (macOS) Supports VP9 in MSE from MacOS 11.3.
  • Safari 14.1: (macOS) supports WebM files containing VP9 video tracks "everywhere".
  • Safari 15: (macOS) supports VP9 in WebM in MSE .

Choosing a video codec

The decision as to which codec or codecs to use begins with a series of questions to prepare yourself:

  • Do you wish to use an open format, or are proprietary formats also to be considered?
  • Do you have the resources to produce more than one format for each of your videos? The ability to provide a fallback option vastly simplifies the decision-making process.
  • Are there any browsers you're willing to sacrifice compatibility with?
  • How old is the oldest version of web browser you need to support? For example, do you need to work on every browser shipped in the past five years, or just the past one year?

In the sections below, we offer recommended codec selections for specific use cases. For each use case, you'll find up to two recommendations. If the codec which is considered best for the use case is proprietary or may require royalty payments, then two options are provided: first, an open and royalty-free option, followed by the proprietary one.

If you are only able to offer a single version of each video, you can choose the format that's most appropriate for your needs. The first one is recommended as being a good combination of quality, performance, and compatibility. The second option will be the most broadly compatible choice, at the expense of some amount of quality, performance, and/or size.

Recommendations for everyday videos

First, let's look at the best options for videos presented on a typical website such as a blog, informational site, small business website where videos are used to demonstrate products (but not where the videos themselves are a product), and so forth.

  • A WebM container using the VP9 codec for video and the Opus codec for audio. These are all open, royalty-free formats which are generally well-supported, although only in quite recent browsers, which is why a fallback is a good idea. html < video controls src = " filename.webm " > </ video >
  • An MP4 container and the AVC ( H.264 ) video codec, ideally with AAC as your audio codec. This is because the MP4 container with AVC and AAC codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. Make sure you verify your compliance with the license requirements, however. html < video controls > < source type = " video/webm " src = " filename.webm " /> < source type = " video/mp4 " src = " filename.mp4 " /> </ video >

Note: The <video> element requires a closing </video> tag, whether or not you have any <source> elements inside it.

Recommendations for high-quality video presentation

If your mission is to present video at the highest possible quality, you will probably benefit from offering as many formats as possible, as the codecs capable of the best quality tend also to be the newest, and thus the most likely to have gaps in browser compatibility.

  • A WebM container using AV1 for video and Opus for audio. If you're able to use the High or Professional profile when encoding AV1, at a high level like 6.3, you can get very high bit rates at 4K or 8K resolution, while maintaining excellent video quality. Encoding your audio using Opus's Fullband profile at a 48 kHz sample rate maximizes the audio bandwidth captured, capturing nearly the entire frequency range that's within human hearing. html < video controls src = " filename.webm " > </ video >
  • An MP4 container using the HEVC codec using one of the advanced Main profiles, such as Main 4:2:2 with 10 or 12 bits of color depth, or even the Main 4:4:4 profile at up to 16 bits per component. At a high bit rate, this provides excellent graphics quality with remarkable color reproduction. In addition, you can optionally include HDR metadata to provide high dynamic range video. For audio, use the AAC codec at a high sample rate (at least 48 kHz but ideally 96kHz) and encoded with complex encoding rather than fast encoding. html < video controls > < source type = " video/webm " src = " filename.webm " /> < source type = " video/mp4 " src = " filename.mp4 " /> </ video >

Recommendations for archival, editing, or remixing

There are not currently any lossless—or even near-lossless—video codecs generally available in web browsers. The reason for this is simple: video is huge. Lossless compression is by definition less effective than lossy compression. For example, uncompressed 1080p video (1920 by 1080 pixels) with 4:2:0 chroma subsampling needs at least 1.5 Gbps. Using lossless compression such as FFV1 (which is not supported by web browsers) could perhaps reduce that to somewhere around 600 Mbps, depending on the content. That's still a huge number of bits to pump through a connection every second, and is not currently practical for any real-world use.

This is the case even though some of the lossy codecs have a lossless mode available; the lossless modes are not implemented in any current web browsers. The best you can do is to select a high-quality codec that uses lossy compression and configure it to perform as little compression as possible. One way to do this is to configure the codec to use "fast" compression, which inherently means less compression is achieved.

Preparing video externally

To prepare video for archival purposes from outside your website or app, use a utility that performs compression on the original uncompressed video data. For example, the free x264 utility can be used to encode video in AVC format using a very high bit rate:

While other codecs may have better best-case quality levels when compressing the video by a significant margin, their encoders tend to be slow enough that the nearly-lossless encoding you get with this compression is vastly faster at about the same overall quality level.

Recording video

Given the constraints on how close to lossless you can get, you might consider using AVC or AV1 . For example, if you're using the MediaStream Recording API to record video, you might use code like the following when creating your MediaRecorder object:

This example creates a MediaRecorder configured to record AV1 video using BT.2100 HDR in 12-bit color with 4:4:4 chroma subsampling and FLAC for lossless audio. The resulting file will use a bit rate of no more than 800 Mbps shared between the video and audio tracks. You will likely need to adjust these values depending on hardware performance, your requirements, and the specific codecs you choose to use. This bit rate is obviously not realistic for network transmission and would likely only be used locally.

Breaking down the value of the codecs parameter into its dot-delineated properties, we see the following:

The documentation for your codec choices will probably offer information you'll use when constructing your codecs parameter.

  • Web audio codec guide
  • Media container formats (file types)
  • Handling media support issues in web content
  • Codecs used by WebRTC
  • RFC 6381 : The "Codecs" and "Profiles" parameters for "Bucket" media types
  • RFC 5334 : Ogg Media Types
  • RFC 3839 : MIME Type Registrations for 3GPP Multimedia Files
  • RFC 4381 : MIME Type Registrations for 3GPP2 Multimedia Files
  • RFC 4337 : MIME Type Registrations for MPEG-4
  • Video codecs in Opera
  • Video and audio codecs in Internet Explorer
  • Video and audio codecs in Chrome

Apple adding WebM audio codec support to Safari with iOS 15

Avatar for Filipe Espósito

Apple today released the fifth beta of iOS 15 to developers . As we get closer to the final release next month, the update brought only a few minor changes to the operating system. However, one interesting detail about the latest iOS 15 beta is that it adds support for the WebM audio codec to Safari.

The feature is considered experimental and can be enabled or disabled by going to Safari’s advanced settings. 9to5Mac was able to confirm through the iOS 15 beta 5 internal code that this option should come enabled by default from now on.

The WebM audio codec is part of the open media file format created by Google in 2010, which also includes the WebM video codec and WebP image extension. Apple has never been interested in adopting the WebP and WebM formats in the past, as Steve Jobs once said that Google’s codecs were “a mess.”

The company has finally added support for WebP images to Safari with iOS 14 and macOS Big Sur. Another update to Safari 14 on macOS also added support for the WebM video codec , but this was never added to the iOS version of Safari. Now, with the WebM audio codec available in iOS, it’s probably only a matter of time before Apple adds WebM video support to its mobile operating system.

iOS 15 features a new version of Safari that has been completely redesigned with a floating navigation bar on the iPhone and a new tab bar on the iPad. The new design has been considered quite controversial, and multiple changes have already been made to it since the first beta of iOS 15.

The update is expected to be released for all users this fall. You can try out the iOS 15 beta by joining the Apple Beta Software Program .

  • Roundup: Here’s what’s new in iOS 15 beta 5
  • Apple inviting macOS Big Sur and Catalina users to try out the new Safari 15 beta
  • Apple releases latest iOS 15 public beta with Safari changes and more
  • Apple releases Safari Technology Preview 128 with updated tab interface
  • Concept: Rethinking Safari in iOS 15 with the same core design principles and goals

FTC: We use income earning auto affiliate links. More.

does safari support webm

Check out 9to5Mac on YouTube for more Apple news:

Safari

Filipe Espósito is a Brazilian tech Journalist who started covering Apple news on iHelp BR with some exclusive scoops — including the reveal of the new Apple Watch Series 5 models in titanium and ceramic. He joined 9to5Mac to share even more tech news around the world.

You are using an outdated browser. Please upgrade your browser to improve your experience.

Apple adds WebM Web Audio support to Safari in latest iOS 15 beta

AppleInsider Staff's Avatar

Currently available as an option in the Experimental WebKit Features section of Safari's advanced settings, WebM Web Audio and the related WebM MSE parser are two parts of the wider WebM audiovisual media file format developed by Google.

An open-source initiative, WebM presents a royalty-free alternative to common web video streaming technology and serves as a container for the VP8 and VP9 video codecs. As it relates to Safari, WebM Web Audio provides support for the Vorbis and Opus audio codecs.

Code uncovered by 9to5Mac reveals the WebM audio codec should be enabled by default going forward, suggesting that Apple will officially adopt the standard when iOS 15 sees release.

Apple added support for the WebM video codec on Mac when a second macOS Big Sur 11.3 beta was issued in February . The video portion of WebM has yet to see implementation on iOS, but that could soon change with the adoption of WebM's audio assets.

WebM dates back to 2010, but Apple has been reluctant to bake the format into its flagship operating systems. Late co-founder Steve Jobs once called the format "a mess" that "wasn't ready for prime time."

As AppleInsider noted when WebM hit macOS, Apple might be angling to support high-resolution playback from certain streaming services like YouTube, which rely on VP9 to stream 4K content. The validation of WebM Web Audio is a step in that direction.

Apple is expected to launch iOS 15 this fall alongside a slate of new iPhone and Apple Watch models.

Top Stories

article thumbnail

Grab Apple's 16-inch MacBook Pro M2 for $1,999 ($500 off) while supplies last

article thumbnail

Analysts mostly non-plussed by massive DoJ antitrust suit, and believe Apple will win

article thumbnail

Apple will crush the DoJ in court if Garland sticks with outdated arguments

article thumbnail

Listening on Apple Vision Pro: Audio Pods vs AirPods Pro vs AirPods Max

article thumbnail

Apple Silicon vulnerability leaks encryption keys, and can't be patched easily

article thumbnail

AirPods, AirPods Pro, AirPods Max: What to expect from Apple in 2024

Featured deals.

article thumbnail

Amazon Big Spring Sale 2024: live coverage of the best deals on Apple, accessories & more

Latest comparisons.

article thumbnail

M3 15-inch MacBook Air vs M3 14-inch MacBook Pro — Ultimate buyer's guide

article thumbnail

M3 MacBook Air vs M1 MacBook Air — Compared

article thumbnail

M3 MacBook Air vs M2 MacBook Air — Compared

Latest news.

article thumbnail

Apple stuff including a business card signed by Steve Jobs sold at auction for big money

Maybe we should have saved some of our old Apple gear. RR Auction's "Steve Jobs and the Apple Computer Revolution" auction has wrapped up, and collectors are scoring Apple-specific memorabilia at a premium.

author image

Apple has effectively abandoned HomeKit Secure Routers

Apple's HomeKit Secure Routers were announced in 2019 but never really taken up by manufacturers, and now some vendors are claiming Apple is no longer pursuing the technology.

author image

TP-Link Tapo Indoor cameras review: affordable HomeKit options with in-app AI tools

TP-Link's Tapo indoor cameras are a pretty good way to get the advantages of a HomeKit camera and in-app intelligent notifications

author image

Analysts mostly non-plussed by DoJ suit, and believe Apple will win

With the earliest possible trial date start likely in late 2026, analysts are generally nonplussed by the Department of Justice omnibus antitrust suit and are telling investors to stick with Apple.

article thumbnail

Apple looking inside China for AI providers to sidestep regulatory issues

Apple may need to navigate the business and regulatory waters in China with a local AI provider, and Baidu may have the technology it needs.

author image

US sues Apple, Epic complaints, and no iPads just yet on the AppleInsider Podcast

Apple is under fire from the US Department of Justice, plus iPads are coming, and it sounds as if there is a lot to look forward to with AirPods and AirPods Max, all on this week's episode of the AppleInsider podcast.

article thumbnail

Apple has a wide array of research to command the future AR and VR market

Apple has filed patent applications for many technologies that don't seem that interesting on their face. Together, they paint a picture of a world where Apple Vision Pro and augmented reality experiences could be available anywhere.

author image

How to change the volume on a Mac in small increments

If you're tired of dealing with volume that is either too loud or too quiet, here's how to increase the volume level on a Mac by a quarter of what you normally can just by using a simple keyboard shortcut.

article thumbnail

The Department of Justice's massive antitrust lawsuit against Apple is based on old information. Merrick Garland and company are going to lose big if they rely on arguments where practically every point made is no longer true.

Latest Videos

article thumbnail

iPhone 16 Pro: what to expect from Apple's fall 2024 flagship phone

article thumbnail

Thunderbolt 5 vs Thunderbolt 4 — everything you need to know

Latest reviews.

article thumbnail

ShiftCam LensUltra Deluxe Kit review: Upgrade your iPhone photo shooting game

article thumbnail

Keychron Q1 Max review: cushy, comfortable, costly

article thumbnail

{{ title }}

{{ summary }}

author image

Safari is getting support for WebM video playback

Apple’s Safari browser is getting official support for the efficient albeit niche WebM video codec on the Mac via an upcoming update to the macOS operating system.

Support for the WebM format in Safari for Mac has been spotted in the second beta of macOS Big Sur 11.3, which was released for developer testing yesterday .

Apple should release the upcoming update publicly by the spring, allowing Mac owners to enjoy WebM videos in the Safari browser for the first time without using specialized media players.

does safari support webm

WebM support appears to be unavailable in the current versions of iOS and iPadOS.

Better late than never!

This is obviously great news for all us Apple fans that have been bored by the Apple-Google rivalry and all the politics behind it. Mind you, support for WebM is arriving a full 11 (eleven!) years after Google debuted the format as a royalty-free alternative to the H.264 codec.

→ How to save images from Safari webpages on your Mac

Although WebM is not predominantly used as the go-to format for web videos, Firefox, Chrome and other browsers have long supported it. That said, some websites do encode their embedded videos in the WebM format due to the small file size and good image quality overall.

WebM also doesn’t require as much horsepower to render in a browser as other formats do, and it supports transparent video playback. Google also provides the royalty-free WebP codec for images that Apple officially supports across iOS, iPadOS and macOS as of last year.

Apple is adding support for the WebM audio codec for Safari on iOS 15

How to use the Smart Search bar in Safari on iPhone and iPad

What you need to know

  • Apple will support the WebM audio codec with Safari in iOS 15.
  • macOS added support for the codec in Safari already.

Safari in iOS 15 is playing some catchup with macOS.

As spotted by 9to5Mac , the latest beta of iOS 15 has added support for the WebM audio codec in the Safari app. The codec, which has already been supported in Safari on macOS Big Sur , has been missing support for Safari on the iPhone. iOS 15 appears to be the time to line up that experience.

According to the report, Apple had hesitated to adopt WebM codes in the past but has recently brought them to macOS with both the audio and video codecs.

The WebM audio codec is part of the open media file format created by Google in 2010, which also includes the WebM video codec and WebP image extension. Apple has never been interested in adopting the WebP and WebM formats in the past, as Steve Jobs once said that Google's codecs were "a mess."The company has finally added support for WebP images to Safari with iOS 14 and macOS Big Sur. Another update to Safari 14 on macOS also added support for the WebM video codec, but this was never added to the iOS version of Safari. Now, with the WebM audio codec available in iOS, it's probably only a matter of time before Apple adds WebM video support to its mobile operating system.

Apple is expected to launch iOS 15 alongside the iPhone 13 this fall. Safari in iOS 15 has been completely redesigned with a floating and interactive search bar towards the bottom of the screen.

The new design has been met with some skepticism, leading Apple to make small changes to the user experience over the course of the iOS 15 beta releases.

Master your iPhone in minutes

iMore offers spot-on advice and guidance from our team of experts, with decades of Apple device experience to lean on. Learn more with iMore!

Joe Wituschek

Joe Wituschek is a Contributor at iMore. With over ten years in the technology industry, one of them being at Apple, Joe now covers the company for the website. In addition to covering breaking news, Joe also writes editorials and reviews for a range of products. He fell in love with Apple products when he got an iPod nano for Christmas almost twenty years ago. Despite being considered a "heavy" user, he has always preferred the consumer-focused products like the MacBook Air, iPad mini, and iPhone 13 mini. He will fight to the death to keep a mini iPhone in the lineup. In his free time, Joe enjoys video games, movies, photography, running, and basically everything outdoors.

"Buy your mom an iPhone": Will these five words come to haunt Apple CEO Tim Cook? Probably not

visionOS 1.1.1 drops with bug fixes for the Apple Vision Pro headset

Apple's 'circumventing both the spirit and underlying goals' of an injunction forcing it to allow apps to steer customers to external payments, Microsoft & others warn

Most Popular

By Oliver Haslam March 21, 2024

By Tammy Rogers March 21, 2024

By Becca Caddy March 21, 2024

By Oliver Haslam March 20, 2024

By James Bentley March 20, 2024

By Stephen Warwick March 20, 2024

  • 2 visionOS 1.1.1 drops with bug fixes for the Apple Vision Pro headset
  • 3 Apple accused of 'circumventing both the spirit and underlying goals' of App Store changes
  • 4 iOS 17.4.1 finally arrives with new bug fixes... just hours after DOJ drops lawsuit bombshell
  • 5 Apple Vision Pro job listings pop up in new countries as a potential global headset launch nears

does safari support webm

WebKit Features in Safari 17.4

Mar 5, 2024

by Jen Simmons and Jon Davis

Architectural improvements

Form elements, web assembly, web inspector, changes to safari, safari extensions, web authentication, bug fixes and more, updating to safari 17.4.

Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes.

You can experience Safari 17.4 on iOS 17.4, iPadOS 17.4, macOS Sonoma 14.4, macOS Ventura, macOS Monterey, and in visionOS 1.1.

It’s always exciting to ship new features that you can use while building websites and web apps for your users. WebKit engineers also work on many important projects beyond implementing new web platform features. Recently, much effort has gone into multiple infrastructure projects that strengthen WebKit for the long-term.

We completed the final installment of our multi-year long rewrite of our inline layout engine (more on that later). We built two new iOS frameworks with hundreds of new APIs to support functionality used by web browsers, including multiprocess, JIT, and advanced keyboard & touch event access — and we are pivoting WebKit to use these new frameworks. We’re working on several other large projects that deepen security and privacy. And we’ve been hard at work to make Safari even faster. For many years, Safari has held the crown of the world’s fastest browser. It’s important to us to keep pushing the boundaries of speed, as the websites you build continue to get more complex. Hundreds of recent changes result in Safari 17.4 showing a significant performance bump.

Safari 17.4 brings two improvements to web apps on Mac.

First, Safari adds support for the shortcuts manifest member on macOS Sonoma. This gives you a mechanism in the manifest file for defining custom menu commands that will appear in the File menu and the Dock context menu.

Web Kittens web app open on macOS, with the File menu showing and four custom shortcuts listed

A web app shortcut consists of a name , (the words you’d like to appear in the menu), and a url . When a user activates the command, it opens the specified URL inside the web app.

Users can set up custom keyboard shortcuts for app menu commands in System Settings > Keyboard > Keyboard Shortcuts > App Shortcuts. By default, macOS does not assign web app shortcuts any keyboard commands.

Second, Safari 17.4 now supports the categories manifest member on macOS Sonoma. This member provides you with a mechanism for telling the browser which categories your web app belongs in. On Mac, when a user creates a Launchpad folder that contains web apps, the folder is automatically named accordingly.

Launchpad on macOS showing two app icons in a group titled Social Networking

Switch control

The switch is a popular interface for many use cases, but until now, there was no easy way to put a switch on the web. Instead developers might use a checkbox input field, remove the visual look of the checkbox with appearance: none , and write custom styles to create something that looks like a switch.

Now, with WebKit for Safari 17.4, HTML supports a native switch. If you code <input type="checkbox" switch> , the browser will simply create a switch for you, and map it to role=switch and related ARIA features.

Extending the current HTML checkbox provides several benefits and honors the W3C’s HTML Design Principles . First, this design degrades gracefully — which means you can use <input type="checkbox" switch> today. Browser that have support will show a switch, while browsers that do not have support will show a checkbox. No user will get a broken experience, and you don’t have to wait until all of your users have a browser with support in order to utilize this on your website or web app. This design also does not reinvent the wheel . It matches the way form controls have always worked on the web, and feels just like the code you’re used to. It’s an incremental evolution of the web. And as a simple solution, it avoids needless complexity .

The accent-color property can be used to change the background color of the switch in the “on” state. And, exactly like other form controls, you can use appearance: none to remove the system default styling and apply your own, perhaps while leveraging :before and :after .

In the future, there will likely be multiple pseudo-elements to make it even easier to style the switch with your custom styles. You can try out ::track and ::thumb in Safari Technology Preview today and let us know what you think of this approach. See how they work in this demo , after enabling the “::thumb and ::track pseudo-elements” feature flag . (These pseudos are waiting to ship until there is a more comprehensive plan for styling form controls proposed, discussed and resolved on at the CSS Working Group.)

Vertical writing modes

From the beginning , the web has always been interactive. Even before any method of custom styling was available, form controls and input fields provided the means for users to communicate back to the website and to each other. The web was also originally designed in an era when the Latin alphabet (used by many languages, including English) was the presumed default, with its horizontal top-to-bottom writing mode.

For thirty years, form controls have presumed a horizontal writing mode . Typesetting in a vertical writing mode for languages like Chinese, Japanese, Korean, and Mongolian did not include vertical form controls. Now that’s changed. Starting in Safari 17.4, vertical form controls are supported. This includes meter, range, progress and other form controls that could make for great UI in any language when laid out in a vertical format.

does safari support webm

Horizontal Rules inside Select

You can use an <hr> element (a horizontal rule) inside a <select> element to draw a separator line. WebKit shipped support in Safari 17.0 on macOS. Now, Safari 17.4 on iOS 17.4, iPadOS 17.4, and in visionOS 1.1 also has support.

Safari window floating in front of mountains in Vision Pro, with a a select menu open on a web page, showing lines between list items

Try a demo and read the story of how hr in select was supported years ago, went away, and is now restored.

WebKit for Safari 17.4 also adds support for the showPicker() method for <input type="date"> on macOS.

Inline Layout

One of the infrastructure projects that’s been underway in WebKit during the last several years is the complete rewrite of our inline layout engine. Safari 17.4 marks the completion of this project and the retirement of the twenty-one year-old legacy line layout engine.

Inline layout is integral to displaying content on the web. It determines the size and layout — wrapping, justification, spacing, and baseline alignment — of all text and other inline-level content. As developers, we often focus on the invisible block boxes on a web page and write CSS to layout those boxes using Flow, Tables, Flexbox or Grid. The content inside those boxes is placed using complex inline layout algorithms that developers often don’t need to think much about.

We’ve been shipping our new inline layout engine incrementally for many years. As more and more of the new engine was complete, more and more of the content on web pages was positioned by the new engine. This means users have been benefiting from WebKit’s new inline layout engine for a while. The legacy system was only triggered if there were something that hadn’t been yet implemented in the new engine. The last major step needed was the reimplementation of Ruby — and now it’s also a proper inline layout feature, fixing past inconsistencies.

Projects like these can be disruptive. Often browser teams will choose to not ship any new features while a multi-year rewrite project is in progress. WebKit instead chose to keep shipping new features, often implementing them twice — once in the legacy line layout engine, and again in the new inline layout engine. Now that this work is done, we no longer have to implement anything twice. This work also let us go through a large number of bugs reported on bugs.webkit.org , confirm they are no longer a problem, and close them as fixed.

We’re excited for WebKit’s future with this new engine. This investment results in increased interoperability by aligning to the latest web standards, fewer inline layout bugs, better performance, improvements to stability, and the ability to implement new features far more easily. The completion of inline layout also marks the beginning of rewriting the layout engine for other formatting contexts , starting with Flexbox.

Align content everywhere

When Flexbox shipped, it brought a powerful new tool to the web — box alignment . The align-content property made it possible to easily vertically center content inside a box! Or you could use it to align content to the bottom to the box, to align baselines of text, and more. When CSS Grid shipped, box alignment became possible in a second layout mode. Since 2017, you’ve been able to align the direct children of both Flexbox and Grid containers.

Now, we are proud to be the first browser shipping support for align-content inside two more formatting contexts — block layout and table layout. This means if all you want to do is align a box’s content in the block direction, you don’t need to involve Flexbox or Grid. Plus, you can now mix alignment with floats, and you can use it inside table cells.

In addition, we updated the handling of align-content and justify-content on scroll containers in WebKit for Safari 17.4. Now, for example, you can use CSS to set the initial scroll position to the end rather than the start of the content.

Be sure to test alignment on scroll containers across browsers, as many are still in the process of updating to the specified behavior. Those that have not yet updated may clip content.

CSS Scoping

Websites today can be complex, with large teams working across multiple projects, relying on pattern libraries or frameworks to keep everything organized and consistent. It can become tough for large teams to handle how their CSS cascades. Tools like Cascade Layers and :has() have changed the game, allowing developers to apply styles more masterfully. Yet, developers often want a way to scope styles to the individual component they’re working on, without worrying about the big picture or preventing unintended consequences.

CSS Scoping was created to provide several more powerful options for organizing and structuring CSS. (Note, there have been many debates over many years on how style scoping might work. Search results for “CSS scoping” often yield old, unimplemented or completely different ideas.)

WebKit for Safari 17.4 adds supports the @scope rule and expands the capabilities of the :scope pseudo-class. Scoping changes how the cascade works in some surprising ways, so do be sure to read about its impact before deploying widely.

If your project is making heavy use of components, constructed independently and loaded in random order, scoping can help you by ensuring certain styles only apply to the contents of a specific element, and never to anything else on the page.

By default, all CSS on a project applies universally. It has a “scoping root” of <html> . And the :root pseudo-element refers to the root element in the DOM — the html element. CSS Scoping lets you use <style> @scope to reset the scoping root to a certain element, to the parent of the <style> element.

In this case, because <article> is the direct parent of <style> @scope , all of the styles defined inside @scope will only impact article and the content inside article . Nothing outside article is affected.

But that’s not all CSS Scoping can do. Let’s imagine we want to apply styles to a sidebar, but we don’t want those styles to apply to everything in the sidebar. We can use @scope to create a donut of sorts — with a hole in the middle where the styles don’t apply.

By defining a scoping root with a scope-start selector ( aside ) and a scoping limit with a scope-end selector ( section ), we can effectively stop the cascading of the styles.

Also, anytime you use CSS Scoping, it radically changes what happens when there’s a tie in specificity.

Since the creation of CSS, when multiple selectors have equal specificity, the one that appears last in the CSS cascade is the one that gets applied. For example, if this is your CSS:

Then this is your result.

The headline is always yellow, because .yellow comes later in the CSS file. The order in the HTML does not matter.

But with scoping, the selector that applies to an element that’s closer in the DOM to the scoping root is the one that will apply when their specificities are tied .

Let’s use @scope instead of descendant selectors:

Now, the headline color is determined by the DOM order in HTML, not the cascade order in CSS:

The headline is yellow when .yellow is the closer ancestor, and it’s blue when .blue is the closer ancestor.

This is a fundamental change to how CSS works, so don’t get caught off guard. Use CSS Scoping with a lot of thought and care.

Note that a selector like .blue h1 { } has higher specificity than a selector like @scope (.yellow){ h1 { }} . The specificity of the scoping root’s selector is not added to the specificity of the selectors inside the @scope rule, unlike Nesting. And .blue h1 is higher specificity than h1 .

WebKit for Safari 17.4 also expands the purpose of the :scope pseudo-class. When used inside a @scope block, :scope matches the block’s defined scope root. This provides a way to apply styles to the root of the scope from inside the @scope block itself. In the following example, :scope applies a border to the article element.

White space and text wrap

For years, the white-space property in CSS has provided a mechanism for doing two things at once: 1) defining whether and how white space is collapsed, and 2) defining whether and how lines wrap. The CSS Working Group has since noted that this was likely a mistake , to handle two different qualities in one property. With the introduction of text-wrap , the CSSWG has rethought how the long and shorthand versions of these properties combine into an architecture that makes more sense and gives us needed flexibility.

Now the white-space property is a shorthand for two new longhand properties: white-space-collapse and text-wrap-mode , both added in WebKit for Safari 17.4. These longhands let you change the collapsing and wrapping modes independently, each without affecting the other.

The white-space-collapse property controls how white space is collapsed. By default, it’s set to collapse , causing strings of multiple spaces to become a single space. You can change the value instead to preserve in order to keep all the spaces, or use other the values: preserve-breaks , preserve-spaces , or break-spaces . These values all behave as they have for years with the white-space property.

The new text-wrap-mode property provides a mechanism for setting whether or not text should wrap. The wrap value turns it on, and the nowrap value turns it off.

This work sets the stage for the text-wrap shorthand and it’s longhands text-wrap-style and text-wrap-mode , some of which you can currently test in Safari Technology Preview .

Percentages in spacing

WebKit for Safari 17.4 adds support for percentages in letter-spacing and word-spacing . This lets you define spacing as a percentage of the element’s font-size — and keeps tracking the font-size even when it grows or shrinks on descendant elements.

Styling grammar and spelling errors

WebKit for Safari 17.4 adds support for the ::spelling-error and ::grammar-error pseudo-elements. These make it possible to create your own custom styling for text that is marked by the browser as misspelled or grammatically incorrect.

Alt text for generated content

The vast majority of content on the web is communicated through HTML, but CSS does have the ability to insert content into the page. Until now, sometimes this kind of content could not be made accessible. Now in WebKit for Safari 17.4, you can provide alternative text with accessible content fallback — content: "foo" / "alt-text";

For example, perhaps we want to prefix certain links with the little ⓘ icon to let users know this item leads to more detailed information. That symbol might be read by screenreader as “Circled Latin Small Letter I” or “Information source combining enclosing circle”, neither of which do a good job communicating the intended purpose. Perhaps a better experience would be to simply hear “Info:”.

Previously, the -webkit-alt property served this function. It has been deprecated in favor of the new content alt text syntax. The new syntax is also more expressive as it allows for cascading, and allows you to chain multiple strings and attr() as alternative text.

Transitions

When CSS Transitions were created, they allowed authors to create a gradual timed transition between old and new values by interpolation. Sometimes, however, interpolation is not possible. For example, there’s no meaningful intermediary value between float: left and float: right , so, transitions ignored these properties. They simply jumped from the first state to the second immediately, without any ability to define when the jump should happen.

Yet, web developers have wanted a way to at least be able to define when the transition should happen for discrete properties. So the CSS Working Group figured out a way to make that possible. Now, you can tell the browser that you want an element to be capable of transitioning discrete property values, which lets you control their transition timing using the easing functions .

WebKit for Safari 17.4 adds support for the transition-behavior property. The transition-behavior: allow-discrete rule lets you enable transitions between discrete property values, so that you can control their timing via transition .

The :has() pseudo-class provides tremendous value. We keep making it more and more powerful by adding support for additional pseudo-classes within :has() . WebKit for Safari 17.4 adds support for :has(:any-link) , :has(:link) , and :has(:-webkit-any-link) , making it possible to select an element depending on whether or not it contains a link.

WebKit for Safari 17.4 adds support for CSS custom properties to the ::backdrop pseudo-element, allowing variables to be applied to the backdrop behind dialog elements and other top layer items.

WebKit for Safari 17.4 also adds offset-position support for circle() and ellipse() .

And WebKit for Safari 17.4 makes -apple- prefixed pseudo-elements no longer valid.

This release of Safari adds support for an assortment of small Web API additions that give you extra tools in your developer toolkit.

With support for the element.checkVisibility() method, you can determine the visibility of an element across a variety of conditions including how CSS properties such as display , visibility , and opacity are applied.

WebKit for Safari 17.4 also extends its Declarative Shadow Root support. The Element.prototype.setHTMLUnsafe() , ShadowRoot.prototype.setHTMLUnsafe() , and Document.parseHTMLUnsafe() methods, as well as the ShadowRoot clonable property are now available. The setHTMLUnsafe() methods work similar to setting an element’s innerHTML property, enabling unsanitized DOM tree mutation but with additional support for declarative shadow roots. The parseHTMLUnsafe() method similarly parses unsanitized HTML with declarative shadow root support and returns a document. And the clonable read-only boolean property allows you to detect if a ShadowRoot is clonable.

WebKit for Safari 17.4 adds support for the CustomStateSet interface for custom element state management. This interface includes methods to add() , delete() , or detect if the element has() a given state, and more. Importantly, these states added to a custom element can be styled using the :state() pseudo-class by users of the custom element.

The DOMMatrixReadOnly interface now supports the scaleNonUniform() method that creates a new DOMMatrix scaling on X, Y, and Z axes. The X axis scaling factor must be specified, but the Y and Z axes default to 1 . The scaling is centered at the given origin that defaults to (0, 0, 0) .

Lastly, WebKit for Safari 17.4 adds support for AbortSignal.any() giving you a convenient way to combine abort signals such as user input (e.g. a user clicks a cancel button) and a timeout to send an abort signal to an async operation.

New JavaScript features in Safari 17.4 add new expressiveness and convenience with promise resolvers, improved internationalization formatting, ArrayBuffer ownership management, and Array grouping features.

WebKit for Safari 17.4 adds support for the Promise.withResolvers static method. It allows developers the convenience of creating a promise and configure the resolution and rejection handlers after it has been created. The method returns the promise along with the resolution and rejection functions.

The TimeZoneOffset format is now available for Intl.DateTimeFormat . It allows you to specify the difference of the local time to UTC time in positive or negative hours and minutes depending on whether the local time is ahead or behind.

Additionally, Number.prototype.toLocaleString and Intl.NumberFormat have been updated so the string representation correctly aligns with recent specification changes.

There’s also new expressive API for managing the concept of ownership for ArrayBuffers. ArrayBuffer.prototype.transfer creates a new ArrayBuffer with the same contents and properties as the target ArrayBuffer (such as being resizable) and detaches it from the original ArrayBuffer. You can use ArrayBuffer.prototype.transferToFixedLength() to guarantee a non-resizable ArrayBuffer with the same content as the buffer. ArrayBuffer.prototype.detached will tell you if the buffer has been transferred and is detached.

WebKit for Safari 17.4 also adds the Array grouping feature that includes Object.groupBy and Map.groupBy methods. These methods give you powerfully simple tools for grouping datasets.

Additional codecs

WebKit for Safari 17.4 adds support for several audio and video codecs.

First, WebKit for Safari 17.4 on iOS, iPadOS and in visionOS adds support for WebM . While the WebM container (with both the VP8 and VP9 video codecs) has been fully supported on macOS since Safari 14.1, support on iOS and iPadOS was limited to VP8 in WebRTC. Now, WebM is fully supported everywhere.

The Vorbis audio codec is also now supported in WebKit on iOS 17.4, iPadOS 17.4 and in visionOS 1.1.

And WebKit for Safari 17.4 expands what WebCodecs can do with the addition of support for the HEVC codec.

Source prioritization

When support for video embedding arrived in HTML5 with the <video> and <source> elements, the web standard specified that the first file that’s recognized by the browser should be chosen and played. This put the burden on the developer to make sure the best files were listed before lesser-quality files.

This made sense in a simpler time, when there were just a few codecs available. Now, there are many codecs with different qualities. It’s not always possible for developers to know which file is the best one for a user to stream. And it can be impossible to put them in one specific order that’s best for all users.

A browser might easily be capable of playing several of the files offered, but one of those files could be compressed with a codec that the user’s device can decode using hardware, while the rest might only be decoded by software alone.

It’s definitely a better user experience to use hardware decoding. Doing so significantly impacts power usage and makes a battery last longer. So now, in WebKit for Safari 17.4, the best file for the user is chosen, instead of defaulting to the first file that has support. Video codecs with hardware decoding support on various Apple devices include VP9, h.264, HEVC and AV1.

WebKit for Safari 17.4 adds support for HTML character entities to WebVTT (Web Video Text Tracks Format), the technology used to add subtitles and captions to video files on the web. HTML entities are a way to write special characters without having the browser mistakenly think they are part of the HTML code. For example, &middot; represents the “·” character.

MediaStream

WebKit for Safari 17.4 adds support whiteBalanceMode to MediaStream. In photography, adjusting white balance is a technique for compensating for the fact that “white” is a different color under different lighting conditions. Sunlight is very blue, while indoor lights tend to be quite orange. Our brains automatically adjust, so as humans, we rarely notice. But cameras need technology to help them adjust color temperature so that the resulting photo or video has the kind of coloring people expect. Now modes for white balance are available for the MediaStream Image Capture API on the web.

WebKit for Safari 17.4 adds support for kernelUnitLengthX and kernelUnitLengthY to SVGFESpecularLightingElement .

WebKit for Safari 17.4 adds support for four new WebGL extensions: EXT_clip_control , EXT_depth_clamp , EXT_polygon_offset_clamp , and WEBGL_polygon_mode .

WebKit for Safari 17.4 enables extended constant expressions to support more advanced WebAssembly linking.

Web Inspector for Safari 17.4 has two new features. First, when a page attempts to load a font URL blocked by Lockdown Mode, a message is logged to the Console.

Second, Web Inspector now groups load errors for source maps. Source map files are used for converting a combined or minified file back into its original state. Grouping load errors helps reduce noise while debugging. You can disable this behavior in Web Inspector Settings under Experimental settings.

Safari 17.4 itself includes three changes to the UI and user experience. First, you can now configure the Favorites Bar to show your bookmarks with only their icons. Edit the name of the bookmark in the favorites bar, and remove the name. The icon will remain.

Second, Safari 17.4 now supports webpage translation inside <iframe> elements.

And third, Safari 17.4 adds support for Apple Cash virtual card numbers and showing the user their Apple Cash balance when using AutoFill.

Safari 17.4 includes a change to web extensions that allows extensions to open Private Browsing windows even when they don’t have access to Private Browsing.

WebKit for Safari 17.4 adds support for WebAuthn’s PublicKeyCredentials.getClientCapabilities() function. Use it to find out which WebAuthn features are supported. It returns a Promise of a record<DOMString, boolean> containing capabilities and their values.

In addition to all the new features, WebKit for Safari 17.4 includes work polishing existing features.

Accessibility

  • Fixed exposing the correct <summary> element role. (13661104)
  • Fixed non-accessible content within iframes with ARIA roles. (104611075)
  • Fixed VoiceOver word echo on text inputs with a combobox role. (112488137)
  • Fixed an issue where innerHTML and innerText changes to labels did not update their corresponding input element’s accessibility title. (113872525)
  • Fixed <details> and <summary> elements not included in VoiceOver form controls menu or list. (117308226)
  • Fixed comboboxes not notifying assistive technologies when aria-activedescendant changes. (117747058)
  • Fixed toggling accessibility preferences to correctly update form control appearance. (117914468)
  • Fixed: Removed the default ARIA-level heading for a heading role, matching removal from ARIA specifications. (119059172)
  • Fixed text missing from accessibility labels for many common shadow DOM scenarios. (120223342)

Browser Changes

  • Fixed loading a ⌘Click fragment link in a background tab. (119079650)
  • Fixed the default link color contrast for the dark color scheme. (61149466)
  • Fixed getComputedStyle() for invalid pseudo-elements. (98504661)
  • Fixed querySelector() to not throw an exception for -webkit- prefixed pseudo-elements. (99299129)
  • Fixed :user-invalid triggering while typing a date. (110687369)
  • Fixed: Updated text-transform: full-size-kana to align with Unicode 15. (111508663)
  • Fixed contain: inline-size breaking grid-template-rows: auto . (113915953)
  • Fixed svh and dvh units being unexpectedly equal when the Safari tab bar is not visible. (115085360)
  • Fixed mixed-blend-mode to blend correctly against the root background. (115688282)
  • Fixed backdrop-filter with many interoperability improvements. (115703346)
  • Fixed oklab and oklch lightness value clamping. (116195533)
  • Fixed flex layout invalidation in cases where the content of a flex item changes or style changes impact the preferred widths computation of its items. (117181858)
  • Fixed selection gaps to get painted with the expected ::selection pseudo-element color. (117796745)
  • Fixed parsing and serialization of -webkit- prefixed pseudo-elements. (118081134)
  • Fixed ::backdrop to be allowed after ::slotted() . (119015204)
  • Fixed to allow :checked and :indeterminate to match at the same time. (119075969)
  • Fixed grid with size containment and min-height not sizing row correctly. (119736473)
  • Fixed computing values of basic shape rect() and xywh() as the equivalent inset() . (119739406)
  • Fixed poor performance with :has(+ :not(.class)) pseudo-class selector. (119819247)
  • Fixed CSS content computed value serialization. (120061551)
  • Fixed pseudo-element parsing in getComputedStyle() and KeyframeEffect.prototype.pseudoElement so they require them starting with :: (or : for 4 legacy pseudo-elements). (120170550)
  • Fixed CSS linear() easing. (120290721)
  • Fixed named at-rule container getting skipped when the container is named in a :host selector. (120428386)
  • Fixed :not(:has(:not(foo))) getting misclassified as scope breaking. (120492012)
  • Fixed the name for a ::slotted pseudo-element in a container query getting resolved against the wrong scope. (122224135)
  • Made -apple- prefixed pseudo-elements no longer valid. (120268884)
  • Fixed <select> not refreshing the dropdown after an <option> is removed on iPad. (88292987)
  • Fixed text-indent to affect the selected file(s) label for file inputs. (105223868)
  • Fixed dir=auto to work for hidden , password , submit , reset , and button input types, made dirname work for password and submit input types, and removed dirname support from number input types. (113127508)
  • Fixed serialization of autocomplete with a webauthn token. (116107937)
  • Fixed <option> elements outside of an <optgroup> getting added to the preceding group. (117930480)
  • Fixed viewport units to be correct after entering and exiting fullscreen mode on iOS, iPadOS, and in visionOS. (120496571)
  • Fixed the system-ui font family within <canvas> . (117231545)
  • Fixed <progress> to use the page’s preferred rendering update interval. (118976548)
  • Fixed missing support for the direction attribute in the list of attributes whose values are matched case-insensitively with attribute selectors. ( (119432066)
  • Fixed stringification algorithm of the Function constructor to match specifications. (102065151)
  • Fixed block-level function declarations to have correct scope in global code and aligned the detection of hoistable block-level legacy function declarations with the spec. (113880075)
  • Fixed an edge case with detecting a semantic error in generators. (117497786)
  • Fixed Temporal API to throw TypeErrors for unexpected primitives. (117992134)
  • Fixed Temporal options handling to align with the specification. (118088676)
  • Fixed Temporal.Now.timeZone() to be updated to timeZoneId() . (118674314)
  • Fixed Link-stylesheet elements to not fire load events for non-text/css and non-2XX responses. (116112223)
  • Fixed link-stylesheet elements to not fire load events for non-2XX responses such as 3XX responses that do not redirect. (116331826)

Lockdown Mode

  • Fixed Lockdown Mode disabling on sites with COOP and COEP HTTP headers. (119503109)
  • Fixed WebVTT regions to position according to specifications. (23091897)
  • Fixed pausing MediaRecorder continuing to call ondataavailable at every timeslice event. (115979604)
  • Fixed an HEVC decoder issue when translating annexb data. (116768196)
  • Fixed WebVTT to treat negative percentages as invalid values. (117615681)
  • Fixed object-fit: fill on <video> elements. (118020922)
  • Fixed WebRTC calls not unmuting automatically after using Siri sometimes losing incoming audio. (118461093)
  • Fixed white bars across the top and bottom of fullscreen video playback while using Light Mode. (118530255)
  • Fixed the always empty video.buffered attribute. (118550061)
  • Fixed WebVTT to correctly parse region id settings. (118551267)
  • Fixed VideoEncoder produces no frames with latencyMode “realtime” when framerate/bitrate are not given. (118725549)
  • Fixed AV1-in-MP4 codec string not shown in Show Media Stats. (118850797)
  • Fixed getDisplayMedia frameRate always at 30 regardless of constraints. (118874132)
  • Fixed returning to fullscreen from picture-in-picture breaking subsequent touch input. (119832557)
  • Fixed HLS video captions where there are multiple text tracks available. ( (119839950)
  • Fixed fullscreen video not scaling to display size when the Safari window is in Full Screen App Mode. (119893556)
  • Fixed handling key renewal requests that cause playback errors for some DRM content. (120230860)
  • Fixed camera and mic activation failure due to media capability granting and activation order. (120510826)
  • Fixed paint-on captions shifting during playback. (120847946)
  • Fixed videos shifting up and down when fullscreen overlay controls appear or disappear. (120848395)
  • Fixed volume slider flickering when adjusting volume in Safari in visionOS. (120855936)
  • Fixed blocked encrypted sampled not getting enqueued after a CDM is attached to a SourceBuffer. (120879185)
  • Fixed video playback on Twitter.com in Safari in visionOS. (121391975)
  • Fixed[Netflix.com content that can become zoomed-in and cropped when in fullscreen mode. (121822831)
  • Fixed pseudo-element font size calculation to fix subtitle size in fullscreen mode. (122584350)
  • Fixed incorrectly oriented Traditional Mongolian script characters.(93426525)
  • Fixed resizing behavior with writing-mode: vertical-rl or direction: rtl . (102620110)
  • Fixed opacity and rendering the root element background image. (115396444)
  • Fixed the color of the drop shadow to preserve its alpha channel. (115812347)
  • Fixed filters with outsets to repaint the entire filterRegion if GraphicsStyles are used. (115817290)
  • Fixed compositing the filter style transparency layers to not clip the destination context. (115901634)
  • Fixed a bug where the returned transform from getComputedStyle was incorrect. (117523629)
  • Fixed handling images with color spaces not supported by the backend to fallback to render in sRGB. (118238178)
  • Fixed check boxes and radio buttons to avoid floats. (118660695)
  • Fixed rendering for a <div> within a transformed parent <div> with overflow: hidden . (118901069)
  • Fixed rendering issues when editing text. (119833765)
  • Fixed offsetHeight and offsetWidth are 0 for an inline box wrapping a block. (119955792)
  • Fixed a floating element causing a list item bullet to be orphaned on constrained lines. (120022893)
  • Fixed incorrect inline box (hugging) outline painting in vertical writing modes. (120217559)
  • Fixed incorrect ch unit value in vertical-rl and vertical-lr when text-orientation is not upright. (120293590)
  • Fixed graphics artifacts when scrolling a Heroku app. (120373474)
  • Fixed overflow: hidden to not prevent CSS Subgrid from applying. (120848131)
  • Fixed the repaint area for underline text decorations. (121082290)
  • Fixed align-content and justify-content on scroll containers causing overflowing content to become inaccessible. (121366949)
  • Fixed rendering floats and an out-of-flow <br> element with clear . (121444267)
  • Fixed a line break at gaps between two inline elements in a container with white-space: nowrap . (121859917)
  • Fixed cropped first letter for custom fonts that report negative advance width. (121891210)
  • Removed margin-trim behavior for floats to match specification changes. (115794102)
  • Fixed sending an error back to the caller if an error occurs for scripting.executeScript() . (107996753)
  • Fixed an issue where scripts may not be removed after calling scripting.unregisterContentScripts() . (113171510)
  • Fixed unusable horizontal scrollbars for right-to-left, vertical-rl , or flexbox reverse mode elements. (104944522)
  • Fixed a scrollTo() followed by an animated scroll ending at the wrong scroll position. (117608836)
  • Fixed wheel overflow behavior with Shadow DOM elements. (118496293)
  • Fixed keyboard scrolling beyond the page getting stuck at a bad scroll offset. (120053910)
  • Fixed cases where website data is unexpectedly evicted. (119818267)
  • Fixed applying rx or ry exclusively via CSS having no effect. (113500023)
  • Fixed negative SVGTransform scale values to be correctly stringified. (118656892)
  • Fixed the layout of an SVG when it is inside an <iframe> without affecting the size of the <iframe> . (120178866)
  • Removed support for SVGRenderingIntent. (102516681)
  • Fixed CSS invoked URL parsing to always use UTF-8 as agreed by the W3C CSS WG. (114889625)

Web Animations

  • Fixed style invalidation for animations. (118500247)
  • Fixed a paused animation where currentTime is changed to 0 not restarting when unpaused. (118826588)
  • Fixed invalid coordinates on wheel and gesturechange events inside an iframe. (105243167)
  • Fixed HTMLAreaElement to align with the HTML Standard. (110028213)
  • Fixed the result of Range.getClientRects() and Range.getBoundingRect() for certain ranges. (112543805)
  • Fixed Scroll To Text Fragment to not scroll after dynamic stylesheet loads and the user has scrolled. (112608578)
  • Fixed SharedWorker referrer policy to default to its context referrer policy if none is provided in its script http response. (114625126)
  • Fixed URL encoding for Request ‘s referrer feature and Response.redirect() . They now always use UTF-8. (115219660)
  • Fixed reprocessing <meta name="color-scheme"> when their name or content attribute changes. (115958450)
  • Fixed FetchResponse.formData() to parse headers names as case insensitive. (116742000)
  • Fixed declarative shadow trees to match the latest specifications. (117655691)
  • Fixed jiggling caused by repeated calls to scrollIntoView({ block: 'center' }) . (117755250)
  • Fixed fullscreen warning banner to prevent cutting off long domain names. (118078137)
  • Fixed updating resizeBy and resizeTo to use int rather than float to align with specifications. (118872048)
  • Fixed the CookieChangeEvent to not be exposed when the Cookie Store API is disabled. (118902989)
  • Fixed Element.prototype.setAttributeNode() to not treat attribute names case insensitively. (119013600)
  • Fixed toggling the spellcheck attribute not toggling spelling markers on input elements. (119269616)
  • Fixed removing highlights in the Custom Highlights API. (119531671)
  • Fixed getElementsByName() to only return HTML elements, not SVG, MathML, or other types of elements. (120275680)
  • Fixed the button value for a pointerup event not matching the pointerdown event. (120429508)
  • Fixed a wheel event to fire on an element that has been re-inserted after document.open . (120893136)
  • Fixed Scroll To Text Fragment Text Directives to find text with additional unrendered white space in their node data. (120913588)
  • Fixed changing HTMLCanvasElement width or height causing intermediate buffer allocations. (122309325)
  • Fixed canvas captureStream stuttering with WebGL. ((122471664)
  • Fixed Home Screen Web Apps in Simulator to be listed under a “Home Screen Web Apps” section in the device submenu of the Develop menu. (117742935)
  • Fixed the tan() function to not trigger the color picker. (118724061)
  • Fixed Canvas WebGL context capture to WebCodecsVideoFrame not capturing all frames. (108459224)
  • Fixed: Improved performance of MSAA rendering, including antialiased default framebuffer and fixed PBO uploads of PVRTC1 textures. (117461678)
  • Fixed WebGL OffscreenCanvas returning the previously created WebGL1 context when asking for WebGL2. (119028794)
  • Fixed WebGL to be available in nested workers. (120279728)
  • Fixed HTML content not displaying in a Simulator, affecting projects using the web extension project template. (121338366)
  • Fixed media tracks obtained with {"width":1920,"height":1080,"frameRate":24} . (61747755)
  • Fixed triggering resolution scaling in the case of WebRTC maintain-framerate degradationPreference . (121041723)
  • Fixed a bug that prevented HTML canvas elements from always being marked dirty on initialization. This could cause some video effects to have choppy animations. (121257960)

Safari 17.4 is available on iOS 17.4 , iPadOS 17.4 , macOS Sonoma 14.4 , macOS Ventura, macOS Monterey and in visionOS 1.1.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad, or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 17.4, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . You can also follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.4 release notes .

does safari support webm

Safari finally supports WebM video playback on macOS Big Sur 11.3 Beta 2

Safari WebM support

For a long time now, Apple didn’t offer WebM playback on macOS and iOS, leaving users unable to view videos in Google’s WebM format natively. However, starting macOS Big Sur 11.3 Beta 2, WebM seems to be supported in Safari on the Mac. iOS still doesn’t support it, though.

WebM is a popular video format used on the web as a royalty-free alternative to the H.264 codec used in the MP4 format.

It offers excellent video quality while also maintaining a small file size. The WebM format uses the latest VP9 codec for video playback and is not resource-intensive, meaning it can be played almost anywhere effortlessly; even on low-spec machines.

does safari support webm

Up until now, Apple did not support WebM ever since it launched back in 2010. Late Apple CEO Steve Jobs at the time, implied that the WebM format was a “mess” and was “not ready for primetime.” Over a decade later, it is.

Apple is one of the companies that officially backs the H.264 codec, which isn’t royalty-free.

The WebM video format, although popular, appeals to only a niche audience. So far, it’s not being widely used on most websites. Although, it does have some practical uses. For instance, WebM is capable of transparent video playback.

It’s worth noting that WebM is already supported on most third-party browsers on the Mac including Google Chrome, Mozilla Firefox, and more. On iOS, since all third-party browsers use Apple’s WebKit engine , WebM isn’t supported yet.

Although, users who have been wanting WebM to work in Safari on their Macs can upgrade to macOS 11.3 when it officially comes out; or hop on the Beta 2 right now.

WebM video playback currently is also a little buggy on some websites. Webpages that have multiple WebM videos display some WebM videos pixelated. This is expected as Safari is running on a Mac with a Beta version installed. Apple may streamline support with future beta releases.

For those who want to test out if WebM works in Safari on their Macs running macOS Big Sur 11.3 Beta 2, you can head over to the WebM detection webpage which indicates whether the file format works. There’s also a video you can playback for testing the format.

macOS Big Sur 11.3 Beta 2 also brings along other improvements including a new support page within the Preferences panel.

We’d like to hear your thoughts on this. Let us know in the comments section below!

does safari support webm

Email address:

[SOLVED] Play .webm video on safari

Does anyone know how to play .webm videos on Safari

Normally, for video textures, I use mp4 files. There are dozens of converters on the net, so it shouldn’t be too tough.

But i need to play transparent video. Webm supports transparent video

Safari hasn’t fully implemented Webm support yet, so not much you can do until Apple adds that in place. There used to be a number of plug-ins for desktop Safari that enabled Webm playback but support for plug-ins has been dropped.

For the moment if you would like to play a transparent video in Playcanvas you could use some form of chromakey shader with a green-screen mp4 video:

As you mentioned the quality is poor that’s why i moved to transparent video.Is there any other way of playing .webm videos in IOS safari or Chrome. It works fine in android

https://caniuse.com/#search=webm

Partial Support: Only supports VP8 used in WebRTC.

Chrome and the other browsers on iOS still use the webview of Safari for rendering (Apple security rule). So basically they can’t have a different feature set than what Safari provides.

Indeed there is partial support of the Google VP8 codec in WebRTC, as Will said, on iOS though I have no idea if that can be used to decode a file, most likely it used only to compress the camera stream among peers.

Thank you so much Leonidas and will.After surfing some blogs i came to an end i can’t do it.Let me do it for android only

iOS 15 Safari is getting support for WebM audio

Apple has added support for WebM audio codec to Safari in the iOS 15 beta 5 . The company has been adding support for open media file formats over the past few years, including support for WebP images, and WebM audio is the latest inclusion.

iOS 15 WebM Web Audio

After VP9 and WebP support in iOS 14, Apple is bringing WebM support to iOS 15

Google had introduced WebM audio codec more than 10 years ago as a royalty-free alternative to other file formats which required licensing. WebM Audio supports Vorbis and Opus audio codecs.

With its introduction in iOS 15, Safari will be able to support the audio codec on various other websites. The use of the codec will also allow third-party developers to add support to their apps. It is likely that Apple will also add WebM audio support to Safari on Mac soon, however, the company has not been consistent with feature support across its platforms. Safari on Mac supports WebM video since macOS Big Sur 11.3 update, however iOS 14 and iPadOS 14 still do not support the video format. However, Apple added support for VP9 video in Safari which allows users to playback 4K HDR YouTube videos on iPhone and iPad.

Since iOS 15 is currently in beta, Apple could change its plans and not ship WebM audio as it is still an experimental feature in the beta builds. We will know for sure once iOS 15 releases this fall to all users.

Check out our detailed coverage of iOS 15 features below:

  • iOS 15 will allow AirPods to be added to Find My Network, allowing them to be located via Bluetooth
  • Focus and new notifications features in iOS 15 and macOS Monterey
  • Messages in iOS 15: Shared with You, better integration with other Apple apps and more
  • FaceTime in iOS 15: Spatial Audio, SharePlay, cross platform calls and more
  • iOS 15 features WPA3 security for hotspot connections
  • Here is how Siri works offline in iOS 15
  • What is iCloud+ Private Relay in iOS 15 and macOS Monterey, and how does it work?
  • iOS 15 allows users to update to beta release when restoring device from iCloud backups
  • iOS 15 and iPadOS 15 allow developers to access more of a device’s RAM
  • How to make a FaceTime call to Android users on iOS 15
  • iOS 15 and macOS Monterey get password authenticator for two-factor authentication

Share this:

' src=

Imran Hussain

Technology enthusiast, Internet addict, photography fan, movie buff, music aficionado.

  • Follow me on Facebook
  • Follow me on Google+
  • Send me an email!

You May Also Like

iOS 17.4.1

iOS 17.4.1 and iPadOS 17.4.1 released with bug fixes and security improvements

iPad Pro

No iPad announcement planned for March 26 – Mark Gurman

Apple-MacBook-Air

YouTuber reveals performance drop in M3 MacBook Air’s clamshell mode

  • Pingback: iOS 15 will allow users to opt-out of Night mode on their iPhones
  • Pingback: Grammarly extension is now available in Safari in iPadOS 15

Leave a comment Cancel reply

  • Create a Menu in Menus and assign it as Hidden Menu in Theme Location

IMAGES

  1. Apple adds two new features to iOS 15 Safari, supports WebM, and tab

    does safari support webm

  2. iOS 15 Safari is getting support for WebM audio

    does safari support webm

  3. MacOS Big Sur 11.3 Beta 2 Brings WebM Playback Support to Safari

    does safari support webm

  4. Apple adds WebM Web Audio support to Safari in latest iOS 15 beta

    does safari support webm

  5. Apple adds WebM video playback support to Safari with macOS Big Sur 11

    does safari support webm

  6. Apple's Safari 14 Now Supports Google's WebP Images

    does safari support webm

VIDEO

  1. Tutorial: Video transparency for web (MOV to WEBM, HEVC)

  2. 2021 How to Add WEMB Support to Premiere Pro CC & Media Encoder

  3. Running Safari 16 on Windows is EASY!!!

  4. iOS 15: How to Install Web Extensions in the Safari Browser on your iPhone

  5. HTML5 Video tag not working in Safari, iPhone, and iPad,

  6. How to Customize Safari Browser like Never Before || Enable Download Manager || iOS 9.3.5 Supported

COMMENTS

  1. iOS Now Supports Webm Playback Natively? : r/ios

    Now it seems that chrome & safari can play webms without any additional application. Yes, iOS 15 / macOS Big Sur added WebM capabilities to Safari, as well as a decoder for the VP9 video codec. doesn't work on my iphone 13 pro max. Edit: It's because I set "Request Desktop Website" to all websites. Turned that off and now I have webms.

  2. Safari for Mac to Support WebM Video Playback 11 Years ...

    Safari features support for WebM video playback in the second beta of macOS Big Sur 11.3 Beta, indicating that Apple's browser will finally support the format after failing to do so for almost 11 ...

  3. Apple adds WebM video playback support to Safari with macOS ...

    Although nearly all current web browsers support WebP video, Apple has never added WebP support to Safari. Back in 2010, Steve Jobs argued that the WebM format was "a mess" and that Apple had ...

  4. WebM video format

    KaiOS Browser. 1 Older browser versions did not support all codecs. 2 Older Edge versions did not support progressive sources. 3 Can be enabled in Internet Explorer and Safari for MacOS by manually installing the codecs in the operating system. 4 Supports VP8 codec used in WebRTC. 5 Supports VP9 codec used in WebRTC (off by default.)

  5. Web video codec guide

    Note however that Safari support for WebM and VP9 was only introduced in version 14.1, so if you choose to use VP9, consider offering a fallback format such as AVC or HEVC for iPhone, iPad, and Mac users. VP9 is a good choice if you are able to use a WebM container (and can provide fallback video when needed).

  6. Apple adding WebM audio codec support to Safari with iOS 15

    The company has finally added support for WebP images to Safari with iOS 14 and macOS Big Sur. Another update to Safari 14 on macOS also added support for the WebM video codec , but this was never ...

  7. WebM video support has been added in macOS Big Sur 11.3 beta 2

    WebM files will only play on desktop Safari when running the macOS 11.3 beta 2, and does not work on mobile Safari as of yet. The 8-Bit reports that WebM is a niche video codec that isn't widely ...

  8. Apple adds WebM Web Audio support to Safari in latest iOS 15 beta

    As it relates to Safari, WebM Web Audio provides support for the Vorbis and Opus audio codecs. Code uncovered by 9to5Mac reveals the WebM audio codec should be enabled by default going forward, ...

  9. Safari is getting support for WebM video playback

    Support for the WebM format in Safari for Mac has been spotted in the second beta of macOS Big Sur 11.3, which was released for developer testing yesterday. Apple should release the upcoming update publicly by the spring, allowing Mac owners to enjoy WebM videos in the Safari browser for the first time without using specialized media players. ...

  10. Safari picks up WebM support in the current macOS Big Sur 11.3 beta

    Google first launched WebM back in 2010 but Safari is only just jumping on board. There's no telling why Apple decided that 2021 is the year to add support for something that's been around for so long. The move does follow last year's addition of the WebP format, however - the image-based version of WebM.

  11. WebM Format: Basic Facts, Compatibility, and WebM vs. MP4

    For example, Apple's ecosystem, including the Safari browser, iPhones, and iPads, does not support WebM playback. Royalties: While both WebM and MP4 offer high-quality streaming, WebM (VP8) is royalty free.

  12. New WebKit Features in Safari 14.1

    WebKit added improved support for WebM media. With Safari 14, WebKit added support for WebM via MSE on iPadOS and macOS. Now, WebKit on macOS supports WebM files containing VP8 or VP9 video tracks and Vorbis audio tracks. Developers can now offer WebM content to users, though users will enjoy the best quality and power efficiency with h.264 or ...

  13. Delivering Video Content for Safari

    In Quartz Debug, choose Tools > Show Detached Regions. This tool places a color overlay on the desktop. Red represents normal power usage (where everything is composited), and no overlay represents low-power usage for video. If the full-screen video display is using low-power mode, the red color overlay disappears.

  14. Apple is adding support for the WebM audio codec for Safari on ...

    As spotted by 9to5Mac, the latest beta of iOS 15 has added support for the WebM audio codec in the Safari app. The codec, which has already been supported in Safari on macOS Big Sur, has been missing support for Safari on the iPhone. iOS 15 appears to be the time to line up that experience. According to the report, Apple had hesitated to adopt ...

  15. WebKit Features in Safari 17.4

    WebKit for Safari 17.4 adds support for several audio and video codecs. First, WebKit for Safari 17.4 on iOS, iPadOS and in visionOS adds support for WebM. While the WebM container (with both the VP8 and VP9 video codecs) has been fully supported on macOS since Safari 14.1, support on iOS and iPadOS was limited to VP8 in WebRTC. Now, WebM is ...

  16. Safari finally supports WebM video playback on macOS Big Sur 11.3 Beta 2

    For a long time now, Apple didn't offer WebM playback on macOS and iOS, leaving users unable to view videos in Google's WebM format natively. However, starting macOS Big Sur 11.3 Beta 2, WebM seems to be supported in Safari on the Mac. iOS still doesn't support it, though. WebM is a popular video format used on the web as a royalty-free alternative to the H.264 codec used in the MP4 ...

  17. [SOLVED] Play .webm video on safari

    Safari hasn't fully implemented Webm support yet, so not much you can do until Apple adds that in place. There used to be a number of plug-ins for desktop Safari that enabled Webm playback but support for plug-ins has been dropped. For the moment if you would like to play a transparent video in Playcanvas you could use some form of chromakey ...

  18. javascript

    Browsers will use the first supported source, and Safari does support .webm containers. Since Chrome et al do not support .mov (Quicktime) containers, you can instead invert the order, showing the .mov option first in the list. Chrome will skip over it and use the .webm file, and Safari will happily use the .mov version.

  19. video tag not playing a video/webm file in Safari

    Safari does not support WebM, so you'll need to provide additional formats. - jrrdnx. Aug 11, 2017 at 11:54. ... WebM video format does not appear to be currently supported by Safari: ... I cant play mp4 video in Safari, so do I need to convert blob after we record the video the format you mentioned mp4, ...

  20. How to get iOS Safari to stream webm?

    1 Answer. iOS Safari doesn't support webm video. strangely, webm audio (but not video) support was added in iOS15, so one can theorize that Apple is planning video support in a future release, but that's just speculation. (i guess one could try to send Apple an email and ask them, i haven't tried, because i doubt they would actually answer ...

  21. Safari 15.3 (Desktop) and WebM inline autoplay video playback Issues

    CanIuse claims that Safari 15. support WebM videos in Version 15 since MacOS 11.3. ... Safari does not play HTML 5 video (IE 9, Firefox and Chrome all do) 1 HTML5 Video Playback issue in Safari. 42 HTML5 Video Autoplay not working correctly. 245 Video auto play is not working in Safari and Chrome desktop browser ...

  22. ios

    WebM and Opus in Safari. Using patent-free audio and video codecs on the web has always been problematic due to poor support in Safari. According to the Safari 15 release notes, though, this might be starting to change. WebM video is apparently now supported in MSE on iPadOS 15, and the Opus audio codec is supported in WebM containers.

  23. iOS 15 Safari is getting support for WebM audio

    WebM Audio supports Vorbis and Opus audio codecs. With its introduction in iOS 15, Safari will be able to support the audio codec on various other websites. The use of the codec will also allow ...

  24. Webm video format doesn't work on safari (ios)

    So, what we can do is to convert webm file into a file foramt like mp4 which is supported by android as well as ios. Try to use server side to convert webm video into mp4 and then play the converted mp4 video on client side. Use fluent-ffmpeg or that kind of library to convert webm to mp4. Here is a sample code in node.js.