Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - Chrome and Safari HTML5 video rendering. Hanging on first frame.

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.

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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

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

(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)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...