投稿日:

【HTML】audio要素

HTML5で導入されたaudio要素

タグ

<audio></audio>

使い道

HTML5でaudio要素が追加されたことにより、Web上で簡単に音楽や効果音などを流せるようになりました。また、Web Audio API を使ってエフェクトフィルターや音源の分析などができ、様々な用途で活用できそうです。例えば、DTMやシンセサイザーなどのようなWebアプリを作ることもできます。

属性

autoplay
この属性が指定されている場合、再生可能状態になると自動的に再生される。
controls
この属性が指定されている場合、再生・一時停止・停止・音量などのコントロールが表示される。
loop
この属性が指定されている場合、最後まで再生されると最初に戻って自動で再生される。
muted
この属性が指定されている場合、初期状態が消音で再生される。
preload
音源の事前ダウンロードの範囲を決める。
src
音源のソースのURLを設定する。
volume
再生音量を0.0（最小）から1.0（最大）の範囲で設定する

サンプル

雨の降る音が流れますのでご注意ください。

<audio controls loop preload="auto" src="雨.mp3"></audio>

投稿日:

【HTML】video要素

HTML5で導入されたvideo要素

タグ

<video></video>

使い道

Web上で動画を再生できる。youtubeなど動画投稿・視聴サービスや、企業のHPでも背景に動画を使うなど、様々な活用がされている。また、getUserMediaを使ってデバイスからカメラにアクセスしてその映像を録画したり、送信したりすることもできる。
今後もWeb上で動画を扱うケースは増えてくると思う。

属性

autoplay
この属性が指定されている場合、再生可能状態になると自動的に再生される。
controls
この属性が指定されている場合、再生・一時停止・停止・音量などのコントロールが表示される。
height
動画の表示高さを設定する。
loop
この属性が指定されている場合、動画が最後まで再生されると最初に戻って自動で再生される。
muted
この属性が指定されている場合、動画の初期状態が消音で再生される。
poster
動画が再生されない場合にここで指定されている画像が表示される。
preload
動画の事前ダウンロードの範囲を決める。

none
動画を事前にダウンロードしない。
metadata
動画のメタデータをダウンロードする。
auto
動画の再生有無にかかわらず、ダウンロードする。
src
動画のソースのURLを設定する。
width
動画の表示幅を設定する。

サンプル

<video autoplay controls loop muted poster="cat.png" preload="auto" src="shinkansen.mp4" height="240px" width="360px" ></video>

<video controls muted poster="cat.png" preload="metadata" src="shinkansen.mp4" ></video>

投稿日:

【HTML】canvas要素

HTML5で導入されたcanvas要素

タグ

<canvas></canvas>

使い道

canvasを使って、画像やシェイプ（図形）文字の表示を簡単に行える。また、動画のキャプチャを貼り付けてキャプチャーの表示や保存を行ったり、短い間隔で貼り付けることによってアニメーションを作成することもできる。

canvasに表示されている内容を画像形式で保存することもでき、様々な活用が考えられる。

属性

  • width・・・幅の指定（初期値 width=300）
  • height・・・高さの指定（初期値　height=150）

サンプル

  <canvas style="border: 1px solid #ccc"></canvas>


  <canvas width=640 height=480 style="border: 1px solid #ccc"></canvas>