Member Avatar for Nollyvenon

I intend to have w3html5.gif with clickable hotspots. I need to make the image clickable on different points. Point for Daily, Weekly.

currently my code is:

<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Thanks for your help.

  • 3 Contributors
  • 2 Replies
  • 180 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by veedeoo

Dani AI

Generated

A practical, future-proof way to get clickable hotspots on the poster is to build on ’s wrapper idea but use an SVG overlay instead of fixed, pixel-positioned divs. SVG scales with the video via its viewBox, so hotspot coordinates stay correct as the player resizes. That also keeps things keyboard- and screen-reader-friendly, and remains compatible with libraries like the one mentioned if you later need more features.

Example pattern (HTML + inline SVG overlay, responsive via viewBox):

<div style="position:relative; display:inline-block; width:640px;">
  <video id="myVideo" width="640" height="360" poster="/images/w3html5.gif" controls>
    ...
  </video>

  <svg class="hotspots" viewBox="0 0 640 360"
       style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;">
    <a href="/daily" aria-label="Daily" style="pointer-events:auto;">
      <rect x="50" y="40" width="120" height="60" fill="transparent"></rect>
    </a>
    <a href="/weekly" aria-label="Weekly" style="pointer-events:auto;">
      <circle cx="400" cy="120" r="30" fill="transparent"></circle>
    </a>
  </svg>
</div>

Keep the overlay visible only when the poster is shown and remove or hide it on play (so it does not block controls):

<script>
  var vid = document.getElementById('myVideo');
  var svg = document.querySelector('.hotspots');
  vid.addEventListener('play', function(){ svg.style.display = 'none'; });
  vid.addEventListener('pause', function(){ svg.style.display = 'block'; });
</script>

Troubleshooting and best practices: make interactive shapes keyboard-focusable (add tabindex="0" or use anchor elements), give each hotspot a clear aria-label, and enlarge touch targets for mobile. Ensure pointer-events:none on the SVG itself and pointer-events:auto only on the clickable shapes so controls remain clickable. If you only need a static poster (no native video interactivity) an HTML image + image map can work, but image maps do not attach to the poster attribute and are not as responsive as an SVG overlay.

Recommended Answers

All 2 Replies

Member Avatar for gabrielcastillo

Have you thought about wrapping your video in a div, then adding other elements with position absolute and placing in different spots of the main wrapper div. I haven't tested the code below, but this should give you an idea of what I talking about.

<style type="text/css">
    #video-wrapper {position:relative;}
    #pos1 {position:absolute; top:10px; left:10px; height:20px; width:20px;}
    #pos2 {position:absolute; top:10px; left:60px; height:20px; width:20px;}
    #pos3 {position:absolute; top:40px; left:120px; height:20px; width:20px;}

    .video-click a {display:block;}
    .video-click a {border:1px soild red;} //Demo, to show the box position.
</style>


<div id="video-wrapper">
    <video controls poster="/images/w3html5.gif">
        <source src="movie.mp4" type="video/mp4" />
        <source src="movie.ogg" type="video/ogg" />
        Your browser does not support the video tag.
    </video>
    <!-- Start Video Click Links -->
    <div id="pos1" class="video-click"><a href="https://www.daniweb.com/profiles/951687/Gabriel-Castillo" title="Gabriel"></a></div>
    <div id="pos2" class="video-click"><a href="https://www.daniweb.com/profiles/951687/Gabriel-Castillo" title="Gabriel"></a></div>
    <div id="pos3" class="video-click"><a href="https://www.daniweb.com/profiles/951687/Gabriel-Castillo" title="Gabriel"></a></div>
    <!-- End Video Click Links -->
</div>
Member Avatar for veedeoo

you can also try and look at video.js.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.