BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5で音声や動画を読み込むためのコード

2022-01-11 04:59:28

[I. 前書き

Flashを使用しないネイティブなオーディオやビデオのサポートを含むHTML5の機能。

HTML5の<audio>と<video>タグを使用すると、サイトにメディアを簡単に追加することができます。src 属性でメディア リソースを特定し、controls 属性でメディアの再生と一時停止ができるようにするだけです。

[II.動画の埋め込み】です。］

ウェブページに動画ファイルを埋め込む場合の最もシンプルな方法は、以下の通りです。 

<video src="img/sounds/mu04.mp3" width="300" height="200" controls>

    Your browser does not support the <video> element.   

</video>

HTML5仕様の現在のドラフトでは、ブラウザがvideoタグでサポートすべきビデオフォーマットはまだ指定されていません。しかし、最も一般的に使用されている動画形式は

Ogg。mpeg4: H.264 ビデオエンコーダーと AAC オーディオエンコーダーを使用した MPEG4 ファイルです。

メディアファイルを指定するには、メディアタイプなどの属性を持つ <source> タグを使用します。video 要素では複数の source 要素を使用でき、ブラウザは最初に認識された形式である 

<!DOCTYPE HTML>

<html>

<body>

   <video width="300" height="200" controls autoplay>

       <source src="img/sounds/3.mp4" type="video/ogg" />

       <source src="img/sounds/3.mp4" type="video/mp4" />

       Your browser does not support the <video> element.

   </video>

</body>

</html>

[III. 動画属性の仕様

HTML5 の video タグは、いくつかの属性を使用して、ルック＆フィールや様々な制御機能を制御することができます。(Baiduを参照)

[IV. エンベデッドオーディオ

HTML5でサポートされている<audio>タグは、以下のようにHTMLやXHTML文書に音声コンテンツを埋め込むために使用されます。 

<audio src="img/sounds/mu04.mp3" controls autoplay>

    Your browser does not support the <audio> element.   

</audio>

現在のHTML仕様書ドラフトでは、audioタグでブラウザがサポートすべき音声フォーマットはまだ指定されていません。しかし、最も一般的なオーディオ・フォーマットはogg、mp3、wavです。

メディアタイプなどの属性を持つ <source> タグを使ってメディアを指定します。audio 要素では複数の source 要素を使用でき、ブラウザは最初に認識された形式を使用します。 

<!DOCTYPE HTML>

<html>

<body>

   <video width="300" height="200" controls autoplay>

       <source src="img/sounds/mu04.mp3" type="video/ogg" />

       <source src="img/sounds/mu04.mp3" type="video/mp4" />

       Your browser does not support the <video> element.

   </video>

</body>

</html>

Audio属性指定

HTML5のaudioタグは、ルック＆フィールや各種制御を行うために、いくつかの属性を使用することができます。

[V. JavaScriptによるメディアイベントの処理］。

HTML5のaudioタグやvideoタグは、複数の属性を用いてJavaScriptで様々な制御を行うことができます。

以下は、指定された動画の再生を許可する例です。 

<!DOCTYPE HTML>

<head>

<script type="text/javascript">

function PlayVideo(){

   var v = document.getElementsByTagName("video")[0];  

   v.play(); 

}

</script>

</head>

<html>

<body>

   <form>

   <video width="300" height="200" src="img/sounds/3.mp4">

       Your browser does not support the <video> element.

   </video>

   <input type="button" onclick="PlayVideo();" value="Play"/>5555555555

   </form>

</body>

</html>

[VI.サマリー】をご覧ください。］

今回は、htmlの基礎をもとに、audio<audio>タグ<video>タグの一連の操作、動画の埋め込み方などを紹介します。動画を埋め込む方法とその使い方について詳しく説明しています。また、HTMLの理解を深めるために、豊富な例題を用意しています。

チュートリアルをもとに自分で属性を追加して実行すると、思いのほか成果が上がります。

HTML5を使って音声や動画を読み込むコードはこの記事が全てです。もっと関連するHTML5で音声や動画を読み込むコンテンツはスクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともスクリプトハウスをよろしくお願いします

関連

最新

おすすめ

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