Question

我正在使用youtube iframe api来检测视频何时开始播放，有时可能会发生状态更改为缓冲然后重新播放的情况，因此myFunction在每个会话中执行了多次，我该怎么做它只运行一次？

if (event.data == YT.PlayerState.PLAYING) {
    playing = true;
    player.mute();
    player.setPlaybackQuality('small');

    function myFunction() {
        setTimeout(function(){
            var videoData = player.getVideoData();
            var video_id = videoData['video_id'];
            const Http = new XMLHttpRequest();
            const url='https://url?viewcounter=' + video_id;
            Http.open("GET", url);
            Http.send();
        }, 3000);
    }
}

Answer 1

使用布尔标志

var alreadyRun = false;
if (event.data == YT.PlayerState.PLAYING && !alreadyRun) {
            playing = true;
            alreadyRun = true;
            player.mute();
            player.setPlaybackQuality('small');
    function myFunction() {
      setTimeout(function(){
        var videoData = player.getVideoData();
        var video_id = videoData['video_id'];
        const Http = new XMLHttpRequest();
        const url='https://url?viewcounter=' + video_id;
        Http.open("GET", url);
        Http.send();
      }, 3000);
    }
}

Answer 2

我还没有测试过，但是您可以在if语句中使用一个变量，即：

var isplaying = false;

if (event.data == YT.PlayerState.PLAYING && isplaying === false) {
    isplaying = true;
    playing = true;
    player.mute();
    player.setPlaybackQuality('small');
    function myFunction() {
        setTimeout(function(){
            var videoData = player.getVideoData();
            var video_id = videoData['video_id'];
            const Http = new XMLHttpRequest();
            const url='https://url?viewcounter=' + video_id;
            Http.open("GET", url);
            Http.send();
        }, 3000);
    }
}

Answer 3

我还会检查视频是否正在缓冲，因此yt返回YT.PlayerState.BUFFERING

if (event.data === YT.PlayerState.PLAYING && event.data !== YT.PlayerState.BUFFERING)  {
    playing = true;
    player.mute();
    player.setPlaybackQuality('small');

    function myFunction() {
        setTimeout(function(){
            var videoData = player.getVideoData();
            var video_id = videoData['video_id'];
            const Http = new XMLHttpRequest();
            const url='https://url?viewcounter=' + video_id;
            Http.open("GET", url);
            Http.send();
        }, 3000);
    }
}

Answer 4

使用全局变量只能运行1次。

var sw_myFunction = false;

if (event.data == YT.PlayerState.PLAYING) {
    playing = true;
    player.mute();
    player.setPlaybackQuality('small');

    function myFunction() {
        if(sw_myFunction) return;
        setTimeout(function(){
            var videoData = player.getVideoData();
            var video_id = videoData['video_id'];
            const Http = new XMLHttpRequest();
            const url='https://url?viewcounter=' + video_id;
            Http.open("GET", url);
            Http.send();
        }, 3000);
        sw_myFunction = true;
    }
}

Answer 5

Somethin错误，30秒后未调用http请求。完整代码

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <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);
     var sw_myFunction = false;
     var player, playing = false;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          videoId: '<?php if (empty($vid)) {
    echo "YbJOTdZBX1g";
}
else {
    echo $vid;
}
 ?>',
          playerVars: {'controls': 0, 'fs': 0,'playsinline': 1 },         
          events: {
            'onError': onPlayerError, 
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

          function onPlayerStateChange(event) {


if (event.data == YT.PlayerState.PLAYING) {
    playing = true;
    player.mute();
    player.setPlaybackQuality('small');
    var videoData = player.getVideoData();
    var video_id = videoData['video_id'];
    function myFunction() {
        if(sw_myFunction) return;
        setTimeout(function(){
            const Http = new XMLHttpRequest();
            const url='https://www.url.com?viewcounter=' + video_id;
            Http.open("GET", url);
            Http.send();
        }, 30000);
        sw_myFunction = true;
    }
}

      else if(event.data == YT.PlayerState.PAUSED){     

       }

      else if(event.data == YT.PlayerState.ENDED){      

       }  

}
      function onPlayerReady(event) {
      }

function onPlayerError(event)
{       

}
    </script>
  </body>
</html>

如何防止使用JavaScript再次调用函数？

5 个答案: