2012-12-17 3 views
0
<!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> 

나는 대화 형 gif 이미지를 만듭니다. 특정 영역을 클릭하면 비디오를 재생하는 페이지로 이동하고, 다른 비디오로 전환 할 수 있습니다. 대화 형지도와 같은 페이지. 조정 된 영역을 클릭하면 액세스 할 수있는 별도의 페이지에 표시하고 싶습니다.별도의 페이지에 비디오가 필요합니다.

답변

0

href를 mp4 파일 대신 다른 페이지로 변경하고 재생할 mp4를 매개 변수로 추가합니다. 다른 페이지에서 매개 변수를 읽고 비디오를 표시하십시오. 예를 들어

: 당신은 대신 PHP 파일의 일반 HTML 파일을 사용하고 URL에서 매개 변수를 읽을 자바 스크립트 할 수

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

.

관련 문제