一些背景
我在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,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等等)。