ホーム > カテゴリ > HTML5・JavaScript >

MEDIA12899: オーディオ/ビデオ: 不明な MIME の種類です。

Internet Explorerで音声、動画ファイルを再生する際に発生する「MEDIA12899: オーディオ/ビデオ: 不明な MIME の種類です。」のエラーを回避する方法をご紹介します。

エラーの原因

「MEDIA12899」のエラーの原因は「サーバー側」または「JavaScript」でMIMEタイプを設定しない事により発生するエラーとなります。

ただ、面白いことに「IE11」にWebmプラグインをインストールして「Webm動画」を読み込むと1回目はエラーは発生しません。2回目に他の「Webm動画」を読み込むとこのエラーが発生します。IEのロジックが意味不明です＾＾；

JavaScriptでエラーとなる例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var src_video;
 
window.onload = function(){   
  src_video= document.getElementById("SrcVideo");
}

function onAddFile(event) {
  var files = event.target.files;;
 
  if (files[0] != undefined){    
    src_video.onerror = function(e){
      alert('このファイルは読み込めません。');
    };   

    src_video.src = URL.createObjectURL(files[0]);
  }
  document.getElementById("inputfile").value = '';  
}      
</script>
</head>
<body>
<input type="file" id="inputfile" accept="video/mp4,video/webm,video/ogg" onchange="onAddFile(event);" style="padding:0;width:240px;">
<br><br>
<video id="SrcVideo" controls width="480"></video>
</body>
</html>

問題の箇所は20行目の「URL.createObjectURL」です。ここで明示的にMIMEタイプを指定するとエラーは発生しません。

そのサンプルコードは次の節をご覧ください。

JavaScriptでエラーにならない例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var src_video;
 
window.onload = function(){   
  src_video= document.getElementById("SrcVideo");
}

function onAddFile(event) {
  var files = event.target.files;;
 
  if (files[0] != undefined){    
    filename = files[0].name;
    src_video.onerror = function(e){
      alert('このファイルは読み込めません。');
    };   

    // 拡張子の取得 
    var ext = filename.split('.');
    ext = ext[ext.length-1].toUpperCase();
    
    // MIMEを指定して動画を読み込む
    var mime = "video/mp4";
    if(ext == "WEBM"){
      mime = "video/webm";
    }else if (ext == "OGG" || ext == "OGX" || ext == "OGV"){
      mime = "video/ogg";
    }               
    src_video.src = URL.createObjectURL(new Blob([files[0]], { type: mime }));
  }
  document.getElementById("inputfile").value = '';  
}      
</script>
</head>
<body>
<input type="file" id="inputfile" accept="video/mp4,video/webm,video/ogg" onchange="onAddFile(event);" style="padding:0;width:240px;">
<br><br>
<video id="SrcVideo" controls width="480"></video>
</body>
</html>

26行目から32行目でファイルのMIMEを指定からcreateObjectURLでURLオブジェクトを生成しています。

このようにするとIEでエラーは発生しません。

以上です。





関連記事


前の記事：zlib.js 0.2.0のzip.js/zip.min.jsのバグの修正[ZIPファイルの破損]
次の記事：OpenToonzの入射光エフェクトをJavaScriptに移植する[C++/OpenCV]

公開日：2016年05月02日
記事NO：01931


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律