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'
});
何か案は?
この問題に関するすべての助けをありがとう!
他の人の助けを借りて、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などの問題)。
これを試して
<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>
ありがとう
同様の問題があり、Chromeで動画が再生されませんでした。 Chrome 32bitリリースに戻り、ベータ64bitをインストールしようとしました。
私のために働いた唯一のことは私のビデオドライバーを更新するでした。
NVIDIA GTS 240を持っています。ドライバーをダウンロードしてインストールし、再起動して、Chrome 38.0.2125.77 beta-m(64-bit)で再びYouTube、vimeoなどでHTML5ビデオの再生を開始します。他の人を助けます.
.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"