JQuery IE删除/附加问题

时间:2011-05-20 21:24:07

标签: jquery internet-explorer video

我在Vimeo和IE上遇到很多问题。我有自定义视频“播放器”功能,如youtube - 一次显示一个视频,可选择切换视频。

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

第二次尝试: 将每个视频保存在div中,并根据需要删除/附加每个视频。但是,在IE中,视频将不会第二次加载。适用于FF / Chrome。

我觉得我已经尝试了所有的东西,我的智慧结束了。 JSFiddle:http://jsfiddle.net/4egZD/1/(播放Vimeo的视频;我的第二次尝试删除/追加)

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

这是非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>

1 个答案:

答案 0 :(得分: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的问题版本吗?