JQuery IE 删除/追加问题

Question

我在使用 Vimeo 和 IE 时遇到了很多问题。我有一个自定义视频“播放器”功能，例如 youtube - 一次显示一个视频，并带有切换视频的选项。

第一次尝试： 将每个视频保存在一个 div 中，并使用 JQuery fadeIn/fadeOut 显示/隐藏它们。除 IE 外，在 IE/FF/Chrome 中工作，在视频之间切换可保持旧视频的音频与新视频一样播放。不可接受。

第二次尝试： 将每个视频保存在 div 中，并根据需要删除/附加每个视频。但是，在 IE 中，视频不会第二次加载。在 FF/Chrome 中运行良好。

我觉得我已经尝试了一切，我已经无能为力了。 JSFiddle：http://jsfiddle.net/4egZD/1/（播放来自 Vimeo 的视频；我第二次尝试使用 remove/append ）

非常感谢任何帮助或替代方法。

这是非 JSFiddle'rs 的代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    // When any of our video description divs are clicked, play that video
    // for testing purposes, we only show one video
    // whenever a new video is clicked, we want to remove/append to stop the audio in IE
  $('#descript-1').click(function() {
      $("#video1" ).remove().appendTo('#videoHolder');
  });


});
</script>



<table border="1">
<tr>
<td style="background-color: #003388; color: white; font-weight: bold; padding: 2px; padding-left: 7px;" colspan="2">
<a name="videos">Watch Our Videos</a>
</td>
</tr>
<tr>
<td id="videoHolder" valign="top">

<div id="video1" ><object width="400" height="225"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=23864606&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=&amp;fullscreen=1&amp;autoplay=1&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=23864606&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=&amp;fullscreen=1&amp;autoplay=1&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed></object>
</div>

</td>
<td style="margin-right: 5px; vertical-align:top;">
<div id="descript-1" style="width: 100%; margin: 5px; background-color: #999999; cursor: pointer;">
    <b>Play This Video</b><br />But why won't it play more than once in IE?
</div>

</td>
</tr>
</table>

Answer 1

你可以试试这样的：

$('#descript-1').click(function() {
    var video = $("#video1");
    $("#video1" ).remove()
    video.appendTo('#videoHolder');
});

或

$('#descript-1').click(function() {
    var video = $("#video1").html();
    $("#video1" ).remove()
    $('#videoHolder').html("<div id='video1'>" + video + "</div>");
});

我不知道它是否会起作用，没有意义，但由于在 IE 中一切都没有意义，你可以试一试。

还有问题的IE版本是什么？