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可见。绑定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();
    }
  }
});

我还创造了一个小提琴，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

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

3 个答案: