html Audio/Video tag

공통사항

─ 23.01.15 추가

글쓰기 ➡ 파일 업로드 ➡ html모드에서 업로드한 파일을 숨김 처리 할 것. <!--  ~blahblah~  -->
// 비공개 글로 따로 업로드 하지 않아도 되고 숨김처리를 하니 온전한 링크 주소가 생성됨.

글쓰기 ➡ 기본모드 '더보기' ➡ "< >HTML 블럭"에 태그를 기재할 것.
// html 모드에 기재시 수정할 때마다 삭제 처리되었던 (playsinline 등의 몇몇 태그) 요소들이 삭제되지 않음.

html Audio tag

<audio controls controlslist="nodownload">
  <source src="링크주소" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

야마시타 타츠로山下達郎 - 거리 이야기街物語

참고 :: https://www.w3schools.com/html/html5_audio.asp

html Video tag

<video preload="metadata" controls controlslist="nodownload" playsinline width="100%" height="auto">
  <source src="링크주소#t=0.5" type="video/mp4" />
  Your browser does not support HTML video.
</video>

"신세기 에반게리온"의 엔딩(곡이었던) 곡 - Fly me to the moon

참고 :: https://www.w3schools.com/html/html5_video.asp

Autoplay tag

<video autoplay loop muted playsinline width="100%" height="auto">
  <source src="링크주소" type="video/mp4" />
  Your browser does not support HTML video.
</video>

참고 :: IOS Safari에서 Video tag autoplay가 되지 않을 때

etc,

+ HTML 반응형 비디오 코드 동영상 모바일 적용
++ [HTML] video 태그 썸네일 설정
+++ 블로그 글에 오디오 파일 재생 기능 넣기 <<구글 드라이브 링크 활용