• 投稿者サムネイル画像 フロンティアビジョン
    • #HTML・CSS

はじめまして。若水です。現在コーディングを学んでおります。
まだまだ、先輩方に比べると月とすっぽんなのでがんばります!!
みなさん応援してください。

suppon01

※画像に他意はありません。

videoタグにチャレンジ

さて、今回はhtml5で使用可能になった、videoタグにチャレンジしようと思います。

[html]
<video src=”なんちゃら.mp4″ width=”450″ height=”350″ autoplay loop>
</video>
[/html]


こちらでMP4対応のブラウザでしたら動画を見ることができます。(見れない方は別のブラウザをお試しください。)
※なんちゃら部分はパスを記入ください。
autoplayなど自動再生させたり、loopで繰り返す属性などがありますが、使い方はほとんどimgタグにそっくりで簡単ですね。
ちなみに動画はスマートフォンで撮影したものです。

各ブラウザに対応!!

しかし、一部のブラウザではMP4形式の動画を見ることができません。(FirefoxやOperaなど)
なので、以下のように記述することで、MP4に対応していないブラウザでも
動画を見ることができるようになります。

[html]
<video width=”450″ height=”350″ autoplay>
<source src=”なんちゃら.mp4″>
<source src=”なんちゃら.webm”>
</video>
[/html]

Web Mという動画形式こちらはFirefox、Google Chrome、Operaでも利用可能です。
これでほぼ全てのブラウザで動画を見ることが可能になります。
※バージョンによっては見ることができません。

以下サイトを参考にさせていただいています。
自分よりもはるかにわかりやすく書かれています。
背景に動画を使ったWebサイトの作り方
videoタグを使って、Flash無しでビデオ再生
videoタグを使って動画を再生する

video最後に

以上
videoタグを使ってみよう!!でした。
動画を使ったサイトが増えていますし、どんどん新しい技術を吸収して
いろんなことにチャレンジしておくと「いざやろう!!」ってなった時に
入りやすいと思うので、チャレンジ精神を大事にして今後も精進しようと
思います。

ご覧いただき、ありがとうございました。