Javascript 需要在单独的网页视频世界地图_Javascript_Html_Html5 Video

Javascript 需要在单独的网页视频世界地图

javascript html

Javascript 需要在单独的网页视频世界地图,javascript,html,html5-video,Javascript,Html,Html5 Video,点击地图上的可点击区域了解更多信息我会将href改为另一个页面，而不是mp4文件，并添加要播放的mp4作为参数。让另一页读取参数并显示视频例如： <!DOCTYPE html> <html> <head> <title>World Map</title> <body> <p>Click on a clickable area of the map for more info.</p&g

点击地图上的可点击区域了解更多信息

我会将href改为另一个页面，而不是mp4文件，并添加要播放的mp4作为参数。让另一页读取参数并显示视频

例如：

<!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="ukanthem.mp4" alt="anthem" 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>

您可以使用普通html文件代替php文件，并让javascript从URL读取参数

<area shape="rect" coords="265,49,279,64" href="playVideo.php?video=ukanthem.mp4" alt="anthem" target="_blank">