最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Is it possible to preload and cache video files without adding them to the DOM? - Stack Overflow

programmeradmin4浏览0评论

I'm working on a game that involves trigging one of 30 small video files depending on what result you get. As the videos need to play immediately after the user interacts, ideally I'd like to have the videos preloaded and ready to go.

I've added PreloadJS, queued up all of the assets I need.

Looking at the Network tab in inspector, I can see all 20mb of videos transferring on the loading screen.

However, when it es time to play the clips, it seems to be re-downloading them rather than playing them from memory...

I thought that once the files were downloaded, they'd just stay in the browser cache, and once I tried to load a file with the same src, it would pull it from the pool of downloaded assets, but this doesn't seem to be the case...

Any idea how I can keep the downloaded files in memory without adding 30 video players to the page?

Thanks!

Ger

I'm working on a game that involves trigging one of 30 small video files depending on what result you get. As the videos need to play immediately after the user interacts, ideally I'd like to have the videos preloaded and ready to go.

I've added PreloadJS, queued up all of the assets I need.

Looking at the Network tab in inspector, I can see all 20mb of videos transferring on the loading screen.

However, when it es time to play the clips, it seems to be re-downloading them rather than playing them from memory...

I thought that once the files were downloaded, they'd just stay in the browser cache, and once I tried to load a file with the same src, it would pull it from the pool of downloaded assets, but this doesn't seem to be the case...

Any idea how I can keep the downloaded files in memory without adding 30 video players to the page?

Thanks!

Ger

Share Improve this question asked Apr 21, 2016 at 13:41 Ger CarneyGer Carney 911 silver badge2 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

You could try to load the entire file into memory using Blob and Object-URL. This way the non-attached video element can play directly via the object-URL.

If it's a good strategy in regard to system resources is of course something you need to decide yourself.

  • Load through XHR as blob
  • Create Object URL: var url = (URL || webkitURL).createObjectURL(blob);

The video is now in memory, so when you need to play it, set it as source for the video element and you should be ready to go:

var video = document.createElement("video");
video.oncanplay = ...;  // attach to DOM, invoke play() etc.
video.src = url;        // set the object URL

An object-URL is kept in memory during the life-cycle of a page. You can manually revoke it this way if needed:

(URL || webkitURL).revokeObjectURL(url);
发布评论

评论列表(0)

  1. 暂无评论