HTML5 video & Chrome/Webkit

Question

我猜我在<video>元素方面遇到了一些麻烦。我有一个小演示页面，在其中运行视频。该文件以.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>

我还在使用一个.htaccess文件来规范MIME类型，看起来是这样的

# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm

在查看Chrome或Safari的开发者工具（网络选项卡）时，似乎选择播放.webm文件，但无法确定mime type（显示为undefined），此外它似乎尝试两次访问文件。

请自行查看：http://www.typeofnan.com ("awesome tab") 我不知道为什么在OSX上使用这两个浏览器都能正常工作，如果有人能在网站上发现错误，请告诉我。目前，我进行了一些特性检测，并使用JavaScript .play() 播放视频。然而，如果我在<video>标签上使用autoplay属性，至少Chrome会播放音频，但仍然没有视频。

参考资料：Github上的网站源代码

- jAndy

---

点击“awesomeness”选项卡应该显示视频吗？ - Zakaria

@Zakaria：没错。感谢提醒，我已经更新了问题。 - jAndy

（顺便说一句，Chrome 17）它没有发出两次请求，我不确定Chrome开发工具中的第一个条目是什么，因为它没有显示任何请求参数，但是在Fiddler（调试代理）中查看请求后，它只被发出一次，并正确响应大小+ video / webm，下载后可以播放。 - Alex K.

Answer 1

以下是我为使其正常工作所做的操作。由于浏览器只接受第一个可以播放的视频，因此我将WEBM版本放在第一位，这样Chrome就没有问题了。

- Bill Lockhart

Answer 2

你是否尝试在每个中添加codecs的附加信息？
可能是因为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>

http://www.html5rocks.com/en/tutorials/video/basics/#toc-markup

- Marek Sebera

---

是的 - 我已经指定了编解码器。但这并没有帮助 + 它似乎根本不必要。顺便说一下，我只是为 webm 文件添加了编解码器。 - jAndy

@jAndy 看起来，我的第二个提示是尝试提供单一的视频源，并确定支持哪种格式。当您访问提供的链接并尝试播放示例视频时，是否可以正常播放？ - Marek Sebera

@jAndy 这意味着，你的浏览器/操作系统组合正常工作，问题存在于你的代码中。你确定你使用了什么编解码器来编码视频吗？ - Marek Sebera

我按照您提供的演示页面上的所有编解码器/语法进行了添加，但在我的win/chrome 16上并没有起到帮助作用。 - jAndy

@jAndy 你好，能否请您指出真正的解决方案是什么？我想（或者您也可以）编辑答案以适应问题的真正原因。谢谢。 - Marek Sebera

Answer 3

它在我的电脑上运行正常：Windows 7 Family + Chrome 16。 我所做的是打开开发者工具。 然后，我在video标记中添加了 autoplay="autoplay"。接下来，我编辑了与webm格式相关的html source标记，以便我能够得到：

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

可能只是一个转义问题（双引号）。

- Zakaria

Answer 4

我使用您的视频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>

请查看适用于所有人的视频。

- Mathias Bynens