在Chrome和Safari中显示视频存在真正的问题。几页刷新后，视频似乎仅运行。不知道为什么会这样。我认为这与Chrome和Safari呈现视频的方式有关。
在Firefox中，我对视频的运行没有任何问题。 这是HTML
let modal = document.querySelector('.modal')
console.log(modal)
答案 0 :(得分：1)
我注意到下载速度很慢，所以我的猜测是服务器性能/缓存问题。
你可以通过使用ffmpeg重新编码与视频前面的MOOV原子（将允许它更快地开始播放）来解决其中的一些问题，例如：
ffmpeg -i video_2.mp4 -c:a copy -c:v copy -movflags faststart video_2_tweak.mp4
如果性能仍然很差，那么您可能希望进一步限制比特率以帮助解决下载速度（当前视频大约为2.5Mbps），例如：
ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4
（这会强制使用高质量的视频转码，但会将比特率限制在1.5Mbps ......您可能需要尝试使用此值来获得良好的质量与性能权衡）
根据所需的输出方面，如果您不需要完整的720p帧大小，则可以在转码上添加额外的约束来限制，例如：
ffmpeg -i video_2.mp4 -s 640x360 -c:a copy -c:v libx264 -preset slow -b 1M -movflags faststart video_2_tweak.mp4
您还应确保将服务器配置为允许缓存内容，以便在重播视频时不必再返回服务器
答案 1 :(得分：0)
Offbeatmammal关于压缩的答案非常好。视频确实需要压缩。
我使用以下命令使用ffmpeg进行压缩。
ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4
上传了视频，但在第一帧上悬挂的 chrome和safari 视频仍然没有运气。所以这不是一个尺寸问题。
我拍了视频标记，然后在 chrome 的codepen中将其运行到我的网站之外，并且问题被复制了。在仔细查看属性之后，我注意到我没有在视频标记中添加muted=""属性。
Open code pen and look at first video. No muted attribute. 。
在我应用静音属性muted=""后，视频以chrome和safari播放。Open code pen and look at second video. Muted attribute added 。
<video width="100%" height="100%" preload="auto" loop="" autoplay="" muted=""。
这只是chrome和safari的问题。在Firefox中，视频将播放。因此，如果您要将html5视频添加到您的网站，请确保包含muted=""属性。