Question

我猜我的<video>元素有问题。我有一个小的演示页面，我正在运行一个视频。该文件位于.webm，.mp4和.ogv。视频在 Firefox（10）mac + win ， Safari mac ， Chrome mac 中正常播放。

Safari和Chrome的 windows 版本都没有播放/显示该视频文件（可能是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

查看Chromes或Safaris开发人员工具（网络选项卡），看起来它选择播放.webm文件，但它无法计算mime type（显示未定义），加上它似乎试图两次访问文件。

自己看看：

http://www.typeofnan.com （“很棒的标签”）

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

参考：Site source on github

Answer 1

这是我为了让它发挥作用而做的。由于浏览器接受了它可以播放的第一个视频，我将WEBM版本放在首位，而Chrome则没有任何问题。

Answer 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

Answer 3

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

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

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

Answer 4

我使用您的视频网址从头开始编写此标记，似乎工作正常：

<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。

HTML5视频＆amp;镀铬/ Webkit的

4 个答案: