Bug 306350
| Summary: | AX: Syncing currentTime of Audio and Video elements results in playback offset | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | sebastian.bayer |
| Component: | Media | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Major | CC: | andresg_22, eric.carlson, jer.noble, webkit-bug-importer |
| Priority: | P1 | Keywords: | InRadar |
| Version: | Safari 26 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 15 | ||
sebastian.bayer
The accessibility (a11y) plugin for the JavaScript library "MediaElement" implements audio descriptions for videos. It does this by creating an additional <audio> element on the page and synchronizing its currentTime with the video during the video’s native "timeupdate" event. This approach works correctly in Chrome and Firefox, but in Safari it causes choppy or interrupted audio playback.
I know a WebVTT-based synthesized audio description would be a better solution, but OS support is disabled by default for this, see https://bugs.webkit.org/show_bug.cgi?id=266724 and support for this <track kind="descriptions"> in other browsers seems non-existent: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track#browser_compatibility
Here's an example for my use-case (Safari): https://www.bmas.de/SharedDocs/Videos/DE/Ministerium/Arbeiten-im-BMAS/bmas-was-arbeit-fuer-uns-ist.html
Play the video and activate the "AD" Button in the video controls for "choppy" audio description.
I boiled this down and it has nothing to do with MediaElement itself. Instead there seem to be two separate Webkit Bugs here:
1. Whenever I set the currentTime of an <audio> in Safari, even when I'm just seeking a few milliseconds, I hear no audio for a moment until it resumes playing. In Chrome and Firefox the playback is much more consistent.
2. When I set the currentTime of an <audio> element, it is always a bit offset, not at the exact time I want to set it. Possibly a duplicate of https://bugs.webkit.org/show_bug.cgi?id=240568
In my use-case, both problems together result in a "choppy" playback because Safari keeps syncing the video and audio all the time due to my JS syncing logic. Here's my boiled-down example that reproduces the problem. Play the video, press the "SYNC" button and check in Safari console that the new currentTime is always a bit offset, resulting in the "choppy" audio playback.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Safari Video Sync PoC</title>
<style type="text/css">
video, audio {
display: block;
}
</style>
</head>
<body>
<video id="video1" width="750" height="421" controls preload="auto" playsinline poster="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/2e7945298d864445b79c120be1eeb87c">
<source src="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/0e7a69b999dc4dad8b632d323909d1a1" type="video/mp4" />
</video>
<audio id="audio1" controls preload="auto">
<source src="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/72091bbef9494cc6a8da57179d69099c" type="audio/mp3" />
</audio>
<button id="sync" style="margin: 20px;padding: 20px;">SYNC</button>
<script>
const video = document.getElementById('video1');
const audio = document.getElementById('audio1');
const sync = document.getElementById('sync');
video.addEventListener('playing', () => {
video.volume = 0;
audio.play();
});
video.addEventListener('pause', () => {
audio.pause();
});
video.addEventListener('seeked', () => {
audio.currentTime = video.currentTime;
})
video.addEventListener('timeupdate', () => {
const timeDifference = Math.abs(video.currentTime - audio.currentTime);
console.log(timeDifference);
if (timeDifference > 0.3) {
audio.currentTime = video.currentTime;
}
});
sync.addEventListener('click', () => {
audio.currentTime = video.currentTime;
});
</script>
</body>
</html>
mediaelement a11y Plugin
Docs:
https://github.com/mediaelement/mediaelement-plugins/blob/master/docs/a11y.md
Source:
https://github.com/mediaelement/mediaelement-plugins/blob/master/src/a11y/a11y.js
Tested in Safari Version 26.1
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/169014726>