Question

我正在尝试整理一个可播放视频的网页，并提供可播放的视频列表。我已经在Chrome，Firefox和Opera中运行良好，但当然IE 8提供了很多令人头疼的问题。视频播放器本身是一个原生的HTML 5视频播放器，带有闪存Flowplayer后备（几乎专门用于IE 8）。 HTML的内容如下所示：

<video controls width="640" height="360">
  <source id='mp4src' src="videos/foo.mp4" type="video/mp4">
  <source id='webmsrc' src="videos/foo.mp4.webm" type="video/webm">
  <a href="videos/foo.mp4" style="display:block;width:425px;height:300px;" id="player">
  </a>
</video>

锚标签是Flowplayer的一种容器，根据Flowplayer的文档完成。

现在我写的jQuery应该执行以下操作：

获取每个列表项的两个伪属性（每个属性包含视频的URL）并将它们变为变量
删除视频标记内的两个源标记
清空视频标记内的锚标记
使用先前创建的变量作为src属性创建两个新的源标记
将锚标记的href属性更改为变量
运行Flowplayer功能以重新填充锚标记
重新加载视频

这是jQuery本身

$(document).ready(function(){
  $('.playlists11 #playlist li').click(function(){
    var url1 = $(this).attr('url1');
    var url2 = $(this).attr('url2');
    $('.content video #mp4src').remove();
    $('.content video #webmsrc').remove();
    $('.content video a').empty();
    $('.content video').prepend("<source id='webmsrc' src='" + url2 + "' type='video/webm'>");
    $('.content video').prepend("<source id='mp4src' src='" + url1 + "' type='video/mp4'>");
    $('.content video #player').attr('href',url1);
    $f("player", "flowplayer/flowplayer-3.2.16.swf");
    $('.content video').load();
  });
});

现在这就像每个浏览器中的魅力一样，但IE 8！有人请告诉我，我的代码有什么问题导致它只在IE 8中不起作用？

Answer 1

哇，我真的很擅长回答自己的问题。：P

此问题的解决方法是将$('.content video a').empty();更改为$('.content #player').empty();并将$('.content video #player').attr('href',url1);更改为$('.content #player').attr('href',url1);。我猜IE 8不仅不知道如何实现视频标签，而且完全忽略了它们的存在......

为什么我的jQuery中有一半不能在IE 8中运行？

1 个答案: