视频无法在Safari和IE9上播放,但在Chrome和Firefox上播放效果非常好

时间:2013-10-05 05:22:00

标签: html css .htaccess video html5-video

我对所有这些HTML业务都很陌生,但我已经学会了足够的知识,暂时将其上传到网上:(www.authenticchronicles.com)。

现在,它只有两页,而“关于”页面正在给我一些问题。在花了大约3-4个小时试图解决这个问题之后,我就准备放弃了!也许这里有人可以提供一些见解? FWIW,我正在使用Dreamweaver将它们整合在一起。

我发誓我的HTML是正确的:

<video id="video_background" preload="auto" autoplay loop muted volume="0">
<source src="movies/about.mp4" type="video/mp4"> 
<source src="movies/About.webmhd.webm" type="video/webm">
<source src="movies/About.ogv" type="video/ogg">
</video>

它有效......到了一定程度。只有chrome和firefox会实际加载背景循环视频(我使用CSS将它放在后台)。 Safari和IE9无法加载,它只是一个空白框。

我甚至尝试通过将此文件添加到之前为空白的文件来编辑htaccess文件:

AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm

我尝试更新浏览器和所有内容。我在html顶部列出了正确的doctype:

我不知道发生了什么。有趣的是,当我在Dreamweaver上编辑时,我可以在本地预览这些网站就好了(当然,我认为当我将它上传到主机时它会起作用)。它被上传到主机然后被访问,这给了我一些问题。

如果这看起来多余且容易解决,我道歉。我发誓尽我所能做了很多研究,并试图尽可能多地理解。在这一点上,我只是完全被难住了。对此问题的任何见解都非常感谢〜

1 个答案:

答案 0 :(得分:2)

我不确定解决方案,但这里需要测试:尝试将属性“controls”添加到视频标记中,例如:

<video id="video_background" preload="auto" controls autoplay loop muted volume="0">

我要说的是,'autoplay'视频标签属性并不总是被所有浏览器所尊重(它可能很烦人,侵入性和带宽密集)。通过询问控件,您可以将鼠标悬停在空白视频区域上并按下播放按钮。这将验证IE9和Safari是否至少能够播放视频。