我试图在视频上插入一些互动按钮，反应灵敏。但是我没有成功。
此示例屏幕显示完成后的视频。
这个想法是将按钮放在这个菜单的图标上，但是我已经尝试了几种方法而没有成功。我无法使按钮位于视频的确切位置。
不幸的是，无法在视频标签中添加其他元素。
这是我的代码，有什么建议吗？
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;
}
答案 0 :(得分：0)
如果你的菜单是图片，你可以使用html5的<map> tag作为w3schools的this example，在每个区域放置onclick属性并进行编码。检查{{3} }：
的代码
<!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）我建议用微软涂料打开菜单图像。
---＆GT;选择＆＃34;视图＆＃34;选项卡并启用＆＃34;标尺＆＃34;和＆＃34;状态栏＆＃34;。
---＆GT;存储您需要的顶点。您只需将光标移动到所需的位置即可获得它们，像素坐标将显示在软件的左下角
---＆gt;选择＆＃34; home＆＃34;选项卡，然后单击＆＃34;调整大小＆＃34;按钮。
---＆gt;检查＆＃34;像素＆＃34;单选按钮，用于查看原始图像的宽度和高度。
2）最后为了在图像中表达一个任意点，简单如下:(假设一个点的坐标是83,100 [宽度，高度]，图像尺寸是800x500 [宽度x高度]）
//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;
}
您可以为每个顶点执行此操作。此外，您可以使用此功能，并在窗口使用事件侦听器调整大小时将其添加到该项中。