メディアファイルを再生できるか確認する

ファイルのMIMEタイプから再生できるか確認する

サイトのページ上で音声や動画を再生するときに、そのメディアタイプの再生をブラウザが対応しているか調べるときはcanPlayTypeメソッドを使います。

audioElement.canPlayType('audio/mp3');

このメソッドはパラメータに「audio/mp3」などのメディアファイルのMIMEタイプを渡すと、ページを表示している環境で再生できるかどうかを調べて以下のいずれかの文字列を返します。

• 'probably' – 再生可能なメディアタイプ
• 'maybe' – メディアタイプは再生可能。ただし実際に再生してみないと分からない
• ''（空文字列） – 再生できないメディアタイプ

以下の例はaudio要素を変数audioElementに取得し、video要素をvideoElementに取得してそれぞれcanPlayTypeメソッドを呼び出して戻り値をコンソールに出力します。

以下の出力結果は2020年11月時点の最新版Chrome v86.0.4240.80で実行した結果です。
出力結果は実行するブラウザによって異なります。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const audioElement = document.querySelector("audio");
  const videoElement = document.querySelector("video");

  console.log(audioElement.canPlayType('audio/aac')); // 'probably'
  console.log(audioElement.canPlayType('audio/mp3')); // 'probably'
  console.log(audioElement.canPlayType('audio/ogg')); // 'maybe'
  console.log(audioElement.canPlayType('audio/midi')); // ''
  console.log(audioElement.canPlayType('audio/wav')); // 'maybe'

  console.log(videoElement.canPlayType('video/mpeg')); // ''
  console.log(videoElement.canPlayType('video/mp4')); // 'maybe'
  console.log(videoElement.canPlayType('video/webm')); // 'maybe'
  console.log(videoElement.canPlayType('video/ogg')); // 'maybe'
  console.log(videoElement.canPlayType('video/quicktime')); // ''
  console.log(videoElement.canPlayType('video/x-msvideo')); // ''
  console.log(videoElement.canPlayType('application/x-shockwave-flash')); // ''
});

canPlayTypeメソッドはHTMLMediaElementのメソッドであるため、audio要素やvideo要素を取得してから使いますが、src属性で読み込んだファイルのMIMEタイプとメソッドのパラメータは一致する必要はありません。
そのため、audio要素でcanPlayTypeメソッドを実行するときにパラメータを動画ファイルの形式である「'video/mp4'」を指定して再生できるか確認することも可能です。

2020年11月の各種最新版ブラウザでcanPlayTypeメソッド実行した結果は以下のようになります。

メソッドの実行結果を並べてみると、音声ファイルは「audio/aac」、「audio/mp3」、「audio/wav」の3種類、動画ファイルは「video/mp4」であればほとんどのブラウザで再生できる可能性の高い形式になります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。