0

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
8
Views
2 Years
Discussion Span
Last Post by veedeoo
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.