I'm still new to JavaScript and I am try to achieve a double click feature.
The visitor double click on the video and redirect to the page with a unique Id attach to the url but i can't get it working. Here's my code
This only redirect for the first video but not working for other Any help is appreciated
<video id="doubleTap" autoplay muted>
<input id="id" value="1">
<source src="/ver/videos/2024.mp4" type="video/mp4">
</video>
<video id="doubleTap" autoplay muted>
<input id="id" value="2">
<source src="/ver/videos/2023.mp4" type="video/mp4">
</video>
<video id="doubleTap" autoplay muted>
<input id="id" value="3">
<source src="/ver/videos/2022.mp4" type="video/mp4">
</video>
<script type="text/javascript">
$("#doubleTap").doubleTap(function() {
var id = document.getElementById("id").value;
location.href='h.php?id=' id;
});
</script>
CodePudding user response:
You should use unique id's for your element. Better use CSS classes. Nevertheless, I re-wrote your snippet to be a more valid HTML. How about this:
$(".doubleTap").dblclick(function() {
var id = $(this).attr("data-id")
console.log("id is " id)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video autoplay muted data-id="1">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
</video>
<video autoplay muted data-id="2">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
</video>
<video autoplay muted data-id="3">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
</video>