HTML5 视频 & Chrome/Webkit答案

【问题标题】：HTML5 video & Chrome/WebkitHTML5 视频 & Chrome/Webkit
【发布时间】：2012-02-06 14:03:26
【问题描述】：

我猜<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 或 Safaris 开发人员工具（网络选项卡），它似乎选择播放 .webm 文件，但无法识别 mime type（显示未定义），而且看起来像尝试访问文件两次。

你自己看看：

http://www.typeofnan.com ("很棒的标签")

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

参考：Site source on github

【问题讨论】：

视频应该通过点击“可怕”标签来显示？
@Zakaria：完全正确。感谢您的提醒，我已经更新了问题。
(FWIW, Chrome 17) 它没有发出两次请求，我不确定 chromes 开发工具中的第一个条目是什么，因为它没有显示任何请求参数，但查看请求Fiddler（调试代理）仅发布一次，并以 size+video/webm 正确响应，下载后播放。

标签： javascript jquery html webkit html5-video

【解决方案1】：

这是我为使其正常工作所做的工作。由于浏览器接受它可以播放的第一个视频，所以我把WEBM版本放在第一位，Chrome没有问题。

【讨论】：

【解决方案2】：

您是否尝试将 codecs 附加信息添加到每个 <source> 中？
可能 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

【讨论】：

是的 - 我指定了编解码器。但这无济于事+它甚至似乎根本没有必要。我刚刚为webm 文件添加了编解码器。
@jAndy 看起来，我的第二个技巧是尝试仅提供单个视频源，并确定支持哪种格式。当您转到提供的链接并尝试播放示例视频时，它是否适合您？
是的，这对我来说是令人困惑的部分。 html5rocks 上的演示也适用于我在 chrome/win 中。
@jAndy 这意味着您的浏览器/操作系统组合工作正常，并且您的代码中存在问题。你确定你用什么编解码器来编码视频吗？
@jAndy 嗨，你能指出真正的解决方案是什么吗？我想（或者你也可以）编辑答案以适应问题的真正原因。谢谢

【解决方案3】：

它适用于我的机器：Windows 7 Family + Chrome 16。我所做的是我打开了开发者工具。然后，我将autoplay="autoplay" 添加到video 标记中。接下来，我编辑了与webm 格式相关的html source 标签，这样我就可以拥有：

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

也许这只是一个转义问题（使用双引号）。

【讨论】：

【解决方案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>

见Video for Everybody。

【讨论】：