HTML5视频不会仅在Chrome中播放

问题描述 投票：20回答：5

一些背景

我已经在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'
});

有任何想法吗？

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

html5 google-chrome html5-video mediaelement.js
5个回答
18
投票

在另一个人的帮助下，我们发现这是在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等问题）。

1
投票

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

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

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

1
投票

试试这个

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

谢谢

0
投票

您是否尝试过将.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"
-1
投票

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

我的问题是我得到了一个1920x1080的视频，它不会在Chrome下加载（在Firefox下它就像一个魅力）。经过几个小时的搜索，我终于设法解决问题，前几个流1912x1088所以Chrome不会播放它（我从工具MediaInfo获得了确切的流大小）。所以为了解决这个问题，我只需将其调整为1920x1080即可。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.