videoをpauseしてもloadは止まらない

概要

htmlのvideoタグをJavaScriptで操作する時の注意点です。
videoをpause()すると動画は停止するのですが、ロードは止まりません。複数の動画があり、一方を止めてもう一方を再生したら、両方ともロードし続ける場合があります。
videoタグの仕様を調べても解決方法は見つからず、ロードを止める方法を探すのに手間取りました。

解決方法

解決方法は以下の通りです。（解決してしまえば、納得）

• videoをpause()する。
• sourceのsrcを空にする。
• videoをload()する。

ちなみに、以下の方法はダメでした。ロードが続きます。

• srcを空にした後、load()しない。
• JavaScriptでvideoタグを削除する。

サンプルコード１

javascript

const video = document.querySelector('video');

// 再生
video.play();

// 一時停止
video.pause();

// ロードストップ
const source = video.querySelector('source');
source.src = '';
video.load();

サンプルコード２

ロードを止めた後、もう一度再生するためにsrcを扱いやすくしたサンプルです。

html

<video loop muted playsinline preload="none">
  <source src="" data-src="./mov/sample.mp4" type="video/mp4">
</video>

javascript

const video = document.querySelector('video');
const source = video.querySelector('source');

// 再生
source.src = source.dataset.src;
video.load();
video.addEventListener('canplay', () => {
  video.play();
});

// 一時停止
video.pause();

// ロードストップ
source.src = '';
video.load();

data-srcを使用するとvideoのpreloadが機能しません。もしpreloadを使いたい場合は、srcとdata-srcを両方書くか、JavaScriptでsrcの値を保持しておき、再再生時に使うと良いと思います。

おわり

再生もロードも止まるstop()が欲しいところですが、無いので自分で止めました。
こちらを参考にしました。
https://stackoverflow.com/questions/4071872/html5-video-force-abort-of-buffering