HTML5 视频无法仅在 Chrome 中播放

Posted 2023-03-05

【中文标题】HTML5 视频无法仅在 Chrome 中播放

【英文标题】：HTML5 video won't play in Chrome only

【发布时间】：2014-01-27 01:35:16

【问题描述】：

一些背景

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

症状/问题

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

我的研究

我已经阅读了可能导致此问题的任何问题，但我没有找到任何可行的想法。需要注意的是，我在 .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   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   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"   title="No video playback capabilities" />
      </object>
</video>

下面是简单的js：

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

有什么想法吗？

感谢您在这件事上的任何帮助！

【问题讨论】：

Firefox 现在支持 MP4/H264 btw mozilla.org/en-US/firefox/26.0/releasenotes

什么是.m4v？为什么不能为所有设备使用 MP4？

@hendry：不过，它看起来好像只在 Linux 平台上受支持，我需要让它尽可能广泛地访问。关于 .m4v 文件。它适用于 Apple 设备。在一些帮助下，我认为我已将其范围缩小到编解码器问题以及视频元素中可能对源类型进行排序。我今天会修修补补，如果我找到解决方案，请发布。

【参考方案1】：

在其他人的帮助下，我们发现这是在 HTML 文件中对源文件进行排序的问题。我了解到浏览器接受第一种可用格式，而且它们似乎是 .m4v 文件的问题，所以我从 .mp4 开始，然后是 .webm。以下是适用于 Safari（甚至在我的 iPhone 5）、Firefox、和 Chrome 中的顺序：

<video   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   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"   title="No video playback capabilities" />
      </object>
  </video>

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

【讨论】：

那么这里的分辨率到底是多少？

@ItGrunt 我相信他只是将他的 的顺序更改为首先拥有 .mp4 源。

【参考方案2】：

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

【讨论】：

有趣。您如何查找/检查这些结果，以便我以后可以检查这些结果？

只需在浏览器的控制台中启动这些行 :)

可能是什么意思？

canPlayType 只是为您提供浏览器是否能够打开视频容器的信息（mp4、mov、avi 只是容器，一个能够存储音频和/或视频流的盒子）。因此，浏览器可能可以打开盒子，但可能无法播放流（例如，浏览器可能打开 mp4 但如果比特率太高，则无法解码视频流设备高）。

您也可以在www.w3.org上查看您的设置

【参考方案3】：

我遇到了类似的问题，Chrome 无法播放任何视频。尝试安装 beta 64bit，回到 Chrome 32bit 版本。

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

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

【参考方案4】：

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

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

【参考方案5】：

试试这个

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

谢谢

【讨论】：

plays-inline 几乎解决了这个问题。谢谢！

属性名为playsinline 见developer.mozilla.org/en-US/docs/Web/HTML/Element/video

【参考方案6】：

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

然后检查它的编码注意，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

【参考方案7】：

我有类似的问题。将 muted 更改为 [muted]="true" 确实解决了我的问题。