点击图片，展开div并播放视频

1 回答

• 0

  正如在完整的YouTube播放器API here中所解释的那样，您将需要为此脚本创建一个ID为播放器的空div . 一旦 onPlayerReady 事件触发，您可以挂钩脚本创建的javascript player 对象，并使用它来通过 player.playVideo() 之类的调用来操纵视频播放器 . 替换空div的iframe可以像任何其他DOM元素一样进行修改，以更改视频播放器的大小 .

  注意：我提供的脚本是从原始API示例中删除的，因此它在6秒后不会停止

  <script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
  
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }
  
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      event.target.playVideo();
    }
  
    function onPlayerStateChange(){
      //Do Nothing for now
    }
  
  </script>
  

  回复于 2024-04-20T21:36:06+08:00