Parar la descarga de un vídeo en HTML5

Cuando cargamos un vídeo en HTML5 el navegador buscará el origen del vídeo, comprobará si puede visualizar el tipo de vídeo que se le indica como origen y validará si los codecs son correctos. Una vez hecho eso empezará la descarga del vídeo, es decir, empezará a descargar el contenido del vídeo hasta el final del mismo.

Pero qué pasa si no queremos seguir visualizando el vídeo, si queremos parar la descarga con el fin de que no se consuma ancho de banda de nuestra conexión.

Usando el método pause

Veamos cómo hacerlo. De primeras veremos que en el DOM nos encontramos el elemento HTMLMediaElement con un método .pause(). Si ejecutamos dicho método solo pararemos la ejecución del contenido multimedia, pero no se parará la descarga del vídeo, es decir, la imagen la veremos congelada, pero el navegador seguirá descargándose el contenido.

var video = document.getElementById("mivideo");
video.pause();

Desasignando el atributo src

Pero para poder parar la descarga de un vídeo en HTML5 no nos valdrá solo con el método .pause(), si no que tenemos que jugar con el atributo .src, al cual desasignaremos el valor, es decir, le daremos el valor de una cadena vacía. Una vez parado el vídeo y desasignado el valor de su atributo .src conseguiremos parar la descarga.

var video = document.getElementById("mivideo");
video.pause();
video.src = "";

Caso especial de Firefox

En el caso de Firefox no sirve solo con desasignar la cadena .src, si no que tendremos que realizar la carga del nuevo valor mediante el método .load(). Esto producirá que se envíe el evento abort del HTMLMediaElement. Si bien habremos conseguido parar la descarga de un vídeo en HTML5.

var video = document.getElementById("mivideo");
video.pause();
video.src = "";
video.load();