文章/答案/技术大牛

发布

社区首页 >问答首页 >基于HTML5的交互式视频

问基于HTML5的交互式视频
EN

Stack Overflow用户

提问于 2016-02-10 15:05:22

回答 1查看 1.3K关注 0票数 1

我试图插入一些互动按钮在视频，响应方式。但是我没有成功。

屏幕1

屏幕2

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

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

不幸的是，不可能在视频标记中添加其他元素。

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

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

jquery

css

html

javascript

回答 1

Stack Overflow用户

发布于 2016-02-10 15:25:45

如果您所拥有的菜单是图像，您可以使用标签 of html5作为这个例子 of w3schools，在每个区域上单击属性并进行编码。检查这弹琴：代码

<!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打开菜单的图像。

->选择“查看”选项卡并启用“尺子”和“状态栏”。

您可以简单地将光标移动到所需的点，然后在软件的左下角显示像素和弦。

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

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

每个顶点都可以这样做。此外，您还可以使用此函数，并在窗口与事件侦听器重新调整大小时将其添加到。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35318697

复制

相似问题

问基于HTML5的交互式视频
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于HTML5的交互式视频EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于HTML5的交互式视频
EN