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

  });

Youtube iframe视频播放/静音单按钮。点击播放/静音时切换图片

1 个答案: