Downloading large video files using xhr in Chrome through JavaScript

There is a known issue causing Chrome tabs to crash when attempting to download large files (>50-80 Mb) using an ajax request (source: http://code.google.com/p/chromium/issues/detail?id=138506).

Although Chrome is the only browser currently supporting the FileSystem API (http://www.w3.org/TR/file-system-api/), I am required to use it.

How can I successfully download a large movie file to display in a <video> element?

Could you provide me with some code samples to achieve this?

Answer №1

I successfully developed a JavaScript chunkloader implementation that functions effectively. This implementation relies on server-side code to provide both the chunk count and the actual chunks themselves. The client-side code has been tested and performs well.

If you'd like to review the code or suggest any improvements, please feel free to fork, copy, or share it: https://github.com/bux578/chunkload.js

Answer №2

As per the linked issue, it seems to be a memory limit problem, which can be encountered in any browser with limited memory.

In Chrome, the issue lies in the fact that the XHR does not generate an exception, making it impossible to catch and handle the error. Therefore, it seems that the only solution may be to increase the available memory.

The File API is fully supported in Firefox, Chrome, Safari, and Opera, with partial support in IE10:

http://caniuse.com/fileapi

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The absence of the 'Access-Control-Allow-Origin' header is reported even though it is actually present

I have been attempting to send a POST request from one website to my own site. Despite allowing CORS access explicitly, every time I try to make the actual POST request, I am faced with the No 'Access-Control-Allow-Origin' header is present on th ...

Looking for suggestions on how to bring this idea to life

I'm searching for a solution using JavaScript, jQuery, or Angular. I've created three random arrays like this: for example: (The values are randomly generated from the array ['member', 'medical', 'rx', 'disabi ...

Dynamically injecting a JavaScript script within a Vue.js application

Is there a way to dynamically load a JavaScript script within a Vue.js application? One approach is as follows: <script async v-bind:src="srcUrl"></script> <!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10 ...

Issue with Redirecting in React: REST requests are not successful

There's a text input that triggers a submission when the [Enter Key] is pressed. const [ query, setQuery ] = React.useState('') ... <TextField label="Search Codebase" id="queryField" onChange={ event => setQuery( ...

SCALA Lift - Incomplete parameter type declaration for expanded function

Let me walk you through the structure of my form: <form class="lift:form.ajax"> <div class="lift:StreamInput"> <input type="hidden" name="user" value="USER" /> <input type="hidden" name="room" value="ROOM" /> ...

The AJAX request is failing to send the most recent data for processing on the server side

Recently, I created a server-side processing script for datatables v1.10.0 that has been giving me some trouble. The server needs the product id to fetch records from the database, which it gets from a select2 plugin based selector selection. However, I ha ...

Exploring methods to deactivate specific dates within the angular material datepicker

Is it possible to prevent specific dates from being selected based on the current date? For example, if today is 8/1/16, I would like to disable the next 4 days (any number of days could be chosen), excluding weekends. So, if today is 8/1/16, I would want ...

AJAX and Java combination causing issues with logging out in the system

I am working with AJAX using jQuery to trigger a function when clicking a link with the ID logOut. Here is the AJAX code: $("#logOut").click(function(){ $.ajax({ url: "Logout" }); }); This AJAX function calls my Java Servlet shown below: /** ...

Utilizing AJAX calls reminiscent of Facebook's functionality

I'm considering creating a small social network for a test project and I'm wondering how I can incorporate periodic ajax calls similar to Facebook. I would like to be able to update news, status updates, and more. Can anyone provide insight on ho ...

Add the item and increase its value within an array using AngularJS

http://plnkr.co/edit/NDTgTaTO1xT7bLS1FALN?p=preview <button ng-click="addRow()">add row</button> <div ng-repeat="row in rows"> <input type="text" placeholder="name"><input type="tel" placeholder="tel"> </div> I am cur ...

Suggestions for deleting browser cache programmatically by utilizing JS or HTML

Having trouble clearing the Chrome browser cache using Add-ons. Working on a site development project using JSP with Java, it's crucial for security reasons to clear the cache. Tried multiple methods but none have been successful. Any suggestions? Ple ...

Connecting Lavarel Pusher Socket in NUXT with SSR Mode

Looking to establish a connection between the Laravel Pusher Socket and NUTX.js (SSR Mode) Application. The code snippet above adds the socketio.js plugin file, but it seems to be causing some issues. Can anyone point out what might be going wrong? And ...

Continuing a discussion in Bot Framework leads to an error: Unable to execute 'set' on a proxy that has been invalidated

I've been exploring the Microsoft Teams Bot Framework samples, specifically diving into bot-conversation. The source code for this can be found here. My goal is to send user messages to a backend server using a websocket and then post a response mess ...

The selection box for cities is not filling in with options

I am working on a dynamic city loading feature for a select tag in HTML. After selecting a state, I want to load the cities using an ajax call. While I am successfully logging the returned data to the console, I am struggling with populating the select op ...

Determine the time left and check the speed of file uploads using ajax with jquery or javascript

Here is a snippet of code using jQuery.ajax to handle file uploads with progress tracking functionality. The function updates the DOM elements with information about bytes uploaded, total bytes, and percentage completed. However, I am looking for addition ...

What steps are involved in enabling Server Side Rendering with Next.js?

For my exploration of Next.js, I started by setting up a new Next.js project and incorporating code to retrieve weather data: export default function Home() { const [data, setData] = useState(null); useEffect(() => { fetch("https://api.we ...

Encountering difficulties running local Selenium tests on Mac using Chrome

While attempting to run Chrome tests locally on a Mac (El Capitan), I have encountered an issue. Although I can successfully invoke Chrome using remote webdriver, I am unable to run the tests directly without the remote webdriver. The error message I recei ...

Managing changes to object properties in Angular

I am encountering a situation where I have an object containing both an 'id' and 'name' property, structured like this: function format(id){ return '(' + id + ')'; } function MyObject(id){ this.id = id; this. ...

What is causing this particular area to remain unaffected by the blur effect?

issue I followed a tutorial to create a mouse trailer from this video - https://www.youtube.com/watch?v=kySGqoU7X-s. However, when I tried adding text and other elements inside a div, the blur effect just didn't show up. I attempted using z-index but ...

Changing the key name for each element in an array using ng-repeat: a guide

In my current project, I have an array of objects that I am displaying in a table using the ng-repeat directive. <table> <thead> <tr> <th ng-repeat="col in columnHeaders">{{col}}</th> //['Name&apo ...