audioとvideo

音声フォーマットのいろいろ

WAV
FLAC
AIFF
Ogg
AU
AAC
mp4/m4a
MP3
WMA

1.音声の埋め込み

<audio> 要素および<video> 要素は、プラグインを必要としないオーディオやビデオの再生サポートを提供します。
ビデオやオーディオを扱うためにビデオコーデックやオーディオコーデックが使用され、コーデックにより圧縮や品質のレベルは異なります。コンテナフォーマットは、符号化されたビデオやオーディオの保管や転送に使用されます。多くのコーデックやコンテナフォーマットが存在しており、またそれらの組み合わせはさらに多く存在します。Web で使用する場合、適切な組み合わせは一握りしかありません。

HTML4の場合

HTMLタグ

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  </head>
  <body>
  <object data="URL" type="MIME Type" width="" height="">
  <param name="audio" value="URL" />
  </object>>
  </body>
  </html>

HTML5の場合

対応状況

  <!doctype html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  </head>
  <body><audio controls="controls" >
  <source src="audio/Amazing20Grace.mp3" type="audio/mp3">
  <source src="audio/Amazing20Grace.ogg" type="audio/ogg">
  <source src="audio/Amazing20Grace.wav" type="audio/wav">
</audio>
</body>
  </html>

audioのオプション

controls：コントロールパネルを表示
muted：初期状態でミュートをON
autoplay：自動再生
loop：繰り返し再生

2.動画の埋め込み

AVI
MP4
MOV
MPEG-2
MKV
WMV
FLV
ASF
VOB
WebM
OGM

すべての主要なブラウザの最新バージョンで動作する HTML5 video を作成するには、ビデオを WebM 形式と MPEG H.264 AAC 形式の両方で提供して、以下のように source 要素を使用します。
WebM：Gecko (Firefox)、Chrome、Opera でネイティブにサポート、また Internet Explorer や Safari ではアドオンを追加することでこの形式をサポート
Ogg Theora Vorbis： Gecko (Firefox)、Chrome、Opera でサポート、Internet Explorer でサポートされていない。
MP4 H.264 (AAC or MP3)：Internet Explorer 、Safari および Chrome でネイティブサポートされているが、Chromium や Opera はサポートしていない。

HTML4の埋め込み

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <object data="URL" type="MIME Type" width="" height="">
    <param name="movie" value="URL" />
    </object>
</body>
</html>

HTML5の埋め込み

  <!doctype html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  </head>
  <body><h3>ビデオ</h3>
<video width="720" height="405" controls="controls" >
  <source src="video/SampleVideo_1280x720_5mb.mp4" type="video/mp4">
  <source src="video/SampleVideo_1280x720_5mb.webm" type="video/webm">
  <source src="video/SampleVideo_1280x720_5mb.ogv" type="video/ogg">
</video>
</body>
  </html>

videoのオプション

autoplay＝自動で再生
autoPictureInPicture＝小画面再生
controls＝コントロール操作
width/height＝幅と高さ
loop＝繰り返し再生
muted＝音声
playsinline＝再生画面の領域
poster＝再生前のサムネイル画像
preload＝動画読み込み

yotube動画の埋め込み

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  </head>
  <body>
  <iframe src="//www.youtube.com/embed/th4p2YcpR8o" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  </body>
  </html>

ビデオ変換

XMedia Recode
http://www.xmedia-recode.de/

jQueryプラグイン

video.js
http://www.videojs.com/
サンプル動画