Question

目标

目的是能够调整YouTube JavaScript，以便能够检测视频何时完成初始缓冲并开始播放。然后，这应该触发一个事件，然后从类中删除Display: none，显示自动播放视频。这背后的想法是移动设备不会看到视频，因为移动设备不允许自动播放，因此我们想隐藏它。由于我正在使用的平台，我不能使用媒体查询，因为视口必须设置为1280px。

当前进度

我已经厌倦了使用YouTube状态更改删除显示无。但是，当视频播放时，缓冲区启动时会删除视频。视频仍显示在移动设备上的含义。

// 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', {
      videoId: 'UA-DEHHUjeM',
        playerVars: {
            'loop' :1,
            'playlist' :'UA-DEHHUjeM' 
        },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
  }


  // 5. The API calls this function when the player's state changes.    
  var done = false;
  function onPlayerStateChange(event) {
    document.getElementById("videoContainer").className = document.getElementById("videoContainer").className.replace( /(?:^|\s)video-hidden(?!\S)/g , '' ); 
  }

所有建议表示赞赏!!!

Answer 1

您可以使用YT.PlayerState对象并将其与event.data进行比较，以查找视频是否正在播放，如下所示：

  function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING){
        //your code here
      }
  }

Youtube检测视频何时开始播放

1 个答案: