動画ファイルをコンテンツにうまく活かしたデザインを学習します。
動画ファイルの表示に関するタグや、動画ファイルの扱いについて理解することが目的です。
Contents
動画を使った魅力的なサイト
動画で紹介したサイトです。
動画を表示するタグ
<video src="動画ファイル名" controls>
<p>動画の代わりの説明文</p>
</video>動画に関する文章や、動画の代わりになる文章が必要なのは、<img>と似ています
<video controls autoplay loop muted>
<p>動画の代わりの文章</p>
<source src="mp4ファイル名" type="video/mp4">
<source src="webmファイル名" type="video/webm">
</video><source>で表示する動画ファイルが複数あると、ブラウザの互換性も高くなります。
<video>の属性に「controls」は必須で、「autoplay muted」はセットで使うといいでしょう。
動画右下の３点リーダーボタンからDLできます
Youtube動画を表示する
- [共有]ボタンを押す
- Youtubeで表示したい動画ページを表示して、[共有]ボタンを押します。
- [埋め込む]ボタンを押す
- [共有]ボタンで表示されたウィンドウから、[埋め込む]ボタンを押します。
- [コピー]ボタンを押す
- 動画の埋め込み画面に表示されたHTMLのコードを、[コピー]ボタンを押してコピーし、HTMLファイルの表示したい場所に貼り付けます。
