1

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

3 に答える 3

0

私のコードをもう一度見てください:)

とてもシンプルです。

エリア タグに 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-17T18:23:10.940 に答える
0

私はあなたの質問を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-17T17:45:06.770 に答える
0

動画タグが必要です:

<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-17T13:57:46.200 に答える