0

我正在尝试制作一个可以播放视频的网页，并提供一个可以播放的视频列表。我已经让它在 Chrome、Firefox 和 Opera 中运行良好，但当然 IE 8 令人头疼。视频播放器本身是一个原生 HTML 5 视频播放器，带有 Flash 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）并将它们变成变量
  • 删除video标签内的两个source标签
  • 清空视频标签内的锚标签
  • 使用之前创建的变量作为 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 中工作？

4

1 回答 1

0

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

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

于 2013-07-03T19:46:40.077 回答