当第一个视频结束时，让YouTube api自动启动另一个视频 [英] Make YouTube api automatically start another video when first video ended

问题描述

我需要为我的网站制作视频页面，其中必须包含来自YouTube的视频（ https： //www.youtube.com/watch?v=bWPMSSsVdPk ），此视频结束后，我需要自动显示第二个视频（ https://www.youtube.com/watch?v=0afZj1G0BIE ）和 div 类<$ c

$ b pre



pre pre $ > <风格>
.content {
display：none;
}
< / style>

< div class =content>
<按钮>在第一个视频结束后显示此按钮< /按钮>
< / div>

< div id =player>< / div>

< script src =http://www.youtube.com/player_api>< / script>
< script>
//创建youtube播放器
var player;
函数onYouTubePlayerAPIReady（）{
player = new YT.Player（'player'，{
height：'390'，
width：'640'，
videoId ：'bWPMSSsVdPk'，
events：{
'onReady'：onPlayerReady，$ b $'onStateChange'：onPlayerStateChange
}
}）;
}
//自动播放视频
函数onPlayerReady（event）{
event.target.playVideo（）;
}
//当视频结束时
函数onPlayerStateChange（event）{
if（event.data === 0）{
alert（'done'）;
}
}
< / script>


解决方案

第二个视频的声音也与第一个视频同时播放......

 < style> 
 .second-video {
 display：none; 
} 
< / style> 
 
< div class =video-site> 
< div class =first-video> 
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> 
< div id =player>< / div> 
< / div> 
< div class =second-video> 
< div id =player2>< / div> 
< / div> 
< / div> 
 
< script src =http://www.youtube.com/player_api>< / script> 
< script> 
 //创建youtube播放器
 var player; 
 var player2; 
 
 function onYouTubePlayerAPIReady（）{
 player = new YT.Player（'player'，{
 height：'390'，
 width：'640'，
 videoId：'qCDxEif_9js'，
 events：{
'onReady'：onPlayerReady，$ b $'onStateChange'：onPlayerStateChange 
} 
}）; 
 player2 = new YT.Player（'player2'，{
 height：'390'，
 width：'640'，
 videoId：'43jHG-yH9Gc'，
 events：{
'onReady'：onPlayerReady，$ b $'onStateChange'：onPlayerStateChange 
} 
}）; 
} 
 
 //自动播放视频
函数onPlayerReady（event）{
 event.target.playVideo（）; $（'。close'）。click（function（）{
 $（'。first-video'）。hide（3000）; 
 $（'。second-video'） .fadeIn（）; 
}）; 
} 
 //当视频结束时
函数onPlayerStateChange（event）{
 if（event.data === 0）{
 $（'。first-video ）.hide（3000）; 
 $（'。second-video'）。fadeIn（）; 
} 
} 
 
< / script> 
  

I need to make a video page for my website which must contain a video from youtube (https://www.youtube.com/watch?v=bWPMSSsVdPk) and after this video ended I need to automatically display a second video (https://www.youtube.com/watch?v=0afZj1G0BIE) and the div with class content

This is my code so far:

<style>
  .content {
    display: none;
  }
</style>

<div class="content">
  <button>Show this button after first video ends</button>
</div>

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>
<script>
  // create youtube player
  var player;
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'bWPMSSsVdPk',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
  }
  // autoplay video
  function onPlayerReady(event) {
      event.target.playVideo();
  }
  // when video ends
  function onPlayerStateChange(event) {        
      if(event.data === 0) {          
          alert('done');
      }
  }
</script>

解决方案

I've found a solution for this but it seems that the sound of the second video is also playing in the same time with the first video...

<style>
    .second-video {
        display: none;
    }
</style>

<div class="video-site">
  <div class="first-video">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div id="player"></div>
  </div>
  <div class="second-video">
    <div id="player2"></div>
  </div>
</div>

<script src="http://www.youtube.com/player_api"></script>
<script>
  // create youtube player
  var player;
  var player2;

  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'qCDxEif_9js',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
    player2 = new YT.Player('player2', {
      height: '390',
      width: '640',
      videoId: '43jHG-yH9Gc',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // autoplay video
  function onPlayerReady(event) {
    event.target.playVideo();
    $('.close').click(function(){
      $('.first-video').hide(3000);
      $('.second-video').fadeIn();
    });
  }
  // when video ends
  function onPlayerStateChange(event) {
    if(event.data === 0) {
      $('.first-video').hide(3000);
      $('.second-video').fadeIn();
    }
  }

</script>

这篇关于当第一个视频结束时，让YouTube api自动启动另一个视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！