投稿者: admin

-本日のアジェンダ-

1限目
学科　WEB動画基礎①
WEB動画とは？

2限目
学科　WEB動画基礎①
Webサイトでの動画の使い方について

3限目
学科　WEB動画基礎①
課題作成

4限目
学科　WEB動画基礎①
課題作成

5限目
学科　WEB動画基礎①
課題作成

本日のテーマ

Webサイトでの動画の活用法についてです。

WEB動画について

Web動画とは、WebサイトやYouTubeチャンネルなど、オンラインでの視聴を想定した動画全般を指します。 「Webムービー」と呼ばれることもあり、目的はブランディングや商品・サービスのプロモーション、広告配信など多岐にわたります。

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「WEB動画基礎20220818.pdf」　

【動画】

• WEB動画とは？・主なWEB動画
  https://youtu.be/PArDVLEBPhg（10:33）
• WEBデザイナーが知っておきたい動画の知識とは？
  https://youtu.be/OyLqnaWkiR0（8:33）
• 5Gによるコンテンツの需要の変化・意識しておくポイント3つ
  https://youtu.be/QfoMPJhFhgM（15:28）
• 短い動画によるプロモーション活動について
  https://youtu.be/Q4XYhPLmP_4（14:50）
• Web1.0 2.0 3.0について
  https://youtu.be/h7zRKzTCjyo（10:52）
• Web3.0はどうなる？
  https://youtu.be/y4i-iecVAbs（14:29）
• 就職活動に向けてのワンポイントアドバイス
  https://youtu.be/SOLaSv0YIkQ（10:12）

VIDEOとIFRAMEタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）

①IFRAMEタグを使用する（YOUTUBEなどの動画サイトから読み込む）

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

②VIDEOタグを使用する（動画ファイルをアップロードして読み込む）

記述例
<video src="sample.mp4"></video>

参考サイト

• 【HTML】動画を扱う。HTML5から導入されたvideoタグの基本～応用について解説。
• 動画形式とその特徴について
• 高品質なフリー動画素材 – Pixabay

その他、埋め込みについては下記を参考に！

SNSの埋め込み方

本日の課題

課題提出はありません。
デザインラフを元にコーディングを進めていきましょう。