web-dev-qa-db-ja.com

HTML5ビデオはChromeのみで再生されません

いくつかの背景

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'
});

何か案は？

この問題に関するすべての助けをありがとう！

html5google-chromehtml5-videomediaelement.js
21
Chris Lindgren

他の人の助けを借りて、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などの問題）。

18
Chris Lindgren

これを試して

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

ありがとう

1
subindas pm

同様の問題があり、Chromeで動画が再生されませんでした。 Chrome 32bitリリースに戻り、ベータ64bitをインストールしようとしました。

私のために働いた唯一のことは私のビデオドライバーを更新するでした。

NVIDIA GTS 240を持っています。ドライバーをダウンロードしてインストールし、再起動して、Chrome 38.0.2125.77 beta-m（64-bit）で再びYouTube、vimeoなどでHTML5ビデオの再生を開始します。他の人を助けます.

1
idreamincode

.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"
0
Neovov