Javascript HTML5视频&；Chrome/Webkit

我想

元素有点问题。我有一个小的演示页面，在那里我正在运行一个视频。该文件在

.webm

、

.mp4

和

.ogv

中提供。视频在Firefox（10）mac+win、Safari mac和Chrome mac中正常播放

windows版本的Safari和Chrome都没有播放/显示该视频文件（可能是Webkit问题？）。这是HTML代码的外观：

<video controls>
    <source src="video/chicane.webm" type='video/webm; codecs="vp8, vorbis"'/>
    <source src="video/chicane.mp4" type="video/mp4"/>
    <source src="video/chicane.ogv" type="video/ogv"/>
</video>

查看Chromes或Safaris开发者工具（网络选项卡），它似乎选择播放

.webm

文件，但无法计算

mime类型（显示未定义），而且它似乎尝试访问文件两次

你自己看看：

（“绝妙标签”）

我不知道为什么它在OSX和两种浏览器上都能正常工作，如果有人能在网站上发现错误，请告诉我。目前，我做了一些特征检测和视频。但是，如果我在
标签上使用
自动播放
属性，Chrome至少会播放音频，但仍然不会播放视频

参考资料：
您是否尝试在每个
中添加
编解码器
附加信息？

可能WebKit无法自动识别用于编码视频源的编解码器

// from html5rocks.com, see link on the bottom of answer
<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

//来自html5rocks.com，请参阅答案底部的链接

它适用于我的机器：Windows 7系列+Chrome 16。
我所做的是打开了开发人员工具。
然后，我将
autoplay=“autoplay”
添加到
video
标记中。接下来，我编辑了与
webm
格式相关的html
source
标记，以便：

<source src="video/chicane.webm" type="video/webm; codecs=\" vp8, vorbis\"">



也许这只是一个转义问题（使用双引号）。
我使用您的视频URL从头开始编写了这个标记，它似乎工作正常：

<video controls width="360" height="360">
    <source src="http://www.typeofnan.com/video/chicane.mp4" type="video/mp4">
    <source src="http://www.typeofnan.com/video/chicane.webm" type="video/webm">
    <source src="http://www.typeofnan.com/video/chicane.ogv" type="video/ogg">
    <span title="No video playback capabilities, please download the video below">Your video</span>
</video>
<p>
    <strong>Download video:</strong> <a href="http://www.typeofnan.com/video/chicane.mp4">MP4 format</a> | <a href="http://www.typeofnan.com/video/chicane.ogv">Ogg format</a> | <a href="http://www.typeofnan.com/video/chicane.webm">WebM format</a>
</p>


你的视频

下载视频：|124;


请参阅。
以下是我为使其正常工作所做的工作。由于浏览器接受它可以播放的第一个视频，我将WEBM版本放在第一位，Chrome对此没有问题。
应该通过单击“awsomeness”选项卡来显示视频？@Zakaria:没错。感谢大家的提醒，我已经更新了这个问题。（FWIW，Chrome 17）它没有发出两次请求，我不确定chromes开发工具中的第一个条目是什么，因为它没有显示任何请求参数，但查看Fiddler（调试代理）中的请求，它只发出了一次，并用大小+视频/webm正确响应，下载后播放。是的-我指定了编解码器。但是它没有帮助，甚至似乎根本没有必要。我刚刚为
webm
文件添加了编解码器。顺便说一句，@jAndy看起来，我的第二个技巧是尝试只提供单个视频源，并确定支持哪种格式。当你转到提供的链接并尝试播放示例视频时，它对你有用吗？是的，这是让我困惑的部分。另外，html5rocks上的演示在chrome/win中也能正常工作。@jAndy这意味着，您的浏览器/操作系统组合工作正常，代码中存在问题。你确定你用什么编解码器来编码视频吗？@jAndy嗨，那么你能指出真正的解决方案是什么吗？我想（或者你也可以）编辑答案，以符合问题的真正原因。谢谢
<video controls width="360" height="360">
    <source src="http://www.typeofnan.com/video/chicane.mp4" type="video/mp4">
    <source src="http://www.typeofnan.com/video/chicane.webm" type="video/webm">
    <source src="http://www.typeofnan.com/video/chicane.ogv" type="video/ogg">
    <span title="No video playback capabilities, please download the video below">Your video</span>
</video>
<p>
    <strong>Download video:</strong> <a href="http://www.typeofnan.com/video/chicane.mp4">MP4 format</a> | <a href="http://www.typeofnan.com/video/chicane.ogv">Ogg format</a> | <a href="http://www.typeofnan.com/video/chicane.webm">WebM format</a>
</p>