0

適切なリンクをクリックするとモーダルウィンドウが開き、ビデオが再生される8つのビデオがあります。以下で作成したコードを使用すると非常にうまく機能しますが、JS コードを減らすためにこれを記述するより良い方法があるはずです。

ガイドは大歓迎です。- フォーラムにはあまり見つからず、この問題を解決するものは何もありません。(したがって、私のコードは機能しますが、非常に長いです)。- ありがとうございました。IE8 で動作しない*

リンク付きの HTML ページ

          <div class="caption"><?php echo tep_image(DIR_IMAGES.'media/video_atr_cm.jpg','CM Computer','','','');?>
            <div class="clearfix"></div>
            <h5><?php echo ANIMATED_MEDIA ?></h5>
            <h3>CM Computer</h3>
          </div>
          </a>
          <div class="thumbnail-pad"><a href="atr_chassis.html" class="btn btn_ pdb"><?php echo TEXT_BUTTON_READ_MORE?></a></div>
        </div>

モーダル ポップアップ コンテナ:

<!-- modal video -->
<div id="modal-gallery-video" class="modal modal-gallery hide fade" tabindex="-1">
  <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3 class="modal-title"></h3>
  </div>
  <div class="modal-body">
<video id="video1" controls width="560" height="315">
<source id="mp4" src="" type="video/mp4" />
<source id="webm" src="" type="video/webm" />
<source id="ogg" src="" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="560" height="315">
    <param name="movie" value="http://player.longtailvideo.com/player.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="" />
</object>
  </video>
  </div>
  <div class="modal-footer">
<a class="btn btn-success" onclick="playPause()"><i class="icon-play icon-white"></i>     <span>Play/Pause</span> </a>
<a class="btn btn-info" onclick="makeSmall()"><span>Small</span></a>
<a class="btn btn-warning" onclick="makeNormal()"><span>Normal</span></a> 
 <a class="btn btn-info" onclick="makeBig()"><span>Big</span></a> 
 </div>
 </div>

Jクエリ:

   $(function(){ 
  var player = document.getElementById('video1');
  var mp4Vid = document.getElementById('mp4');
  var oggVid = document.getElementById('ogg');
  var webmVid = document.getElementById('webm');
  var swfVid = document.getElementById('swf');

  document.getElementById('rockmetal').onclick = function() {
  player.pause();
  $(mp4Vid).attr('src', "img/video/rockmetal.mp4");
  $(oggVid).attr('src', "img/video/rockmetal.ogg");
  $(webmVid).attr('src', "img/video/rockmetal.webm");
  $(swfVid).attr('value', "controlbar=over&amp;file=http%3A%2F%2Fwww.xxxxx.com%2Ftest%2Fimg%2Fvideo%2Frockmetal.mp4");
  player.load();
  }
  document.getElementById('jet').onclick = function() {
  player.pause();
  $(mp4Vid).attr('src', "img/video/jet.mp4");
  $(oggVid).attr('src', "img/video/jet.ogg");
  $(webmVid).attr('src', "img/video/jet.webm");
  $(swfVid).attr('value', "controlbar=over&amp;file=http%3A%2F%2Fwww.xxxx.com%2Ftest%2Fimg%2Fvideo%2Fjet.mp4");
  player.load();
  }
  document.getElementById('flight').onclick = function() {
  player.pause();
  $(mp4Vid).attr('src', "img/video/flight.mp4");
  $(oggVid).attr('src', "img/video/flight.ogg");
  $(webmVid).attr('src', "img/video/flight.webm");
  $(swfVid).attr('value', "controlbar=over&amp;file=http%3A%2F%2Fwww.xxxx.com%2Ftest%2Fimg%2Fvideo%2Fflight.mp4");
  player.load();
  }
  document.getElementById('heli').onclick = function() {
  player.pause();
  $(mp4Vid).attr('src', "img/video/helicopter.mp4");
  $(oggVid).attr('src', "img/video/helicopter.ogg");
  $(webmVid).attr('src', "img/video/helicopter.webm");
  $(swfVid).attr('value', "controlbar=over&amp;file=http%3A%2F%2Fwww.xxxxxx.com%2Ftest%2Fimg%2Fvideo%2Fhelicopter.mp4");
  player.load();
  }
  document.getElementById('sub').onclick = function() {
  player.pause();
  $(mp4Vid).attr('src', "img/video/sub.mp4");
  $(oggVid).attr('src', "img/video/sub.ogg");
  $(webmVid).attr('src', "img/video/sub.webm");
  $(swfVid).attr('value', "controlbar=over&amp;file=http%3A%2F%2Fwww.xxxxxx.com%2Ftest%2Fimg%2Fvideo%2Fsub.mp4");
  player.load();
  }
  document.getElementById('uav').onclick = function() {
  player.pause();
  $(mp4Vid).attr('src', "img/video/uav.mp4");
  $(oggVid).attr('src', "img/video/uav.ogg");
  $(webmVid).attr('src', "img/video/uav.webm");
  $(swfVid).attr('value', "controlbar=over&amp;file=http%3A%2F%2Fwww.xxxxxx.com%2Ftest%2Fimg%2Fvideo%2Fuav.mp4");
  player.load();
  }
  document.getElementById('cm').onclick = function() {
  player.pause();
  $(mp4Vid).attr('src', "img/video/intro.mp4");
  $(oggVid).attr('src', "img/video/intro.ogg");
  $(webmVid).attr('src', "img/video/intro.webm");
  $(swfVid).attr('value', "controlbar=over&amp;file=http%3A%2F%2Fwww.xxxx.com%2Ftest%2Fimg%2Fvideo%2Fintro.mp4");
  player.load();
  }
  document.getElementById('tank').onclick = function() {
  player.pause();
  $(mp4Vid).attr('src', "img/video/tank.mp4");
  $(oggVid).attr('src', "img/video/tank.ogg");
  $(webmVid).attr('src', "img/video/tank.webm");
  $(swfVid).attr('value', "controlbar=over&amp;file=http%3A%2F%2Fwww.xxxxxxx.com%2Ftest%2Fimg%2Fvideo%2Ftank.mp4");
  player.load();
  }
   });
4

1 に答える 1