HTML5上的互动视频

Question

我正在尝试在视频中以响应方式插入一些交互式按钮。 但是我没有成功。

屏幕1

屏幕2

此示例屏幕显示完成后的视频。

想法是将按钮放在此菜单的图标上，但是我已经尝试了几种方法，但没有成功。 我无法在视频的确切位置上放置按钮位置。

不幸的是，不可能在video标签内添加其他元素。

这是我的代码，有什么建议吗？

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

如果菜单上的图像是图像，则可以使用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>

更新：为了将其用于您的答案，我将建议以下步骤：

这个想法是使用每个元素与图像的比例。

1）我建议使用Microsoft画图打开菜单图像。

--->选择“视图”选项卡，然后启用“规则”和“状态栏”。

--->存储所需的顶点。 您只需将光标移动到所需位置即可获得像素坐标，像素坐标将显示在软件的左下方

--->选择“主页”选项卡，然后单击“调整大小”按钮。

--->选中“像素”单选按钮以查看原始图像的宽度和高度。

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;

具有比率之后，您可以像这样使用它：

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;
}

您可以对每个顶点进行此操作。 您还可以使用此功能并将其添加到使用事件侦听器调整窗口大小时。

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