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

    });