Youtube检测视频何时开始播放

Youtube detect when video started playing

本文关键字：开始 播放 何时 视频 检测 Youtube      更新时间：2023-09-26

目标

其目的是能够调整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 , '' ); 
  }

感谢所有建议！！！

您可以使用YT.PlayerState对象并将其与event.data进行比较，以确定视频是否正在播放，它看起来如下：

  function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING){
        //your code here
      }
  }
相关文章：