목차
<source> 객체 정의 - 미디어 소스 불러오기
<source> 객체 구문
<source> 객체 예제 - 접근
<source> 객체 예제 - 생성
<source> 객체 속성
<source> 객체 정의 - 미디어 소스 불러오기
HTML <source> 태그(요소) 의미.
<source> 객체 구문
[접근]
var x = document.getElementById ("요소ID");
[생성]
var x = document.createElement ("SOURCE");
<source> 객체 예제 - 접근
<audio controls>
<source id="hz" src="voice.mp3" type="audio/mpeg">
<source src="voice.ogg" type="audio/ogg">
브라우저가 audio 태그 지원 안 함.
</audio>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").src;
document.getElementById("demo").innerHTML = x;
}
</script>
<source> 객체 예제 - 생성
<audio controls id="hz" autoplay>
브라우저가 audio 태그 지원 안 함.
</audio><br>
<p id="demo"></p>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("SOURCE");
x.setAttribute("src", "voice.mp3 ");
x.setAttribute("type", "audio/mpeg");
document.getElementById("hz").appendChild(x);
var y = document.createElement("SOURCE");
y.setAttribute("src", "voice.ogg ");
y.setAttribute("type", "audio/ogg");
document.getElementById("hz").appendChild(y);
document.getElementById("demo").innerHTML = "생성완료";
}
</script>
<source> 객체 속성
media
<source> 요소의 media 속성값 설정/반환.
src
<source> 요소의 src 속성값 설정/반환.
type
<source> 요소의 type 속성값 설정/반환.
※ <source> 객체는 표준 속성/메서드 /이벤트 지원.
주소 복사
랜덤 이동