HTML
HTML 오디오 / 비디오 태그, 유튜브 iFrame
author 관리자 date 2022-04-06 hit 323 HIT
    IT에 취.하.개.HTML 오디오 태그 (Audio, iframe) 음악 자동재생HTML 5부터 제공해주고 있는 오디오 태그가 있습니다. 오디오 태그를 이용해서 원하는 음악을 html에 넣을 수 있습니다. 그리고, audio 태그 말고 iframe 태그로도 음악을 넣을 수 있습니다. 아래에서는 태그와 태그를 살펴봅니다. 태그 사용방법은 간단합니다. 태그 안에 태그를 이용해서 원하는 음악파일을 가져오면 됩니다. 태그에는 src라는 속성이 존재하고, 값으로 음악파일의 경로(path)를 넣어주면 됩니다. The Weeknd - I Feel It Coming ( cover by J.Fla ) audio 태그를 이용한 audio 재생 - autoplay 참고로 웹 브라우저를 실행했을 때, 자동으로 음악이 나오게 하고 싶다면, autoplay속성을 넣어주면 됩니다. 그리고, controls 속..hongku.tistory.comAll-round programmer[HTML5 튜토리얼] Video와 Audio 태그 기본* 이제 html5 태그상에서 지원해주는 video와 audio에 대해서 공부해보자.2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점2012/11/05 - [HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌* Video와 Audio?: 기존의 웹이라하면 텍스트와 정보 기반으로 형성되어왔다면 이제는 다양한 창의적인 표현과 데이터 비쥬얼라이제이션과 정보를 잘 효과적으로 보여주는 것이 중요해지면서 그래프나 다양한 그래픽과 미디어들이 활용되기 시작했다. 이..unikys.tistory.com

[ 샘플 페이지 ]

http://zalnas.ipdisk.co.kr/sample_page/media_play.php

[ 샘플 코드 - [ => < 로 수정하면 됨! ] 

[audio autoplay controls src="mp3 URL" type="audio/mp3"]웹 브라우저가  HTML5 Video 코드를 지원하지 않습니다.[/audio]
[video autoplay controls src="영상 URL" type='video/mp4; codecs="avc1, mp4a"'] 웹 브라우저가  HTML5 Video 코드를 지원하지 않습니다. [/video]


코드는 심플하고 UI도 깔끔한데!
controls 속성은 잘 작동하는데 왜 autoplay 는 작동되지 않을까?
돌겠넹!

추가!
이유를 알았네!

동해둘리의 IT Studyhtml 배경음악 자동재생 ... 크롬정책변경으로 인한 대응, audio autoplay in HTMLHTML 문서가 로딩된 후에 배경음악이 자동으로 재생되게 하는 경우가 있습니다만, 2018년 1월부터 구글이 크롬브라우저에서 음악이나 영상이 자동재생 되지 않게하는 정책을 시행하게되면서 문제가 발생했습니다 예전에는 audio 태그의 autoplay 옵션을 true로 하면 자동재생이 되었지만, 최신 크롬브라우저에서는 더 이상 자동재생되지 않습니다. 이렇게 된 이유는, 무분별한 광고때문이라고 합니다. 무작위 광고와 자동재생 미디어 때문에 사용자환경이 안좋아 지게 되기 때문이라고 하는데요, 저의 경우는 온라인 학습(LMS)관련 프로젝트를 진행하고 있는데, 자동재생이 되지 않아서 각 차시별로 매번 클릭을 해야만 재생이 되는 문제가 있었습니다. 자동재생이 되는 경우는 다음과 같은 경우로 제한되고 말았습니다. 1...doolyit.tistory.com
목록보기
        X  
27  모바일 웹에서 전화걸기 태그  2022-06-08 412
 HTML 오디오 / 비디오 태그, 유튜브 iFrame  2022-04-06 323
25  테이블 투명 처리  2008-02-16 757
24  미디어 플레이어 컨트롤 (네이버)  2006-11-23 549
23  테이블작성시 고급테크닉 - padding tag  2006-06-24 571
22  레이어 스타일로 위치값 정하기  2006-05-03 516
21  iframe 사용 형식  2006-04-20 510
20  라디오 버튼 사용하기  2006-04-06 358
19  주소고정시 새로고침하면 메인으로 가는 것 방지하는 소스  2004-09-26 450
18  table , tr, td 전체를 링크거는 태그  2004-09-26 551
17  이미지 도구모음이 안뜨게 하는 태그입니다.  2004-09-26 323
16  이미지 border=0 를 한번에 제어하자  2004-09-26 274
15  링크 테두리 없애기 - 단일 링크  2004-09-09 304
14  색상표  2004-05-04 326
1 2