我有 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>
查询：
$(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();
}
});