互動GIF鏈接到視頻

我在做一個互動世界地圖GIF，使用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參數，例如交換視頻等。我有代碼可以與視頻進行交換鏈接被點擊，我有代碼來做座標，我只是不知道如何把它放在一起。

非常感謝您的幫助，但想用我所做的方法來保持它超級簡單和種類的理解（如果它的工作原理）這裏是我的超級簡單的代碼

<!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>

來源

2012-12-17 Sophie Williams

看我的代碼再次請:)

好超級簡單。

您可以將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>

如果你想超級簡單，這是超級簡單，我還沒有使用任何jQuery或新的東西。讓我知道它是如何:)

來源

2012-12-17 18:23:10 Daniel

你需要做的是管理視頻可以在不同的狀態，可以說如果video1正在播放，並且你按了video2鏈接。視頻1應停止播放，視頻2應播放。但它的你的網站，即時通訊現在只是猜測:)通常我不是這個網站的粉絲，但如果你想它超級簡單：http://www.w3schools.com/html/html5_video.asp試試看這裏。 – Daniel

你需要一個視頻標籤：

<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 
     ... 
    }); 
});

來源

2012-12-17 13:57:46 Sam

我不是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>

來源

2012-12-17 17:45:06 Daniel

互動GIF鏈接到視頻

回答

相關問題