HTML5视频不会仅在Chrome中播放

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

尝试这个

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

谢谢