Question

我正在制作一个互动的世界地图gif，使用javascript和html5，到目前为止这是我的代码：

<!DOCTYPE html>
<html> 
<head>
    <title>World Map</title>
    <body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="265,49,279,64" href="

但是现在我卡住了，首先我想知道如何链接到html5视频标签中的视频，点击链接的坐标，以及如何在其中设置javascript参数，例如交换视频等一旦链接被点击，我就有了能够与视频交换的代码，并且我有代码来做坐标，我只是不知道如何把它放在一起。

非常感谢你的帮助，但是想要使用我已经完成的方法保持它非常简单并且有点理解（如果它有效）这里是我的超级简单代码

<!DOCTYPE html>
<html> 
<head>
    <title>World Map</title>
    <body>
<p>Click on a clickable area of the map for more info.</p>
<img src ="worldmap.gif" width="576" height="307" alt="World Map" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="265,49,279,64" <video src="ukanthem.mp4"></video>
</map>

</body>
</head>
</html>

地图会在页面上打开，但可点击区域似乎不在那里？

更新：所以坐标仍然不起作用，没有可点击的区域该视频与我的地图显示在同一页面上，我希望它们在单独的页面上，任何帮助？该视频也无法识别，它说“视频无法找到，可能已从服务器中删除。”http 404“ 世界地图

点击地图的可点击区域以获取更多信息。

<map name="worldmap">

<area shape="rect" coords="265,49,279,64" onclick="playVideo()"> 
<video id="video1" class="true" autoplay controls width="420">
<source src="ukanthem.mp4" type="video/mp4">
<source src="ukanthem.mp4" type="video/ogg">
</video>
<video id="video2" class=flase" width="420" controls>
<source src="beef.mp4">
</video>
<button id="hideButton" onclick="swap();">Switch</button>


<script>
var flag=true;
function swap() {
var myVideo1=document.getElementById("Video1");
var myVideo2=document.getElementById("video2");
flag=!flag;
video1.setAttribute("class", flag);
video2.setAttribute("class", !flag);
if (flag) {
    video2.pause();
    video1.play();
} else {
    video1.pause();
    video2.play();
}
}
</script>


</map>

</body>
</head>
</html>

Answer 1

您需要一个视频标签：

<video src="urlofvideo"></video>

您可以使用jQuery绑定图像映射上的点击事件：

jQuery(document).ready(function($) {
   $('area').bind('click', function(event) {
        event.preventDefault();

       //url of video
        var url = this.href;
       //Here your code to start the video 
       ...
   });
});

Answer 2

我不是100％肯定我理解你的问题，但我让你这样。它是一个带有绳子的地图，这是没有旧的地图方法，但它与HTML，CSS和Jquery相反。

对不起，如果我完全误解了，但是我的拍摄：）

<style type="text/css">
  .map_image { display: block; width: 1280px; height: 960px;  background-repeat: no-repeat; }
  .map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
  .map_image #paris { width: 150px; height: 80px; top: 11px; left: 11px; border: 1px solid red; }
  .map_image #copenhagen { width: 150px; height: 80px; top: 40px; left: 177px; border: 1px solid yellow;}
</style>

 <div class="map_image" style="background-image: url('your_picture.jpg');">
   <a class="map_link" id="paris" title="google.com"></a>
   <a class="map_link" id="copenhagen" title=""></a>
 </div>

<script>
  $("#paris").click(function() {
    // play a video about paris
    alert("paris");
  });

  $("#copenhagen").click(function() {
    // play a video about paris
    alert("copenhagen");
  });
</script>

Answer 3

请再次查看我的代码：）

好的超级简单。

您可以将Onclick操作添加到区域标记。

喜欢这个。

<area .... onclick="playVideo()">

对于HTML 5视频代码......

<video id="video1" width="420">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

和Javascript为你做的事情：此部分用于正常的HEAD HTML标记＆lt; -------

<script>
function playVideo() {
  var myVideo=document.getElementById("video1"); 
  myVideo.play(); 
}
</script>

如果你想要它超级简单，这是非常容易的，我没有使用任何jquery，或新的东西。让我知道它是怎么回事:)）

交互式gif链接到视频

3 个答案: