单击图像时播放 youtube 视频，并在视频结束时返回图像答案

【问题标题】：Play a youtube video when an image is clicked and go back to the image when video ends单击图像时播放 youtube 视频，并在视频结束时返回图像
【发布时间】：2017-11-05 17:49:37
【问题描述】：

我正在开发一个网站，我的客户希望能够在点击图片时播放 youtube 视频，当视频播放完毕后，视频消失并再次出现相同的图片。

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

【问题讨论】：

标签： javascript jquery html youtube youtube-api

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

下面是sn-p的代码：

<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/

【讨论】：

太棒了！感谢您的回答！ :)

【解决方案3】：

您可以使用 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
                }
            }
        }
    });
}

【讨论】：