Media(audio / video / iframe)

<audio src="./music/jazz.mp3" controls autoplay loop muted preload="metadata"></audio>

controls

controls : 위와 같은 조작 메뉴를 띄움

autoplay : 해당 페이지에 접속하면 자동 재생

loop : 반복재생

muted : 음소거 상태에서 시작

preload : 실행전 가져올 data(metadata가 무난)

 

<video src="./video/testv.mp4" poster="images/gob1.jpg" width="500px" height="300px" controls autoplay loop muted preload="metadata" ></video>

 

video

poster : 재생전 썸네일 이미지

width/height : 영상 창 크기 지정

나머지는 audio와 동일

 

<iframe width="779" height="438" 
        src="https://www.youtube.com/embed/Y-JQ-RCyPpQ" 
        frameborder="0" allow="accelerometer; 
        autoplay; 
        encrypted-media; 
        gyroscope; 
        picture-in-picture" allowfullscreen>
</iframe>

iframe - youtube

외부 사이트의 컨텐츠를 가져오는 것으로 

유튜브의 경우 동영상에 우클릭을 하면 

iframe 정보를 주므로 그대로 붙혀넣으면 된다.

(일부 사이트는 불가)