单击图像时播放YouTube视频，并在视频结束时返回到图像

Question

我正在开发一个网站，当我的客户单击图像时，我的客户希望能够播放YouTube视频，当视频完成时，视频消失了，同一图像再次出现。<<<<<<<<<<<<<<<<

例如，查看下面的网站，然后单击主页上的图像。https://www.oldbankruptcypapers.com/

Answer 1

您可以使用youtube iframe api(https://developers.google.com/youtube/iframe_api_reference(来解决此问题。

这是示例脚本：

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

Answer 2

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

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

以下是代码段：

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

我还创建了一个小提琴，https://jsfiddle.net/qlzpg27g/

Answer 3

来自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

https://developers.google.com/youtube/iframe_api_reference#retrieving_video_information