html5のvideo audio タグ

webでの動画公開は、adobeのflashを使うのが一般的でした。ブラウザに、adobeのflashプレーヤーをアドインすれば、どんなブラウザでも動画が再生できます。この形式の動画は、簡単に作れるので、一時はページの動画要素は殆どflashでした。 しかし、このflashにappleのスティーブ・ジョブス氏がクレームを付け、iphone・Androidなどの携帯端末が非対応になり、PC用のブラウザでも対応しないものが出てきて、急速に使えなくなってきました。Win坊もflashスキルを勉強し、気に入って使っていましたが、タブレットで見られない動画では意味がありません。仕方なく、動画はyoutube経由に切り替えていました。

html5という新しい規格は、Xp廃止の原動力にもなりました。Xpのインターネットエクスプローラー(8以下)では見られないページも、増えています。html5の目玉は、jpeg画像のようにファイル名を指定するだけで、mp4動画が表示できます。どうせXpは無視されるのなら、html5の新しい規格 をテストしました。このページは、IE10以上・または Chromeで見てください。

◆VIDEOタグ

1965年秋に録音したテープが出てきました。これを古い写真でスライドショー動画を作り、Videoタグで表示しました。
もっとも簡単なタグを使っています。
<video controls poster="1965Guiter.jpg" width="640" height="360">
<source src="1965Guiter3.mp4">
<p>お使いのブラウザは、html5に対応していません。動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
のようなタグで構成されています。
 

 



◆AUDIOタグ

同じく、曲ごとのmp3ファイルを埋め込みました。タグは、<audio src="PipeLine.mp3" controls>の形式です。

Pipeline
Bulldog
10番街の殺人
DiamondHead
WalkDontRun64
Yellow Bird
The Rising sun
DrivingGuiter
Runaway
ビートルズ日本公園

それぞれ、右クリックで動画・音源がコピーできます。