Javascript 单击图像时播放youtube视频，视频结束时返回图像

我正在开发一个网站，在这个网站上，我的客户希望能够在点击一个图像时播放youtube视频，当视频结束时，视频消失，相同的图像再次出现

例如，查看下面的网站并单击主页上的图像。

---

您可以使用youtube Iframe API来解决此问题

以下是示例脚本：

$('#yourImage').on('click', function () {
    var player = new YT.Player('yourDivToAppendVideo', {
        // height: '1080',
        // width: '1920',
        videoId: 'putVideoIdHere',
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'showinfo': 0,
            // and other options
        },
        events: {
            'onReady': function (event) {
                // Write your logic to HIDE the image here
                event.target.playVideo(); // play video
            },
            'onStateChange': function (event) {
                if (event.data == YT.PlayerState.ENDED) {
                    // Write your logic to UNHIDE the image here
                }
            }
        }
    });
}

---

您可以使用youtube Iframe API来解决此问题

以下是示例脚本：

$('#yourImage').on('click', function () {
    var player = new YT.Player('yourDivToAppendVideo', {
        // height: '1080',
        // width: '1920',
        videoId: 'putVideoIdHere',
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'showinfo': 0,
            // and other options
        },
        events: {
            'onReady': function (event) {
                // Write your logic to HIDE the image here
                event.target.playVideo(); // play video
            },
            'onStateChange': function (event) {
                if (event.data == YT.PlayerState.ENDED) {
                    // Write your logic to UNHIDE the image here
                }
            }
        }
    });
}

---

您可以按照以下方法实现这一目标：

单击图像时，将其隐藏并使播放器容器div可见。绑定YT播放机的onStateChange事件以检查视频结束，然后隐藏播放机或将其删除并使图像可见

下面是代码片段：

<img src="http://d3gnp09177mxuh.cloudfront.net/tech-page-images/java.png" id="javaImg">
<div id="playerContainer">
  <div id="player" width="300" align="left" height="238" style="margin-right:30px;"></div>
</div>

$("#javaImg").click(function(){
if($("#player").is("div"))
{
  $(this).hide();
  player = new YT.Player('player', {
    height: '335',
    width: '596',
    playerVars: { 'controls': 1,'autohide':1},
    videoId: 'r59xYe3Vyks',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

}
  else {
    player.autohide=1;
    player.playVideo();
  }
  function onPlayerReady(event) {
    event.target.playVideo();
  } 

  function onPlayerStateChange(event) {        
    if(event.data === 0) {            
      $("#player").remove(); 
      $("#playerContainer").append('<div id ="player" width="300" align="left" height="238" style="margin-right:30px;"></div>');
      $("#javaImg").show();
    }
  }
});

---

我还制作了一把小提琴，

您可以按照以下方法来实现：

单击图像时，将其隐藏并使播放器容器div可见。绑定YT播放机的onStateChange事件以检查视频结束，然后隐藏播放机或将其删除并使图像可见

下面是代码片段：

<img src="http://d3gnp09177mxuh.cloudfront.net/tech-page-images/java.png" id="javaImg">
<div id="playerContainer">
  <div id="player" width="300" align="left" height="238" style="margin-right:30px;"></div>
</div>

$("#javaImg").click(function(){
if($("#player").is("div"))
{
  $(this).hide();
  player = new YT.Player('player', {
    height: '335',
    width: '596',
    playerVars: { 'controls': 1,'autohide':1},
    videoId: 'r59xYe3Vyks',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

}
  else {
    player.autohide=1;
    player.playVideo();
  }
  function onPlayerReady(event) {
    event.target.playVideo();
  } 

  function onPlayerStateChange(event) {        
    if(event.data === 0) {            
      $("#player").remove(); 
      $("#playerContainer").append('<div id ="player" width="300" align="left" height="238" style="margin-right:30px;"></div>');
      $("#javaImg").show();
    }
  }
});

我还从API创建了一个小提琴，

：

function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                //replace video with image
            }

//status states from API
  // -1 – unstarted
  // 0 – ended
  // 1 – playing
  // 2 – paused
  // 3 – buffering
  // 5 - Video Cued

从API：

function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                //replace video with image
            }

//status states from API
  // -1 – unstarted
  // 0 – ended
  // 1 – playing
  // 2 – paused
  // 3 – buffering
  // 5 - Video Cued

---

太神了谢谢你的回答！：太神了谢谢你的回答！：