반응형
1. audio 태그를 사용하여 배경음악 또는 비디오를 넣는다.
<audio id="player" controls autoplay src="bg.mp3" autoplay="autoplay"></audio>
2. 컨트롤 버튼
<a id="btn_player">click me</a>
3. 스크립트 삽입 (2번의 버튼을 클릭하면 재생/일시정지 번갈아 가면서 작동함)
var video = document.getElementById("player");
$("#btn_player").click(function(e){
if(video.paused==true){
video.play(); //재생
}else{
video.pause(); //일시정지
}
});
video.addEventListener("ended", function(){
//끝났을 때
});
개별버튼
재생, 일시정지, 음소거 각각 버튼을 넣고 싶을때는 아래 코드를 이용하면 된다.
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button>
반응형
'개발 > js·jquery' 카테고리의 다른 글
[jQuery] 날짜선택 플러그인 DatePicker 옵션 (0) | 2023.09.12 |
---|---|
[jQuery] 결과값 숫자로 보여주기 (숫자에 콤마 찍기) (0) | 2023.06.05 |
jQuery 오류 - The page at '<URL>' was loaded over HTTPS, but requested an insecure script '<URL>' (0) | 2023.05.04 |
[jQuery] Uncaught TypeError: $(...).sortable is not a function 오류 해결 (0) | 2023.04.27 |
[jQuery] Swiper Options 자주 사용하는 옵션 (0) | 2023.04.27 |
[jQuery] 스크립트로 배경 이미지 변경하기 (background-image) (0) | 2023.02.22 |
사업자번호 유효성/폐업여부 확인 (자바스크립트, 공공데이터포털 API) (0) | 2023.02.17 |
[오류] Swiper 오류 해결 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. (0) | 2023.02.08 |