0

我的视频在几乎所有其他浏览器中都能正常工作，除了 IE9。但是，可能只是 IE9 的配置导致了此问题，因为在我的另一台装有 Windows 8 64 位和 IE10 64 位的笔记本电脑上，当我将浏览器模式切换到 IE9 时，它可以正常工作。这是问题：

我正在使用 Windows 7 64 位、IE9 64 位和 32 位。我的网站在嵌套的 JQuery 选项卡中有视频。随机加载一个选项卡。如果选择初始加载包含视频的选项卡之一，则视频显示正常。如果没有，则视频显示为空白，但是，我可以右键单击视频所在的位置，选择播放，然后视频将正常播放并出现控件。

这是遇到问题的页面的链接： http: //northernicefastpitch.com/index.php ?page=team&team=1

转到 Scalzitti 选项卡，然后选择视频以查找应显示视频的位置。

这是我的视频代码：

<video width="310" height="200" controls="controls">
<source src="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4" type="video/mp4">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="310" height="200">
<param name="src" value="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4">
<param name="type" value="video/mp4">
<param name="controller" value="true">
<param name="autoplay" value="false">
<embed src="teams/players/Scalzitti_Angela_19960603/videos/video1.mp4" type="video/mp4" pluginspage="http://www.apple.com/quicktime/download/" width="310" height="200" controller="true" autoplay="false">
</object>
</video>

我在使用 NGINX 的 linux Centos 6.3 服务器上托管该网站，因此 .htaccess 文件不会引起任何问题。我查看了“IE9 HTML5 视频仅在缓存清除后可见”帖子，但它对我没有帮助。我可能已经尝试了大约 30 种不同的解决方案，但对我没有任何效果（这就是为什么我倾向于在这台笔记本电脑上配置不正确的 IE9）。

如果你们中的任何人能够在 IE9 上通过控件正常观看视频，请告诉我。如果只是这台笔记本电脑有问题，我绝对可以接受。

提前致谢。

约翰

4

1 回答 1

0

我找不到任何可行的解决方案来解决这个问题，但我确实想出了一个解决方法。我仅对 IE 使用此解决方法，但在遇到 Chrome 的不同问题后，我决定在所有浏览器上使用此解决方法。

<div style="display:inline-block; margin-top:-14px; padding:5px;">
  <video id="video14" width="310" height="200" style="background:#000000 url('images/play.png') no-repeat;" preload="none" controls>
    <source src="videos/video1.mp4" type="video/mp4">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="310" height="200">
      <param name="src" value="videos/video1.mp4">
      <param name="type" value="video/mp4">
      <param name="controller" value="true">
      <param name="autoplay" value="false">
      <embed src="videos/video1.mp4" type="video/mp4" width="310" height="200" controller="true" autoplay="false"></embed>
    </object>
  </video>
  <script>
    document.getElementById('video14').onclick = function () {
      document.getElementById('video14').play();
      document.getElementById('video14').onclick = '';
      document.getElementById('video14').style.background = '';
    };
  </script>
</div>

上面，我给我的视频一个 id 和一个播放按钮的背景图像。然后我设置了一些 javascript 在单击时播放视频，并在第一次单击后删除 onclick 功能以及背景。由于 Chrome 的问题，我不得不设置 preload="none"。此外，您可以使用海报属性，而不是使用背景。如果使用海报属性，则不需要额外的 javascript 来删除背景。

编辑：我尝试使用海报属性，但它在 IE9 中不起作用，所以现在坚持使用背景。还尝试使用 video.js 和海报，但这在 IE9 中也不起作用。在 IE9 中，当包含视频的选项卡被选择为默认选项卡（随机选择默认选项卡）时，即使 preload="none" 仍然显示预览海报。不过，我对这种随机事件感到满意。

于 2013-09-30T18:27:36.170 回答