HTML と JavaScript を使用してローカルメディア (ビデオとオーディオ) ファイルを再生する方法

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

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

<!DOCTYPE html>

<html>

<ヘッド>

       <メタ文字セット="utf-8">

       <title>ローカルビデオファイルを再生する</title>

</head>

<本文>

<h3><center>ビデオ再生テスト<center></h3>

<hr color="#666666">

<input type="file" id="file" onchange="onInputFileChange()">

<br/>

<video id="video_id" width="520" height="360" controls autoplay loop>お使いのブラウザは HTML5 ビデオをサポートしていません</video>

<スクリプト>

関数 onInputFileChange() {

      var ファイル = document.getElementById('file').files[0];

      var url = URL.createObjectURL(ファイル);

      コンソールにログ出力します。

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

}

</スクリプト>

</本文>

</html>

これを DemoF.html として保存し (ここでは、Web ページファイルを D:\Web Page Practice ディレクトリに配置しましたが、実際の状況に応じて決定できます)、ブラウザーで開くと、次のように表示されます。

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

<!DOCTYPE html>

<html>

<ヘッド>

       <メタ文字セット="utf-8">

       <title>ローカルオーディオファイルを再生する</title>

</head>

<本文>

<h3><center>ローカルオーディオ再生テスト<center></h3>

<hr color="#666666">

<input type="file" id="file" onchange="onInputFileChange()">

<br/>

<audio id="audio_id" controls autoplay loop>お使いのブラウザは HTML5 オーディオをサポートしていません</audio>

<スクリプト>

関数 onInputFileChange() {

      var ファイル = document.getElementById('file').files[0];

      var url = URL.createObjectURL(ファイル);

      コンソールにログ出力します。

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

}

</スクリプト>

</本文>

</html>

これを DemoG.html として保存し (ここでは、Web ページファイルを D:\Web Page Practice ディレクトリに配置しましたが、実際の状況に応じて決定できます)、ブラウザーで開くと、次のように表示されます。

「ファイルを選択」ボタンをクリックすると、「開く」ファイルダイアログボックスがポップアップ表示され、再生するオーディオファイルを読み込むことができます。

HTML と JavaScript を使用してローカルメディア (ビデオとオーディオ) ファイルを再生する方法について説明したこの記事はこれで終わりです。ローカルメディアコンテンツの HTML 再生に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSS で 2 列レイアウトを実現する N 通りの方法

>>: Chrome タブバーを実装するための CSS のヒント