load only metadata from html5 video/audio

问题

At first, I'd like to ask that question. I can not load metadata without any other video content. preload = "metadata" is not working. I test on Win Chrome and don't know how it works on Safari/FF/IE/Opera. Thus I can't load six and more video clips fast. Chrome may keep only six opened connections at similar port/protocol/domain. And if I load more than six videos then last videos does not start load while first six videos fully complete loading.

Does jsfiddle need? I can create but I think that is not necessary. For example. HTML: 10 html5 <video> each around 100mb and preload=metadata attribute. JS (using jQuery just for clearness):

$('video').on('loadedmetadata',function(){
  console.log(this.duration);
}).each(function(i){
  this.load();
});

Then open “Network” tab in Chrome Dev Tools and reload page. Six videos would start to load and would load full content while other four videos would wait with (pending) mark. At first, in console would appear 6 messages. New messages would appear after fully load any first videos.

I tried a lot of things but each one has fall. Now I thing about getting metadata on server side. Are there any solutions on PHP maybe? But JS solution would be better.

I also know about solution which using Youtube, probably Vimeo and some other websites. That is keeping videos on some subdomains (s1.youtube.com, s2.youtube.com, etc). But I can not use it. I make website template and it have some requirements.

I have video gallery with a lot of videos. Player must show duration and know width/height before first video play. Also I want to take frame from middle of video for video poster. Any solution for stop video loading and close connection is best I need. And it solve trouble with getting metadata indeed.

回答1:

The situation is now going to be worse with v42 (currently beta - so hopefully will be fixed)

It now respects preload='metadata' but doesn't release the connections back to the pool so after 6 videos load it just gets completely stuck!

See bug report : https://code.google.com/p/chromium/issues/detail?id=468930

回答2:

If you want to load more than 6 videos in chrome, you need to use the .webm format.

Note: If you have a bunch of sources in your video tag, like so:

<video width="320" height="240" controls autoplay>
    <source src="vid.webm" type="video/webm">
    <source src="vid.mp4" type="video/mp4">
</video>

I think chrome will default to mp4 and not webm. You'll have to do some jquery magic to get it working. Advice on that can be seen here.

来源：https://stackoverflow.com/questions/16443105/load-only-metadata-from-html5-video-audio