[jQUery/JS] 음악 비디오 재생/일시정지/음소거 버튼 만들기

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>