Chrome和Safari HTML5视频呈现.挂在第一帧上. [英] Chrome and Safari HTML5 video rendering. Hanging on first frame.

问题描述

在Chrome和Safari中显示视频时确实存在问题.刷新几页后，视频似乎仅开始播放.不知道为什么会这样.我认为这与Chrome和Safari渲染视频的方式有关.

Having a real issue with displaying video in Chrome and Safari. The video seems to only run after a few page refreshes. Not sure why this is. I think it has something to do with the way Chrome and Safari render video.

在Firefox中，视频运行没有问题. 这是HTML

In Firefox I have no issues with the video running. Here is the HTML

<video width="100%" height="100%" preload="auto" loop autoplay style="visibility: visible; width: 
 1321px; height: 744px; opacity: 1;">
  <source src="https://d- 
  360.nyc3.digitaloceanspaces.com/2018/06/video_2.mp4" type="video/mp4"> 
</video>

推荐答案

我注意到下载速度非常慢，所以我猜测这是服务器性能/缓存问题.

I noticed that it was pretty slow to download, so my guess will be that it's a server performance/caching issue.

您可以通过使用 ffmpeg 这样的东西(在MOOV原子的前面)重新编码来解决其中的一些问题.视频(将允许它尽快开始播放)，例如:

You can address some of that by using something like ffmpeg re-encoding with the MOOV atom at the front of the video (will allow it to start playing back sooner) eg:

ffmpeg -i video_2.mp4 -c:a copy -c:v copy -movflags faststart video_2_tweak.mp4

如果性能仍然很差，那么您可能希望进一步限制比特率以帮助提高下载速度(当前视频约为2.5Mbps)，例如:

if performance is still poor, then you might want to constrain the bitrate further to help address download speed (current video is around 2.5Mbps) eg:

ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4

(这会强制使用高质量的视频强制进行视频转码，但将比特率限制为1.5Mbps ...您可能需要尝试使用此值才能获得良好的质量与性能之间的权衡)

(this forces a transcode of the video using a high quality present but constrains bitrate to 1.5Mbps ... you may need to experiment with this value to get a good quality vs performance trade-off)

取决于所需的输出端，如果不需要完整的720p帧大小，则可以在转码上添加其他约束以限制例如:

Depending on the desired output side, if you don't need the full 720p framesize, you can add an additional constrain on the transcode to limit that eg:

ffmpeg -i video_2.mp4 -s 640x360 -c:a copy -c:v libx264 -preset slow -b 1M -movflags faststart video_2_tweak.mp4

您还应该确保将服务器配置为允许缓存内容，以便在播放视频时不必总是将其返回到服务器

You should also ensure that your server is configured to allow caching of content so if the video is being replayed it doesn't always have to come back to your server

这篇关于Chrome和Safari HTML5视频呈现.挂在第一帧上.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！