Question

JS（这是一个Youtube Api代码）

index

在HTML中我有这个图标

var tag = document.createElement('script');

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

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          videoId: 'nYSDC3cHoZs',
          playerVars: {
            'showinfo': 0
        },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'autoplay':true
          }
        });


    document.getElementById('pause').onclick = function p() {
        player.pauseVideo();
         pausebtn.src = "img/play.ico";
         return true;
    };

    document.getElementById('resume').onclick = function r() {
        player.playVideo();
         pausebtn.src = "img/pause.ico";
         return true;
    };

      }

我想在停止视频时更改暂停图标以播放图标，并且当显示播放视频图标时，此调用恢复功能。

任何想法？

由于

Answer 1

pausebtn.src pausebtn 未定义使用this.src istead

getElementById('resume')

您HTML中的#resume在哪里？据我所知，它是相同的元素（#pause）

代替：

document.getElementById('pause').onclick = function p() {
    player.pauseVideo();
     pausebtn.src = "img/play.ico";
     return true;
};

document.getElementById('resume').onclick = function r() {
    player.playVideo();
     pausebtn.src = "img/pause.ico";
     return true;
};

尝试：

var pauseBtn = document.getElementById('pausebtn');

pauseBtn.addEventListener("click", function( evt ){
    evt.preventDefault();
    var tog = this.dataset.tog ^= 1;
    this.src = tog ? "img/play.ico" : "img/pause.ico";
    player[tog ? "pauseVideo" : "playVideo"]();
}, false);

按钮播放/暂停youtube嵌入视频

1 个答案: