gif interactif reliant à la vidéo

Je fais une carte du monde interactive gif, en utilisant javascript et html5, voici mon code jusqu'à présent:gif interactif reliant à la vidéo

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

mais maintenant je suis bloqué, tout d'abord je veux savoir comment pour relier une vidéo dans les balises vidéo html5, sur le clic des coordonnées liées, et aussi comment définir les paramètres javascript à l'intérieur de celui-ci, comme l'échange de vidéos, etc. J'ai le code pour pouvoir faire le swap avec les vidéos une fois le lien est cliqué, et j'ai le code pour faire les coordonnées, je ne sais pas comment le mettre ensemble.

Merci beaucoup pour vous aider, mais veulent garder super simple en utilisant la méthode que je l'ai fait et le type de comprendre (si ça marche) ici est mon code super simple

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

la carte ouvre sur la page, mais la zone cliquable ne semble pas être là?

MISE À JOUR: Ainsi, les coordonnées ne fonctionnent toujours pas, il n'y a pas de zone de cliquer également la vidéo de apparaissent sur la même page que ma carte, je les comme sur une page séparée, de l'aide? également la vidéo de ne sont pas reconnus, il dit « vidéo ne peut être trouvé, peut-être été supprimée du serveur. http 404 » Planisphère

Cliquez sur une zone cliquable de la carte pour plus d'informations.

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

Source

2012-12-17 Sophie Williams

Regardez mon code à nouveau s'il vous plaît :)

Ok super simple.

Vous pouvez placer une action Onclick sur votre zone.

Comme ceci.

<area .... onclick="playVideo()">

Et pour votre balise vidéo 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>

Et Javascript pour faire des choses pour vous: Cette partie est pour la balise HTML normale HEAD < ------ -

<script> 
function playVideo() { 
    var myVideo=document.getElementById("video1"); 
    myVideo.play(); 
} 
</script>

Si vous voulez c'est super facile super facile, et je havent utilisé un jquery, ou de nouvelles choses.Faites-moi savoir comment ça se passe :)

Source

2012-12-17 18:23:10 Daniel

Ce que vous devez faire est de gérer les différents états dans lesquels les vidéos peuvent être, disons si video1 est en cours de lecture, et vous appuyez sur video2 link. Puis la vidéo 1 devrait s'arrêter et la vidéo 2 devrait jouer. Mais c'est votre site, im juste deviner maintenant :) Habituellement je ne suis pas un fan de ce site, mais si vous le voulez super simple: http://www.w3schools.com/html/html5_video.asp essayez de regarder ici. – Daniel

Vous avez besoin d'une balise vidéo:

<video src="urlofvideo"></video>

Vous pouvez utiliser jQuery pour lier les événements de clic sur la carte d'image:

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

Source

2012-12-17 13:57:46 Sam

Je ne suis pas 100% sûr que je compris votre question, mais je vous ai fait ceci. C'est une carte avec des cordons, c'est sans l'ancienne méthode de la carte, mais c'est avec HTML, CSS et Jquery à la place.

Désolé si je suis totalement incompris, mais son mon shoot :)

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

Source

2012-12-17 17:45:06 Daniel

gif interactif reliant à la vidéo

Répondre

Questions connexes