15

I'm working out details on a web application which involves the sequential loading of a long series of (very short) video clips, one after the other, with occasional input from the user establishing new directions for which video clips to load.

I would like to be able to have the browser preload the video clips five at a time. However, the way that we currently have the site working is by means of a single video element which is having its src attribute continually updated through JavaScript.

Is there a straightforward way I can get the browser to preload multiple video clips even though I am ultimately loading them all (one at a time) into the same video element?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
S P
  • 231
  • 1
  • 4
  • 8
  • 4
    Very well phrased, very clear. Welcome to Stack Overflow! – Paul D. Waite Sep 10 '10 at 11:16
  • Thanks! I wasn't sure if the question was too vague or general. – S P Sep 11 '10 at 19:03
  • i am trying to do something similar think i might be close. this api really helps see the inner workings and how to use them post back when i am done – PeaceLoveFamily Jan 06 '12 at 20:13
  • Were you able to accomplish what you wanted? I'm trying to do something similar and I wonder if you can force browsers to cache video in a predictable way. Would appreciate any experience you share... – Dmitry Pashkevich Jun 14 '12 at 14:49

2 Answers2

3

You can preload images in browsers by creating an <img> tag in JavaScript, and setting its src attribute. Although it’s not required by any spec, all browsers then download the image and cache it (assuming their caches haven’t been disabled).

I’ve no idea if that works with the <video> element in HTML5, but it might do. Could you give it a go?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • I have tried something similar, but my problem is that the page is designed to only have one – S P Sep 11 '10 at 18:57
  • I should explain that the video element in question is basically the entire page. I guess I need a way to tell the browser to grab a set of files and cache them until it is time to load them into the video element one at a time. And I need it to happen in JavaScript because the needed files change based on user input. – S P Sep 11 '10 at 19:01
  • 2
    @Sergio1132: ah, so the browser doesn’t seem to be caching the video files. In that case, I think you’ll have to change your approach — create additional ` – Paul D. Waite Sep 13 '10 at 14:12
  • 1
    Thanks, I ended up doing something along these lines. I'm using multiple hidden – S P Sep 17 '10 at 20:40
  • @Sergio1132: ah, good stuff. Out of interest, what’s the advantage of having a `` element involved as opposed to just showing and hiding the ` – Paul D. Waite Sep 19 '10 at 13:21
  • @Paul D. Waite: Well, for switching between the videos I don't think there is an advantage, but the site will have a minimal text interface that is laid over the video and I thought having the whole thing be a `` element might make it possible to do some interesting things. Right now we are just using css positioning to lay the interface over the video, but I was thinking that if we draw the interface onto the canvas along with the video then it opens up the possibility of having the interface subtly interact with the video underneath it, using various `` methods. – S P Sep 19 '10 at 15:26
  • @Paul D. Waite: I'm still testing to see how it performs, and if there is an apparent performance issue with the `` intermediary then we will probably just show and hide the ` – S P Sep 19 '10 at 15:28
  • @Sergio1132: ah yes I see, neato. Well worth some experimenting. – Paul D. Waite Sep 20 '10 at 07:43
-2

I was curious if you happened to finish the project you were working on? I am experimenting with an html5 video player with a playlist and was wondering if you ran into any big problems. Were there performance issues with loading/playing multiple video files? Were you able to run this on an iPad? Did you have a fallback for IE?

My approach was going to be: have a single <canvas> element with multiple hidden <video> elements and use the canvas drawImage() function to display and crossfade between videos.

Christopher Hall
  • 5