我的视频在除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上正确观看视频,并带有控件。如果只是这台笔记本电脑出了问题,我肯定同意。
提前谢谢。
John
我找不到任何可行的解决方案来解决这个问题,但我确实想出了一个变通办法。我只在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的问题,我不得不将预加载设置为"none"。此外,您可以使用海报属性,而不是使用背景。如果使用poster属性,则不需要额外的javascript来删除背景。
编辑:我试过使用海报属性,但在IE9中不起作用,所以现在还是使用背景。也尝试过使用video.js和poster,但在IE9中也不起作用。在IE9中,当带有视频的选项卡被选择为默认选项卡(随机选择的默认选项卡)时,即使预加载="none",预览海报仍在显示。不过,我对这种随机发生的事情没意见。