Youtube iframe視頻播放/單按鈕靜音。當點擊播放/靜音時切換圖像

Question

我正在嘗試爲youtube iframe製作播放/靜音過程的單個按鈕...我從堆棧中找到了一些代碼，其中包含兩個操作按鈕。但我只需要一個按鈕，點擊時聲音按鈕的圖像應該切換到靜音按鈕，視頻應該靜音。請幫我解決這個問題。 這是我的代碼：

<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(); 
    } 

    });