javascript - 我有适用于 1 个视频的代码。如何使其适用于多个视频？

Question

我有 javascript 代码可将 1 个视频的数据发送回 Google Analytics。如何转换代码以处理多个视频？我需要知道使此代码不仅适用于 1 个视频，而且适用于多个视频的正确方法。我不得不重新发布我的代码，因为我不知道该怎么做。代码如下；

    <video id="v1" src="/v1.mp4" width="400px" height="200px" controls />
<video id="v2" src="/v2.mp4" width="400px" height="200px" controls />


<script type="text/javascript">
(function() {
  document.addEventListener('DOMContentLoaded', init, false);
  var videoId, dur, quarter, stat;

  function init() {
    for (var video of document.querySelectorAll('video')) {
      video.addEventListener('play', videoPlay, false);
      video.addEventListener('ended', videoEnd, false);
      video.addEventListener('timeupdate', videoTimeUpdate, false);
    }
  }

  function setKeyFrames(duration) {
    if (dur) {
      return;
    }
    dur = duration;
    quarter = duration / 4;
  }

  function videoTimeUpdate(e) {
    var videoId = e.target;
    var curTime = videoId.currentTime;
    if (curTime >= quarter && curTime < quarter * 2 && stat !== 1) {
      gtag('event', 'Watched Video', {
        'event_category': 'Video',
        'event_label': 'Watched 25% of ' + videoId.id
      });
      stat = 1;

    } else if (curTime >= quarter * 2 && curTime < quarter * 3 && stat !== 2) {
      gtag('event', 'Watched Video', {
        'event_category': 'Video',
        'event_label': 'Watched 50% of ' + videoId.id
      });
      stat = 2;

    } else if (curTime >= quarter * 3 && curTime < dur && stat !== 3) {
      gtag('event', 'Watched Video', {
        'event_category': 'Video',
        'event_label': 'Watched 75% of ' + videoId.id
      });
      stat = 3;

    }
  }

  function videoPlay(e) {
    var videoId = e.target;
    gtag('event', 'Watched Video', {
      'event_category': 'Video',
      'event_label': 'Video Played Is ' + videoId.id
    })
    setKeyFrames(this.duration);

  }


  function videoEnd(e) {
    var videoId = e.target;
    stat = 4;
    gtag('event', 'Watched Video', {
        'event_category': 'Video',
        'event_label': 'Watched ALL of ' + videoId.id
      });

  }



})();


</script>

标签： javascript

Answer 1

用于document.querySelectorAll('video')获取所有视频。
然后将它们迭代到addEventListeners。
然后，在事件句柄中，用于event.target获取视频元素。

请参阅下面的片段，我添加console.log以可视化回调：

(function() {
  document.addEventListener('DOMContentLoaded', init, false);
  var videoId, dur, quarter, stat;

  function init() {
    for (var video of document.querySelectorAll('video')) {
      video.addEventListener('play', videoPlay, false);
      video.addEventListener('ended', videoEnd, false);
      video.addEventListener('timeupdate', videoTimeUpdate, false);
    }
  }

  function setKeyFrames(duration) {
    if (dur) {
      return;
    }
    dur = duration;
    quarter = duration / 4;
  }

  function videoTimeUpdate(e) {
    var videoId = e.target;
    var curTime = videoId.currentTime;
    if (curTime >= quarter && curTime < quarter * 2 && stat !== 1) {
      gtag('event', 'Test 2 - User Watched 25% of Video', {
        'event_category': 'video played is the monkey category',
        'event_label': 'video played is the label'
      });
      stat = 1;
      console.log(videoId.id + ' 25% watched');
    } else if (curTime >= quarter * 2 && curTime < quarter * 3 && stat !== 2) {
      gtag('event', 'Test 2 - User Watched 50% of Video', {
        'event_category': 'video played is the monkey category',
        'event_label': 'video played is the label'
      });
      stat = 2;
      console.log(videoId.id + ' 50% watched');
    } else if (curTime >= quarter * 3 && curTime < dur && stat !== 3) {
      gtag('event', 'Test 2 - User Watched 75% of Video', {
        'event_category': 'video played is the monkey category',
        'event_label': 'video played is the label'
      });
      stat = 3;
      console.log(videoId.id + ' 75% watched');
    }
  }

  function videoPlay(e) {
    var videoId = e.target;
    gtag('event', 'Test 2 - User Played Video', {
      'event_category': 'video played is the monkey category',
      'event_label': 'video played is the label'
    })
    setKeyFrames(this.duration);
    console.log(videoId.id + ' start');
  }


  function videoEnd(e) {
    var videoId = e.target;
    stat = 4;
    gtag('event', 'Test 2 - User Watched ALL of Video', {
      'event_category': 'video played is the monkey category',
      'event_label': 'video played is the label'
    });
    console.log(videoId.id + ' end');
  }
  
  // placeholder
  function gtag(){}
  
})();

video {
  display: inline-block;
  width: 20vw
}

<video id="v1" src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-1.webm" controls></video>
<video id="v2" src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-2.webm" controls></video>
<video id="v3" src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-3.webm" controls></video>
<video id="v4" src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-5.webm" controls></video>