HTML5 Video Element Not Displaying Controls in Safari 16 with Custom Attributes
I tried several approaches but none seem to work. I'm relatively new to this, so bear with me. I'm integrating two systems and I'm updating my dependencies and Hey everyone, I'm running into an issue that's driving me crazy... I'm trying to use the HTML5 `<video>` element to display a video on my webpage, but I'm having trouble with the controls not appearing in Safari 16. I’ve added custom attributes for accessibility, like `aria-label` and `role`, but it seems these are interfering with the video controls. Here’s the code snippet I’m using: ```html <video id="myVideo" width="600" height="400" controls aria-label="Sample Video" role="video" preload="metadata"> <source src="sample.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ``` I’ve tested the same code in Chrome and Firefox, and the controls show up as expected, but in Safari, they are completely missing. I’ve also tried setting the `controls` attribute in various ways (like adding it programmatically) and double-checked that my video file is accessible and not corrupted. When I inspect the video element in Safari, it seems to recognize the `controls` attribute, but they simply don’t appear. I even checked the console for any JavaScript errors or warnings related to the video element, but there’s nothing. Has anyone else experienced this scenario or found a workaround for getting the video controls to show up properly in Safari 16? Any help or suggestions would be greatly appreciated! For context: I'm using Html on Ubuntu. Is there a better approach? Am I missing something obvious? The stack includes Html and several other technologies. I'd really appreciate any guidance on this. Any help would be greatly appreciated! Could someone point me to the right documentation?