2012-12-17 56 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作爲參數。讓另一頁讀取參數並顯示視頻。

例如:

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

你可以代替一個PHP文件使用一個普通的HTML文件,然後讓JavaScript的閱讀從URL參數。

相關問題