我认为因为我还是个新手,所以不能留下评论?所以把这个作为答案,虽然我认为更像是猜测。
一周左右前开始尝试使用HTML5视频。我遇到了许多问题,最终发现是由于我处理的转换电影文件引起的。下面是我用于示例的代码:
<video id="movie" width="600" height="338" poster="http://yourDomain.com/yourDirectory/posterFrame.jpg" controls="true" autoplay="true">
<source src="http://yourDomain.com/yourDirectory/yourMovie.mp4" type='video/mp4' />
<source src="http://yourDomain.com/yourDirectory/yourMovie.webm" type='video/webm' />
<source src="http://yourDomain.com/yourDirectory/yourMovie.ogg" type='video/ogg; codecs="theora, vorbis"' />
<object width="600" height="338" type="application/x-shockwave-flash" data="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf"><param name="movie" value="http://yourDomain.com/flowplayer/flowplayer-3.2.7.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"clip": {"url": "http://yourDomain.com/yourDirectory/yourMovie.mp4", "autoPlay":true, "autoBuffering":true},"plugins": {"controls": null}}' /></object>
</video>
我模仿了马克·皮尔格里姆的Dive into HTML (Video)教程。
以下是我的一些建议:
1)从你的标签中删除附加属性。我对你正在实现的东西不太熟悉(onplaying,onpause),但也许先尝试使用基础知识:width、height和controls。看看这是否有帮助。
2)在我的测试中,我使用Miro将我的.ogg和.webm版本转换。由于某种原因,电影似乎只能在本地播放...但当我在浏览器中查看它们超过一次时,我会得到空白屏幕。最终,我使用Firefogg来转换我的.ogg和.webm版本。这是奇怪的行为。
不确定FFmpeg是否是一个不可或缺的部分,以及您需要在工作流程中使用它的原因。但是,如果您只想使代码和示例电影功能正常运行,Firefogg对我起了作用。
最终,我意识到问题出在哪里,当我替换其他电影的工作版本而不是我的转换版本时。我建议您尝试插入Big Buck Bunny的.mp4、.webm和.ogg版本,看看是否可以显示它们。至少这样,您可以分离出是否存在语法或转换问题。
3)最后,我建议逐个视频文件和浏览器进行测试。这可能是显而易见的,但仍然值得一提。
附注:一旦你已经准备好每个文件类型,请确保首先列出.mp4版本。这来自皮尔格里姆的HTML5视频教程:
iOS 3.x的iPad存在一个错误,阻止它们注意到除第一个列出的视频源以外的任何内容。iOS 4(对所有iPad都是免费升级)修复了此错误。如果您想向尚未升级到iOS 4的iPad所有者提供视频,则需要首先列出MP4文件,然后是免费视频格式。