I'm trying to create a hotspot in a <video> HTML 5 tag. I know that it's possible to do it in <img> elements. For some reason, it's not working for videos.
Here I have an example of my code:
<video ng-src="/some-path" type='video/mp4' autoplay loop usemap="#myArea" />
<map name="myArea">
<area shape="rect" coords="0, 0, 768, 1024" ng-click="onTouch()">
</map>
Do you know if it's possible?
Thanks! :)
I just changed my approach and solved the problem using this:
I've add a div in my code, with my onTouch() event:
<div class="overlay" ng-click="onTouch()" />
I used the follow CSS for the "overlay"class:
.overlay {
position: absolute;
top: 900px;
height: 90px;
left: 30px;
color: #FFF;
text-align: center;
font-size: 20px;
background-color: transparent;
width: 305px;
padding: 10px 0;
z-index: 2147483647;
}