极客观点
项目管理
HarmonyOS
一些背景
我已经在 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'
});
有任何想法吗？
感谢您在这件事上的任何帮助！
原文由 Chris Lindgren 发布，翻译遵循 CC BY-SA 4.0 许可协议
在其他人的帮助下，我们发现这是在 HTML 文件中对源文件进行排序的问题。我了解到浏览器接受第一种可用格式，并且它们似乎是 .m4v 文件的问题，所以我从 .mp4 开始，然后是 .webm。以下是在 Safari（甚至在我的 iPhone 5 上）、Firefox 和 Chrome 中有效的顺序：
现在，我将不得不重新检查 m4v 文件的编码（可能是 Baseline vs Main、High 等问题）。