嘿，我来帮你搞定这个视频在IE和Safari里跑不起来的问题！咱先拆解下可能的原因，然后一步步修复：

1. 修正布尔属性的写法 #

你代码里的muted=""写法在部分旧浏览器（比如IE）里可能不被正确识别。HTML5的布尔属性只要存在就生效，不需要赋值，所以改成muted就好。这对Safari的自动播放也很重要——Safari要求视频必须静音才能触发autoplay。

2. 确保MP4视频的编码兼容性 #

IE和Safari对MP4的编码要求很严格：

• 视频编码必须是H.264 Baseline Profile（IE对这个级别支持最好）
• 音频编码必须是AAC

如果你的视频编码不符合，浏览器会直接拒绝播放。可以用FFmpeg转码，命令示例：

ffmpeg -i template.mp4 -c:v libx264 -profile:v baseline -c:a aac -b:a 128k compatible-template.mp4

3. 给IE添加编码标识 #

IE11及以下版本需要明确指定MP4的codecs参数，才能正确识别视频格式。在source标签的type属性里补充编码信息：

type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

这个参数告诉浏览器：视频是H.264 Baseline级别，音频是AAC格式。

4. 针对Safari的WebM兼容提示 #

旧版Safari（比如macOS 10.14及以前、iOS 13及以前）完全不支持WebM格式，所以你的MP4作为第一个source是对的——浏览器会优先加载它，WebM只是给Chrome、Firefox等支持的浏览器做降级。

修改后的完整代码 #

<video loop autoplay controls muted width="100%" height="auto">
  <source src="http://modified-template3.medien-host4.de/wp-content/uploads/2018/06/template.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="http://modified-template3.medien-host4.de/wp-content/uploads/2018/06/template.webm" type="video/webm" />
  <!-- 给不支持HTML5视频的浏览器加个提示 -->
  Your browser doesn't support HTML5 video.
</video>

额外调试建议 #

• 打开IE的F12开发者工具，查看控制台有没有资源加载错误或格式不支持的提示
• 在Safari里用Web Inspector（偏好设置-高级-勾选“显示开发菜单”），检查视频资源是否成功加载，服务器返回的MIME类型是否正确（MP4应该是video/mp4，WebM是video/webm）
• 直接在浏览器地址栏打开视频URL，看看能不能单独播放——如果不能，说明视频文件本身或服务器配置有问题

内容的提问来源于stack exchange，提问作者mikacammann