我正在使用 javascript 和 html5 制作交互式世界地图 gif，这是迄今为止我的代码:
<!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 参数，例如交换视频等.我有代码可以在单击链接后与视频进行交换，并且我有代码可以进行坐标处理，但我只是不知道如何将它们组合在一起。
非常感谢您的帮助，但希望使用我已经完成的方法保持 super 简单并且有点理解(如果它有效)这是我的 super 简单的代码
<!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>
map 在页面上打开，但可点击区域似乎不存在？
更新: 所以坐标还是不行，没有区域可以点击 视频也出现在与我的 map 相同的页面上，我希望它们出现在单独的页面上，有什么帮助吗？视频也无法识别，它说“找不到视频，可能已从服务器中删除。http 404” 世界地图
单击 map 上的可点击区域以获取更多信息。
<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>
最佳答案
请再看一下我的代码:)
好吧， super 简单。
您可以将 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 标签 <--------
<script>
function playVideo() {
var myVideo=document.getElementById("video1");
myVideo.play();
}
</script>
如果你想要它 super 简单，这非常简单，而且我还没有使用任何 jquery 或新东西。让我知道进展如何:)
关于javascript - 链接到视频的交互式 gif，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13915206/