学科 WEB動画基礎

-本日のアジェンダ-

1限目
学科 WEB動画基礎
WEB動画について

2限目
学科 WEB動画基礎
WEB動画について

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

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

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

本日のテーマ

「動画」の利用法と活用法

YouTubeにつて

YouTube ( ユーチューブ ) は、アメリカ合衆国・カリフォルニア州サンブルーノに本社を置く世界最大の動画共有サービス。Youは「あなた」、Tubeは「ブラウン管(テレビ)」という意味である。

videoとiframeタグ

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

①videoタグを使用する(動画ファイルをアップロードして読み込む

<video src="sample.mp4"></video>
<video>
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
<video>タグの属性
「controls」「loop」「autoplay」「muted」「width」「height」を指定してみましょう。

記述例>
<video controls loop autoplay muted width="500px" height="300px">

②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></iframe>

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

SNSの埋め込み方