Menu
my current project is a html website that contains a dropdown menu (javascript/jquery) and a html5 videoplayer (video-tag only).
When clicking on a menu entry, the dropdown submenu overlays the videoplayer container (z-index of dropdown is higher than of videoplayer). In Safari and Chrome the links of the submenu entries work properly on click, but in Mobile Safari on iPad they do not react. To reduce the problem, my minimal example includes a link element that overlays a video element.
<head>
<style>
a {
position: absolute;
display: block;
z-index: 1;
}
video {
position: absolute;
z-index: 0;
}
</style>
</head>
<body >
<a href="http://www.google.de">click me</a>
<video src="" width="640" height="360" preload="none" controls="controls"></video>
</body>
Touching the link element on an iPad does not work. Any advice appreciated how to make the link clickable on iPad!
779
Safari supports the <video> and <audio> media elements on iOS 3.0 and later and in Safari 3.1 and later on the desktop (Mac OS X and Windows).
There are 3 things to check: make sure your video files are properly encoded for web delivery. make sure the server where the videos are hosted is properly configured for web delivery. make sure your others scripts on the page do not interfere with video playback.
<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document.
This is not allowed for security reasons. Open the html file locally to view the video or upload the video to the server. Chrome will give this error: Not allowed to load local resource.
explanation: the html5 video player absorbs the touch events if controls are enabled.
background: the menu overlayed the video container when dropped down, but the menu item links were not clickable.
solution: as a workaround i temporarily disable the controls by removing the html video attribute "controls" with javascript when the menu is dropped down, and re-add the "controls" attribute when the menu is dropped up again.
101
Your explanation & solution are correct. For someone interested in some code to disable the controls on the menu dropdown:
$('#menu-dropdown').click(function() {
if ($("video:visible")) {
if ($("video").prop("controls")) {
$("video").prop("controls", false);
} else {
$("video").prop("controls", true)
}
}
})
Hope this helps!
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
