Interactive video on HTML5

Question

I'm trying to insert some interactive buttons on a video, responsive way. However I am not succeeding.

This sample screens shows the video after finish.

The idea is to put the buttons over the icons of this menu, however I already tried several ways and no success. Im not being able to make the buttons positions on the exact position of the video.

And unfortunately it is not possible to add other elements within the video tag.

Here is my code, any suggestions?

html:

<body>

<video id="video" autoplay="true" width="100%" height="100%" class="video" onclick="onVideoClick()">
  <source id="video_src" src="videos/Intro.mp4" type="video/mp4">
</video>

<script>
  // Listener quando o video terminal
  document.getElementById('video').addEventListener('ended', function(e) {
    onVideoFinish();
  });
</script>

css:

.video{
  margin: auto;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -5;
}

Answer 1

If what you have as a menu is an image you could use the <map> tag of html5 as this example of w3schools , place onclick attributes on each area and do your coding.. Check this jsfiddle : Code

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="javascript:" onclick = "alert('you clicked me the SUN')">
<area shape="circle" coords="90,58,3" alt="Mercury"  href="javascript:" onclick = "alert('you clicked me the MERCUR')">
<area shape="circle" coords="124,58,8" alt="Venus"  href="javascript:" onclick = "alert('you clicked me the VENUS')">
</map>

</body>
</html>

UPDATE: In order to use it for your answer i would propose the following steps:

The idea is to use the ratio of each element in relation with the image.

1)I would suggest to open the image of the menu with microsoft paint.

---> select the "view" tab and enable the "Rulers" and the "Status bar".

---> store the vertexes you need. You can get them simply by moving the cursor at the desirable point and the pixel coords will show at the bottom-left of the software

--->select the "home" tab and click at the "Resize" button.

--->check the "Pixels" radio button to view the width and the height of the original image.

2) Finally in order to express an arbitary point inside the image simple follow:(lets suppose that the coordinates of a point are 83,100 [width,height] and the image size is 800x500 [width x height])

//define the point coordinates
var vertex_X = 83;
var vertex_Y = 100;

//define the original image size
var imageWidth = 800;
var imageHeight = 500; 

//calculate the ratio of the point relative to the image
var vertexRatio_X = vertexCoords_X / imageWidth ;
var vertexRatio_Y = vertexCoords_Y / imageHeight;

after having the ratio you can use it like this:

function defineActiveAreas(){
    var videoWidth = document.getElementById("video").clientWidth;
    var videoHeight = document.getElementById("video").clientHeight;

    var pointNew_X = vertexRatio_X * videoWidth;
    var pointNew_Y = vertexRatio_Y * videoHeight;
}

You can do this for every vertex point. Also you can use this function and add it to when the window resizes with an event listener.

Interactive video on HTML5

Question

1 answers

solution1
0 2016-02-10 15:25:45

Interactive video on HTML5

Question

1 answers

solution1 0 2016-02-10 15:25:45

solution1
0 2016-02-10 15:25:45