Question

一些背景

我在FF和Safari（包括iDevices）中测试了我的视频并且播放正常，但它无法在Chrome浏览器中播放。正如你在下面的代码中看到的，我已经创建了mp4，m4v，webM和ogv文件，并且我已经在我的计算机上测试了所有这些文件以解决任何播放问题。

症状/问题

在Chrome中，视频似乎已加载，并且控制台日志中没有错误。按下播放按钮时，它会加载文件的一部分，但之后不会播放。然而，有趣的是，如果我在时间栏中随意点击一下，说到中途，即使有字幕，它也会播放大约5秒的视频，但是没有音频。

我的研究

我已经阅读了可能导致此问题的任何问题，但我没有找到任何有用的想法。要注意，我在.htaccess文件中写了以下内容：

# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------

# Audio
AddType audio/ogg                      oga ogg
AddType audio/mp4                      m4a
AddType audio/webm                     webm

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

# Assorted types
AddType image/x-icon                        ico
AddType image/webp                          webp
AddType text/cache-manifest                 appcache manifest
AddType text/x-component                    htc
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-xpinstall             xpi
AddType application/octet-stream            safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard                        vcf
AddType text/plain                          srt

另外，我正在使用mediaelement.js库。

代码

这是HTML：

<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none">
      <!-- M4V for Apple -->
      <source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" />
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
      <source type="video/mp4" src="assets/vid/PhysicsEtoys.mp4" />
      <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
      <source type="video/webm" src="assets/vid/PhysicsEtoys.webm" />
      <!-- Ogg/Vorbis for older Firefox and Opera versions -->
      <source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" />
      <!-- Subtitles -->
      <track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" />
      <track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" />
      <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
      <object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf">
          <param name="movie" value="flashmediaelement.swf" />
          <param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" />
          <!-- Image as a last resort -->
          <img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playback capabilities" />
      </object>
</video>

这是简单的js：

$('video,audio').mediaelementplayer({
    features: ['playpause','progress','current','tracks','volume'],
    startLanguage: 'en'
});

有什么想法吗？

感谢您对此事的任何帮助！

Answer 1

在另一个人的帮助下，我们发现这是在HTML文件中订购源文件的问题。我了解到浏览器接受第一种可用的格式，它们似乎是.m4v文件的问题，所以我开始使用.mp4，然后是.webm。这是在Safari（甚至在我的iPhone 5上），Firefox，和Chrome 中运行的顺序：

<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none">
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
      <source type="video/mp4" src="assets/vid/PhysicsEtoys.mp4" />
      <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
      <source type="video/webm" src="assets/vid/PhysicsEtoys.webm" />
       <!-- M4V for Apple -->
      <source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" />
      <!-- Ogg/Vorbis for older Firefox and Opera versions -->
      <source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" />
      <!-- Subtitles -->
      <track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" />
      <track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" />
      <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
      <object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf">
          <param name="movie" value="flashmediaelement.swf" />
          <param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" />
          <!-- Image as a last resort -->
          <img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playback capabilities" />
      </object>
  </video>

现在，我将不得不重新检查m4v文件的编码（可能是Baseline vs Main，High等问题）。

Answer 2

我遇到了类似问题，Chrome中没有视频播放。尝试安装beta 64bit，回到Chrome 32bit版本。

唯一对我有用的是更新我的视频驱动程序。

我有NVIDIA GTS 240.下载，安装驱动程序并重新启动，Chrome 38.0.2125.77 beta-m（64位）再次在youtube，vimeo和其他人上播放HTML5视频。希望这有助于其他任何人。

Answer 3

尝试一下

<video autoplay loop id="video-background" muted plays-inline>
            <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
            </video>

谢谢

Answer 4

您是否尝试过将.m4v的MIME类型设置为“video / m4v”或“video / x-m4v”？

浏览器可能会在内部使用canPlayType方法检查<source>是否适合播放。

在Chrome中，我有以下结果：

document.createElement("video").canPlayType("video/mp4"); // "maybe"
document.createElement("video").canPlayType("video/m4v"); // ""
document.createElement("video").canPlayType("video/x-m4v"); // "maybe"

Answer 5

首先，chrome 无法读取 mkv 文件，我只尝试过使用 mp4 和 webm，它对我来说很好用。

然后检查它的编码注意，chrome浏览器只支持少数编码，不是全部。chrome浏览器支持这些。

视频编解码器 H.264、VP8、VP9

音频编解码器 AAC、MP3、Vorbis、Opus

您可以使用命令通过ffmpeg检查编码（您需要安装它）

ffprobe file.mp4

enter image description here

您可以使用 ffmpeg 更改编码

ffmpeg -i inputfile.mp4 -acodec aac -vcodec libx264 output.mp4

Answer 6

对于来到这里但未找到正确解决方案的所有人，我发现mp4视频需要适合特定的格式。

我的问题是我得到了一个1920x1080的视频，无法在Chrome上加载（在Firefox下，它像一种魅力一样工作）。经过数小时的搜索，我终于设法解决了这个问题，在1912x1088的前几个流中，Chrome无法播放它（我从工具MediaInfo获得了确切的流大小）。因此，要修复此问题，我只是将其大小调整为1920x1080，并且可以正常工作。

HTML5视频只能在Chrome中播放

一些背景

症状/问题

我的研究

代码

6 个答案: