YouTube iframe 동영상 재생/단일 버튼으로 음소거. 또한 클릭 재생/음소거 때 이미지를 전환하십시오

Question

YouTube iframe에 대한 재생/음소거 프로세스를 위해 하나의 버튼을 만들려고합니다 ... 두 작업에 대해 2 개의 버튼이있는 스택에서 일부 코드를 발견했습니다. 하지만 하나의 버튼 만 있으면 클릭 할 때 사운드 버튼 이미지가 음소거 버튼으로 전환되고 동영상이 음소거되어야합니다. 이 문제를 해결할 수 있도록 도와주세요. 이 내 코드입니다 :

<iframe id="youtube_player" width="0" height="0" src="https://youtube.com/embed/dT6Z4_lxx7Q?enablejsapi=1;rel=0&amp;controls=0&amp;showinfo=0;autoplay=1&loop=1&playlist=dT6Z4_lxx7Q" allowscriptaccess="always" frameborder="0"></iframe> 

<a id="play" href="#"><img src="sound.png" width="60px" height="60px"></a> 
<a id="mute" href="#"><img src="mute.png" width="60px" height="60px"></a> 

Answer 1

이 기다리고 미안 그것을있다 ...

CODEPEN 링크 : http://codepen.io/bra1N/pen/bZjJzQ

HTML :

<div id="player"></div> 
<div id="pauseplay">PAUSE</div> 

CSS :

#player{ 
    width: 400px; 
    height: 200px; 
} 

#pauseplay{ 
    cursor: pointer; 
    background: cyan; 
    color: white; 
    padding: 12px 20px; 
    width: 100px; 
    text-align: center; 
    font-weight: 700; 
} 

JS는 :

// 2. This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 

    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // 3. This function creates an <iframe> (and YouTube player) 
    // after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
    event.target.playVideo(); 
    } 

    // 5. The API calls this function when the player's state changes. 
    // The function indicates that when playing a video (state=1), 
    // the player should play for six seconds and then stop. 
    var done = false; 
    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     //setTimeout(pauseVideo, 6000); 
     done = true; 
    } 
    } 
    function pauseVideo() { 
    player.pauseVideo(); 
    } 

function playVideo() { 
    player.playVideo(); 
    } 


    $('#pauseplay').on('click', function(){ 
    if($(this).hasClass('paused')){ 
     $(this).removeClass('paused'); 
     $(this).text('PAUSE'); 
     playVideo(); 
    } else { 
     $(this).addClass('paused'); 
     $(this).text('PLAY'); 
     pauseVideo(); 
    } 

    });