Hydration writes values that the server already rendered, which restarts playing videos #71872

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

During hydration, Angular writes values that the server already rendered, and the browser reacts to each write.

A video with autoplay starts playing as soon as the browser parses the server HTML. When Angular hydrates the page, the video jumps back to the start. All of these templates have the problem:

<video src="clip.webm" autoplay muted></video>
<video [src]="clip" autoplay muted></video>
<video [attr.src]="clip" autoplay muted></video>

There are two causes:

• elementLikeStartShared() calls setupStaticAttributes() on every element, including DOM nodes reused from the server. It writes each static attribute, the static class, and the static style again.
• On the first update after hydration, attribute and property bindings write their values, because they have no previous value to compare with.

In Chrome, writing the same value to src restarts the load algorithm of a media element. Writing the same src to an <iframe> loads a new document. I checked the <iframe> case in plain JavaScript, not in an Angular app.

The writes also cost time. On a table with 300 rows of static classes, ARIA attributes, and SVG icons, hydration makes 12,961 attribute writes, and 12,871 of them keep the same value. After hydration, Chrome restyles 1,247 elements.

Please provide a link to a minimal reproduction of the bug

https://github.com/jsaguet/ngimg-hydration-repro

To see the video restart, run npm ci, npm run build:variants, and npm run serve:stock, and open http://localhost:4000/media?bootAfterLoad&bootDelay=3000. The README has screenshots and measurements.

Please provide the exception or error you saw

No exception. The video restarts during hydration.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI       : 22.2.6
Angular           : 22.2.5
Node.js           : 26.11.1
Package Manager   : npm 11.20.0
Chrome            : 156

Anything else?

A draft pull request follows with one possible fix. It writes a value during hydration only if the DOM has a different value. The problem stands if you prefer another approach.

A fix affects event handlers that run today only because of these writes. For example, a (canplay) handler on a video that was ready before hydration runs once today, because the video restarts. It wouldn't run after a fix, because event replay doesn't cover canplay.