Html HTML5 视频不能仅在 Chrome 中播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21004335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video won't play in Chrome only
提问by Chris Lindgren
some background
一些背景
I've tested my video in FF and Safari (including iDevices) and it plays properly, but it will not play in the Chrome browser. As you can see in the code below, I've created mp4, m4v, webM, and ogv files, and I've tested all of them on my computer for any playback issues.
我已经在 FF 和 Safari（包括 iDevices）中测试了我的视频，它可以正常播放，但无法在 Chrome 浏览器中播放。正如您在下面的代码中看到的，我已经创建了 mp4、m4v、webM 和 ogv 文件，并且我已经在我的计算机上测试了所有这些文件是否存在播放问题。
the symptoms/issue
症状/问题
In Chrome, the video seems to load, and there are no errors in the console log. When the play button is pressed, it loads a portion of the file, but then does not play it. Yet, interestingly, if I arbitrarily click on a later time in the time-bar, say about halfway through, it will play about 5 seconds of the video even with the subtitles, but noaudio.
在 Chrome 中，视频似乎已加载，并且控制台日志中没有错误。当按下播放按钮时，它会加载文件的一部分，但不会播放它。然而，有趣的是，如果我在时间栏中任意单击稍后的时间，比如大约一半，即使有字幕，它也会播放大约 5 秒的视频，但没有音频。
my research
我的研究
I've read up on any issues that might be causing this, but I haven't found any ideas that work. To note, I've written the following in my .htaccess file:
我已经阅读了可能导致这种情况的任何问题，但我还没有找到任何可行的想法。请注意，我在 .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
Also, I am using the mediaelement.js library.
另外，我正在使用 mediaelement.js 库。
the code
编码
Here's the HTML:
这是 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>
Here's the simple js:
这是简单的js：
$('video,audio').mediaelementplayer({
features: ['playpause','progress','current','tracks','volume'],
startLanguage: 'en'
});
Any ideas?
有任何想法吗？
Thanks for any and all help in this matter!
感谢您对此事的任何帮助！
采纳答案by Chris Lindgren
With some help from another person, we figured out it was an issue of ordering the source files within the HTML file. I learned that browsers accept the first usable format, and their seems to be an issue with the .m4v file, so I started with the .mp4, then .webm. Here's the order that works in Safari (even on my iPhone 5), Firefox, and Chrome:
在其他人的帮助下，我们发现这是在 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>
Now, I'll have to re-check the encoding on the m4v file (perhaps an issue of Baseline vs Main, High, etc.).
现在，我必须重新检查 m4v 文件的编码（可能是 Baseline vs Main、High 等的问题）。
回答by subindas pm
Try this
尝试这个
<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>
Thanks
谢谢
回答by idreamincode
I had a similar issue, no videos would play in Chrome. Tried installing beta 64bit, going back to Chrome 32bit release.
我遇到了类似的问题，Chrome 中无法播放视频。尝试安装 beta 64 位，回到 Chrome 32 位版本。
The only thing that worked for me was updating my video drivers.
唯一对我有用的是更新我的视频驱动程序。
I have the NVIDIA GTS 240. Downloaded, installed the drivers and restarted and Chrome 38.0.2125.77 beta-m (64-bit) starting playing HTML5 videos again on youtube, vimeo and others. Hope this helps anyone else.
我有 NVIDIA GTS 240。下载、安装驱动程序并重新启动，Chrome 38.0.2125.77 beta-m（64 位）再次开始在 youtube、vimeo 和其他人上播放 HTML5 视频。希望这对其他人有帮助。
回答by Neovov
Have you tried by setting the MIME type of your .m4v to "video/m4v" or "video/x-m4v" ?
您是否尝试过将 .m4v 的 MIME 类型设置为 "video/m4v" 或 "video/x-m4v" ？
Browsers might use the canPlayTypemethod internally to check if a <source>is candidate to playback.
浏览器可能会在canPlayType内部使用该方法来检查 a<source>是否可以播放。
In Chrome, I have these results:
在 Chrome 中，我有以下结果：
document.createElement("video").canPlayType("video/mp4"); // "maybe"
document.createElement("video").canPlayType("video/m4v"); // ""
document.createElement("video").canPlayType("video/x-m4v"); // "maybe"
回答by BlackNetworkBit
To all of you who got here and did not found the right solution, i found out that the mp4 video needs to fit a specific format.
对于来到这里但没有找到正确解决方案的所有人，我发现 mp4 视频需要适合特定格式。
My Problem was that i got an 1920x1080 video which wont load under Chrome (under Firefox it worked like a charm). After hours of searching i finaly managed to get hang of the problem, the first few streams where 1912x1088 so Chrome wont play it ( i got the exact stream size from the tool MediaInfo). So to fix it i just resized it to 1920x1080 and it worked.
我的问题是我得到了一个 1920x1080 的视频，它无法在 Chrome 下加载（在 Firefox 下它就像一个魅力）。经过数小时的搜索，我最终设法解决了这个问题，前几个流是 1912x1088，所以 Chrome 不会播放它（我从工具MediaInfo获得了确切的流大小）。所以为了修复它，我只是将它调整为 1920x1080 并且它起作用了。
