ベースのクリーンアップ-(4)メディアファイル

10500 ワード
htmlcss テキストリンク

メディアファイル(オーディオ、ビデオ)


1.オーディオタグ


audioタグ1の使用方法

<!-- audio 사용 방법1 -->
<audio
  src="./assets/audios/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp3"
  controls
  autoplay
  loop
></audio>
<属性>
1.conntrols:音量調節、区間調節などの機能を使用できます.
2.autoplay:このウィンドウをロードすると自動的に再生されます
3.loop:再生終了後に自動的に戻って再生する

audioタグ1の使用方法

<!-- audio 사용 방법2 -->
<audio>
  <source
    src="./assets/audios/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp3"
    type="audio/mp3"
  />
  <!-- mp3를 지원하지 않는 브라우저를 위해 wav 파일을 추가 -->
  <source
    src="./assets/audios/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp3"
    type="audio/wav"
  />
  <!-- 다 안되면 아래의 p태그를 보여줌 -->
  <p> 당신의 브라우저를 버리고 크롬을 사용하시는게 어떨까요? </p>
</audio>
ブラウザが特定の拡張子をサポートしていない場合は、複数のソースファイルを挿入できます.
caniuse.comでブラウザがサポートされているかどうかを確認できます.

2.ビデオタグ


基本的にaudioと同じように使えます.

ビデオタグ1の使用方法

<!-- video 사용 방법1 -->
<video
  src="./assets/videos/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4"
  controls
></video>
プロパティはaudioと同じでいいです.

ビデオタグ2の使用方法

<!-- video 사용 방법2 -->
<video autoplay loop controls>
  <source
    src="./assets/videos/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4"
    type="video/mp4"
  />
  <source
    src="./assets/videos/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mov"
    type="video/mp4"
  />
  <p> 브라우저를 크롬으로 바꾸는게 어떨까요? </p>
  <a href="https://browsehappy.com">브라우저 업데이트 하기</a>
</video>

3.iframeラベル


htmlドキュメントに他のhtmlドキュメントを埋め込むために使用します.
(手動で作成する必要はほとんどありません)

例

<iframe src="https://velog.io/@frenchkebab" frameborder="0" width="560" height="315"></iframe>

<!-- 보통 아래와 같이 복붙하여 사용 -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/roEjyglmMY8"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>
実行画面
[ALGOSPOT] BOARDCOVER
Webプログラミング(T位置1)