JavaScriptでメディア読み込み！load()メソッド徹底解説

JavaScriptでメディアコンテンツを扱う際、「Uncaught (in promise) DOMException: The element has no supported sources.」というエラーに遭遇することがあります。このエラーは主にメディア要素（audio/video）のソースが正しく設定されていない場合に発生します。

今回は、このエラーの解決方法とload()メソッドの正しい使い方について詳しく解説します。

エラーが発生する主な原因

1. ソースパスの誤り

2. サポートされていないファイル形式

3. load()メソッドの呼び出しタイミング

解決方法

1. ソースパスを確認する

const video = document.querySelector('video');
video.src = './assets/sample.mp4'; // パスが正しいか確認

パスが正しいことを確認し、必要に応じて絶対パスに変更することで解決できる場合があります。

2. 対応フォーマットの確認

// 複数のフォーマットを指定する例
const video = document.querySelector('video');
video.innerHTML = `
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
`;

3. load()メソッドの正しい使用方法

const video = document.querySelector('video');
video.src = 'sample.mp4';
video.load(); // srcの設定後にload()を呼び出す

// 非同期での処理例
video.addEventListener('loadeddata', () => {
  console.log('動画の読み込みが完了しました');
});

load()メソッドのベストプラクティス

async function loadMedia() {
  const video = document.querySelector('video');
  
  try {
    video.src = 'sample.mp4';
    await video.load();
    console.log('メディアの読み込みに成功しました');
  } catch (error) {
    console.error('メディアの読み込みに失敗:', error);
  }
}

エラーハンドリング

video.addEventListener('error', (e) => {
  console.error('メディアの読み込みエラー:', e.target.error);
});

パフォーマンス最適化のヒント

• メディアの事前読み込みを制御する

video.preload = 'metadata'; // メタデータのみ先読み

• 適切なタイミングでload()を呼び出す

document.addEventListener('DOMContentLoaded', () => {
  const video = document.querySelector('video');
  if (video.readyState === 0) {
    video.load();
  }
});

まとめ

• エラーの主な原因はソースパスの誤りや非対応フォーマット

• load()メソッドは、ソース設定後に呼び出す

• エラーハンドリングを適切に実装することが重要

• パフォーマンスを考慮したメディア読み込みの実装が望ましい

これらの対策を実装することで、メディアの読み込みエラーを効果的に解決し、安定したメディア再生を実現できます。