HTML5上的互动视频

Question

I'm trying to insert some interactive buttons on a video, responsive way. 我正在尝试在视频中以响应方式插入一些交互式按钮。 However I am not succeeding. 但是我没有成功。

Screen 1 屏幕1

Screen 2 屏幕2

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. 不幸的是，不可能在video标签内添加其他元素。

Here is my code, any suggestions? 这是我的代码，有什么建议吗？

html: 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: 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 如果菜单上的图像是图像，则可以使用html5的<map>标记作为w3schools的示例，在每个区域上放置onclick属性并进行编码。.检查此jsfiddle ：代码

<!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. 1）我建议使用Microsoft画图打开菜单图像。

---> 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]) 2）最后，为了表示图像中的任意点，请简单地遵循以下步骤：（假设点的坐标为83,100 [width，height]，图像大小为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. 您还可以使用此功能并将其添加到使用事件侦听器调整窗口大小时。

HTML5上的互动视频

问题描述

1 个解决方案

解决方案1
0 2016-02-10 15:25:45

HTML5上的互动视频

问题描述

1 个解决方案

解决方案1 0 2016-02-10 15:25:45

解决方案1
0 2016-02-10 15:25:45