👀 Views: 2 💬 Answers: 1 📅 Created: 2025-06-10

html video safari HTML

Does anyone know how to I'm working with an scenario with the `<video>` element where the 'ended' event is not firing properly in Safari (version 15). I have implemented a simple video player that should display a message when the playback ends, but it seems to unexpected result in Safari while it works perfectly in Chrome and Firefox. Here's the code snippet I'm using: ```html <video id="myVideo" width="600" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div id="message" style="display: none;">Video has ended!</div> <script> const video = document.getElementById('myVideo'); const message = document.getElementById('message'); video.addEventListener('ended', function () { message.style.display = 'block'; }); </script> ``` I've checked that the video file is correctly loaded in Safari and that all the controls are working. I also inspected the console for any behavior messages but didn't find any relevant output. To troubleshoot, I added a simple `console.log()` to the event listener, which also doesn’t trigger when the video ends in Safari, indicating that the event itself is not firing. As a workaround, I tried using a `setInterval` to check the video's `currentTime` property, but that feels hacky and could lead to performance optimization. Is there a known scenario with Safari regarding the `ended` event, or could it be related to how the video file is encoded? Any insights or suggestions would be greatly appreciated!