HTML5レベル2 勉強メモ: マルチメディア

video要素

video要素の特徴:
・HTML5で追加された要素
・width, height属性を指定できる
・controls, autoplay, loop属性を指定できる

・track要素をを書けば字幕や説明、キャプションなどが付けられる
・source要素を書けば、複数の動画ファイルを指定できる
　-> 複数のファイルを指定すると、ブラウザの対応状況を判断し、
　　　最も適切な動画を「1つ」再生する

・対応する形式のファイルがない場合、「poster属性」に指定した画像ファイルが表示される

・ブラウザがvideo要素に対応してない場合、「要素内の文字列が表示」される




ファイル形式とMIMEタイプ
.mp4 video/mp4
.ogv video/ogg
.webm video/webm
.mov video/quicktime

<video width="300" height="300" poster="images/fail.png" controls autoplay>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
    お使いのブラウザに対応していません
</video>

audio要素

audio要素の特徴:
・HTML5で追加された要素
・video要素同様に、controls, autoplay, loop属性を指定できる
・muted属性を指定できる

・video要素同様にsource要素で再生候補を複数指定できる 　
　　後はブラウザの状況に最も適しているファイルが再生される

・ブラウザがaudio要素に対応してない場合、「要素内の文字列が表示」される

video要素とaudio要素の共通点

・autoplay, loop, controls属性を指定できる
・source要素で再生候補を複数指定できる
　後はブラウザの状況に最も適しているファイルが「1つ」再生される
　(複数再生されることはない)
・ブラウザが要素に対応してない場合、「要素内の文字列が表示」される