STAFFBLOG スタッフブログ

videoタグを使ってみよう!!

wakamizu-fvs
2014/11/11
閲覧所要時間:約2

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

suppon01

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

さて、今回はhtml5で使用可能になった、videoタグにチャレンジしようと思います。
<video src="なんちゃら.mp4" width="450" height="350" autoplay loop>
 </video> 



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

各ブラウザに対応!!

しかし、一部のブラウザではMP4形式の動画を見ることができません。(FirefoxやOperaなど)
なので、以下のように記述することで、MP4に対応していないブラウザでも
動画を見ることができるようになります。
<video width="450" height="350" autoplay>
  <source src="なんちゃら.mp4">
  <source src="なんちゃら.webm">
</video>

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

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

video最後に

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

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

関連記事

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介