Clickable poster at different points after video play

[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.

[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>

[veedeoo]

you can also try and look at video.js.