イトウ先生のTipsnoteDreamweaver CS6・HTML5ビデオ

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 10月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Dreamweaver CS6の新機能:その4 〜 HTML5ビデオの機能 〜 】 

今週は、Dreamweaver CS6の新機能から、HTML5ビデオの機能をご紹介します。
HTML5に対応しているDreamweaver CS6では、videoタグを使用して簡単にビデオを挿入することが可能です。

ビデオファイルとして用意しておくビデオソース

ビデオファイルは、閲覧するブラウザによって表示可能なコーデックが異なっています。そのため、どのブラウザを使用して閲覧しても表示されるよう、ブラウザに合わせて複数のコーデックのビデオを用意しておく必要があります。Chrome、IE9、Safariが対応している形式はH.264形式、FirefoxとOperaはTheoraまたはVP8(WebM)となり、これらをMP4、Ogg、Matroska等のコンテナで圧縮し、複数のsourceタグ、src属性で呼び出す、という形になります。

挿入パネルから

ビデオの挿入は挿入パネルから行います。なお、Dreamweaver CS6は、アップデート以前のCS6と、アップデート後では挿入パネルの表示が微妙に異なります。

Blog_DWCS6_video121

HTML5化

videoタグは、HTML5で使用するため、<!DOCTYPE>宣言もHTML5にしておきます。HTML4.01やXHTMLのファイルは、ファイルメニュー→変換→HTML5で、HTML5にしておきましょう。

Blog_DWCS6_video123

プロパティパネルから

挿入パネルからHTML5ビデオの挿入後、実際のビデオソースを入れる場合は、プロパティパネルのソースから行います。ファイルパネルからビデオソースをドラッグアンドドロップすると、単にaタグのリンクとしてドロップされます。また、アセットパネル内では、表示内容をビデオのソースが表示されないようです。

Blog_DWCS6_video124

Blog_DWCS6_video125

左右の位置は挿入パネルからDivで

ビデオの位置をセンターに配置する場合は、videoタグやsourceタグそのものをセンターにするのではなく、挿入パネルからDIvを選択し、選択範囲の周囲で折り返しにして、videoの親要素としてDivで包み、そのDIvをセンターにするようにします。また、ビデオはブラウザでプレビューすることなく、ライブビューでビデオの閲覧が可能です。

Blog_DWCS6_video128

Blog_DWCS6_video131

代替ソース

他のコーデックのビデオを指定しておく場合には、プロパティパネルから代替ソースの箇所で指定することが可能です。

Blog_DWCS6_video132

ビデオを入れる、といっても特別に難しい操作はありませんね。
なお、HTML5で新しく追加されたaudio要素も、同じく挿入パネルのメディアからHTML5オーディオで挿入可能です。オーディオの場合もビデオのオペレーションと同じでプロパティパネルから設定していきますが、オーディオのデータもブラウザに応じて代替ソースが必要になりますので注意しましょう。WAVE(.wav)フォーマットは、Chrome、Safari、Firefox、Operaに対応し、MP3フォーマットChrome、IE9、Safariに対応しているため、オーディオデータはWAVE(.wav)とMP3を用意しておけばOKです。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |