適切なリンクをクリックするとモーダルウィンドウが開き、ビデオが再生される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&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&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&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&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&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&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&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&file=http%3A%2F%2Fwww.xxxxxxx.com%2Ftest%2Fimg%2Fvideo%2Ftank.mp4");
player.load();
}
});