BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLとJavaScriptでローカルメディア（ビデオやオーディオ）ファイルを再生する方法

2022-01-21 23:05:27

最初のヒントは、JavaScriptはセキュリティ上の理由からローカルのリソースファイルに直接アクセスできないので、どうすればいいのか、ということです。ここに一つの方法があります。ページにinputノードを挿入し、タイプをファイルに指定します。複数のファイルを再生する必要がある場合は、属性multipleを追加します。ファイルノードが更新されたときにコールバック関数を登録し、コールバック関数内のURL.createObjectURL関数を呼び出して、先ほど選択したファイルのURLを取得し、オーディオまたはビデオのsrc値にそのurlをセットします。

1. HTMLとJavaScriptを使用したローカルビデオファイルの再生例 ソースコードは以下の通りです。 

<!DOCTYPE html>

<html >

<head>

       <meta charset="utf-8">

       <title>Play local video files</title>

</head>

<body>

<h3><center>Video playback test<center></h3>

<hr color="#66666666">

<input type="file" id="file" οnchange="onInputFileChange()">

<br/>

<video id="video_id" width="520" height="360" controls autoplay loop> Your browser does not support HTML5 video</video>

<script>

function onInputFileChange() {

      var file = document.getElementById('file').files[0];

      var url = URL.createObjectURL(file);

      console.log(url);

      document.getElementById("video_id").src = url;

}

</script>

</body>

</html>

これをDemoF.htmlというファイル名で保存し（ここでは、WebファイルをD: \ Web Practiceというディレクトリに置いていますが、適当に作ってください）、ブラウザで開くと、次のように表示されます。

2. HTMLとJavaScriptを使用したローカルオーディオファイルの再生例 ソースコードは以下の通りです。 

<!DOCTYPE html>

<html >

<head>

       <meta charset="utf-8">

       <title>Play local audio files</title>

</head>

<body>

<h3><center>Local audio playback test<center></h3>

<hr color="#66666666">

<input type="file" id="file" οnchange="onInputFileChange()">

<br/>

<audio id="audio_id" controls autoplay loop> Your browser does not support HTML5 audio </audio>

<script>

function onInputFileChange() {

      var file = document.getElementById('file').files[0];

      var url = URL.createObjectURL(file);

      console.log(url);

      document.getElementById("audio_id").src = url;

}

</script>

</body>

</html>

これをDemoG.htmlというファイル名で保存し（ここでは、WebファイルをD: \ Web Practiceというディレクトリに置いていますが、適当に作ってください）、ブラウザで開くと、次のように表示されます。

ファイル選択ボタンをクリックすると、再生するオーディオファイルを読み込むためのファイルオープンダイアログが表示されます。

HTMLとJavaScriptを使って、ローカルメディア（ビデオやオーディオ）ファイルを再生する方法についての説明は以上となります。HTMLを使ったローカルメディアの再生については、スクリプトハウスの過去の記事を検索していただくか、以下の記事を引き続きご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します