Videoタグでのhtml5時代の動画配信とIE対応STACKSTOCK日々の出来事や感じた事、学んだ事を蓄積(STOCK)して積み上げ(STACK)てますVideoタグでのhtml5時代の動画配信とIE対応2013年03月19日html5を使用してWebページを制作することは特に難しいことではなくなってきていますよね。IEでもちゃんと表示されるし。僕は案件でも自分のサイトでも基本的にhtml5で記述しています。VideoとかAudioとかのマルチメディアタグは一時期「コーデックで色々問題が」とか「IEで...」とかの話が前面に出てた気がしてて僕はほとんど使ったことがありませんでした。そんな中、Videoを使う必要があって調べてみたら意外といけることが分かったのでメモしておきますね。属性に動画ファイルを記述します。タグ内にメッセージを表示さる事が出来ます。タグが正常に動作しないので、その場合は基本的には上記対応なんですが、どうしてもIEで見たい場合は以下のJSを記述して、FlashPlayerで対応してもらう事が可能です。src="http://api.html5media.info/1.1.4/html5media.min.js"></script>詳しくはこちらに。コリス動画ファイルを複数使う場合ブラウザの対応状況によっては動画ファイルのコーデックに制限がありますので、1ファイルだけで全ブラウザに対応することが出来ません。動画なので、再生・停止・巻き戻し・ボリューム操作とかはユーザーが制御できるようにしたいですよね。mp4a.40.2"'><video>自動で再生する自動で再生させたい場合ってレアケースだと思うんですけどどうですかね。あぁ、でもサイトのBGM的に流したい場合もあるんですかね。用途は色々で、仕様としては作っておくのがスタンダードですよね。属性を記述して、ページの読み込みと同時に動画を再生させることができます。タグで指定された場合、ページの読み込みと同時に動画ファイルの読み込みも開始します。指定すればプリロードをしなくなります。指定すれば再生時間・動画サイズ等のメタデータのみ読み込みを行います。mp4a.40.2"'><video>サイズの指定IEで表示される代替動画用にサイズの指定をしておくとなお良いかもですね。CSSで指定していれば不要ですが、念のため。mp4a.40.2"'><video>おわりに動画を効果的に使えば文章では中々伝えにくいことが簡単に伝えることも出来るし、雰囲気を伝えたい場合も効果的ですよね。一昔前だと商品の説明動画が多かったですかね。今はアプリの解説に動画が使われているケースが多く、アプリの操作というより、「このアプリをこう使うとこういう風に生活が変わる」といった感じのユーザー体験を動画で紹介しているコンテンツが増えたんじゃないかなぁという感じですね。Webの制作スキルの一環として動画のクオリティも重要になってきていると感じる昨今、Webディレクターが動画制作に関わる事も多いんじゃないかと思います。そんな自体にも対応できるよう、動画制作のスキルも身につけていきたいなぁと思う今日この頃です。http://t.co/HtGeRAipFmReplyトラックバック/ピンバックはありません。音楽系copyright@STACKSTOCK。